Ext.data.JsonP.Ext_grid_plugin_DragDrop({"alternateClassNames":[],"aliases":{"plugin":["gridviewdragdrop"]},"enum":null,"parentMixins":[],"tagname":"class","subclasses":[],"extends":"Ext.AbstractPlugin","uses":["Ext.grid.ViewDropZone","Ext.view.DragZone"],"html":"
Hierarchy
Ext.BaseExt.AbstractPluginExt.grid.plugin.DragDropUses
Files
This plugin provides drag and/or drop functionality for a GridView.
\n\nIt creates a specialized instance of DragZone which knows how to drag out of a GridView and loads the data object which is passed to a cooperating DragZone's\nmethods with the following properties:
\n\ncopy
: Boolean
The value of the GridView's copy
property, or true
if the GridView was configured with allowCopy: true
and\nthe control key was pressed when the drag operation was begun.
view
: GridView
The source GridView from which the drag originated.
ddel
: HtmlElement
The drag proxy element which moves with the mouse
item
: HtmlElement
The GridView node upon which the mousedown event was registered.
records
: Array
An Array of Models representing the selected data being dragged from the source GridView.
It also creates a specialized instance of Ext.dd.DropZone which cooperates with other DropZones which are\nmembers of the same ddGroup which processes such data objects.
\n\nAdding this plugin to a view means that two new events may be fired from the client GridView, beforedrop
and drop
Ext.create('Ext.data.Store', {\n storeId:'simpsonsStore',\n fields:['name'],\n data: [[\"Lisa\"], [\"Bart\"], [\"Homer\"], [\"Marge\"]],\n proxy: {\n type: 'memory',\n reader: 'array'\n }\n});\n\nExt.create('Ext.grid.Panel', {\n store: 'simpsonsStore',\n columns: [\n {header: 'Name', dataIndex: 'name', flex: true}\n ],\n viewConfig: {\n plugins: {\n ptype: 'gridviewdragdrop',\n dragText: 'Drag and drop to reorganize'\n }\n },\n height: 200,\n width: 400,\n renderTo: Ext.getBody()\n});\n
\ntrue
to register this container with the Scrollmanager for auto scrolling during drag operations.\nA Ext.dd.ScrollManager configuration may also be passed.
Defaults to: false
A named drag drop group to which this object belongs. If a group is specified, then both the DragZones and\nDropZone used by this plugin will only interact with other drag drop objects in the same group.
\nDefaults to: "GridDD"
The text to show while dragging.
\n\nTwo placeholders can be used in the text:
\n\n{0}
The number of selected items.{1}
's' when more than 1 items (only useful for English).Defaults to: '{0} selected row{1}'
false
to disallow dragging items from the View.
Defaults to: true
false
to disallow the View from accepting drop gestures.
Defaults to: true
A name for the plugin that can be set at creation time to then retrieve the plugin\nthrough getPlugin method. For example:
\n\nvar grid = Ext.create('Ext.grid.Panel', {\n plugins: [{\n ptype: 'cellediting',\n clicksToEdit: 2,\n pluginId: 'cellplugin'\n }]\n});\n\n// later on:\nvar plugin = grid.getPlugin('cellplugin');\n
\ntrue
in this class to identify an object as an instantiated Plugin, or subclass thereof.
Defaults to: true
Get the reference to the current class from which this object was instantiated. Unlike statics,\nthis.self
is scope-dependent and it's meant to be used for dynamic inheritance. See statics\nfor a detailed comparison
Ext.define('My.Cat', {\n statics: {\n speciesName: 'Cat' // My.Cat.speciesName = 'Cat'\n },\n\n constructor: function() {\n alert(this.self.speciesName); // dependent on 'this'\n },\n\n clone: function() {\n return new this.self();\n }\n});\n\n\nExt.define('My.SnowLeopard', {\n extend: 'My.Cat',\n statics: {\n speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'\n }\n});\n\nvar cat = new My.Cat(); // alerts 'Cat'\nvar snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard'\n\nvar clone = snowLeopard.clone();\nalert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'\n
\nCall the original method that was previously overridden with override
\n\nExt.define('My.Cat', {\n constructor: function() {\n alert(\"I'm a cat!\");\n }\n});\n\nMy.Cat.override({\n constructor: function() {\n alert(\"I'm going to be a cat!\");\n\n this.callOverridden();\n\n alert(\"Meeeeoooowwww\");\n }\n});\n\nvar kitty = new My.Cat(); // alerts \"I'm going to be a cat!\"\n // alerts \"I'm a cat!\"\n // alerts \"Meeeeoooowwww\"\n
\n This method has been deprecated
\nas of 4.1. Use callParent instead.
\n\nThe arguments, either an array or the arguments
object\nfrom the current method, for example: this.callOverridden(arguments)
Returns the result of calling the overridden method
\nCall the \"parent\" method of the current method. That is the method previously\noverridden by derivation or by an override (see Ext.define).
\n\n Ext.define('My.Base', {\n constructor: function (x) {\n this.x = x;\n },\n\n statics: {\n method: function (x) {\n return x;\n }\n }\n });\n\n Ext.define('My.Derived', {\n extend: 'My.Base',\n\n constructor: function () {\n this.callParent([21]);\n }\n });\n\n var obj = new My.Derived();\n\n alert(obj.x); // alerts 21\n
\n\nThis can be used with an override as follows:
\n\n Ext.define('My.DerivedOverride', {\n override: 'My.Derived',\n\n constructor: function (x) {\n this.callParent([x*2]); // calls original My.Derived constructor\n }\n });\n\n var obj = new My.Derived();\n\n alert(obj.x); // now alerts 42\n
\n\nThis also works with static methods.
\n\n Ext.define('My.Derived2', {\n extend: 'My.Base',\n\n statics: {\n method: function (x) {\n return this.callParent([x*2]); // calls My.Base.method\n }\n }\n });\n\n alert(My.Base.method(10); // alerts 10\n alert(My.Derived2.method(10); // alerts 20\n
\n\nLastly, it also works with overridden static methods.
\n\n Ext.define('My.Derived2Override', {\n override: 'My.Derived2',\n\n statics: {\n method: function (x) {\n return this.callParent([x*2]); // calls My.Derived2.method\n }\n }\n });\n\n alert(My.Derived2.method(10); // now alerts 40\n
\n\nTo override a method and replace it and also call the superclass method, use\ncallSuper. This is often done to patch a method to fix a bug.
\nThe arguments, either an array or the arguments
object\nfrom the current method, for example: this.callParent(arguments)
Returns the result of calling the parent method
\nThis method is used by an override to call the superclass method but bypass any\noverridden method. This is often done to \"patch\" a method that contains a bug\nbut for whatever reason cannot be fixed directly.
\n\nConsider:
\n\n Ext.define('Ext.some.Class', {\n method: function () {\n console.log('Good');\n }\n });\n\n Ext.define('Ext.some.DerivedClass', {\n method: function () {\n console.log('Bad');\n\n // ... logic but with a bug ...\n\n this.callParent();\n }\n });\n
\n\nTo patch the bug in DerivedClass.method
, the typical solution is to create an\noverride:
Ext.define('App.paches.DerivedClass', {\n override: 'Ext.some.DerivedClass',\n\n method: function () {\n console.log('Fixed');\n\n // ... logic but with bug fixed ...\n\n this.callSuper();\n }\n });\n
\n\nThe patch method cannot use callParent
to call the superclass method
since\nthat would call the overridden method containing the bug. In other words, the\nabove patch would only produce \"Fixed\" then \"Good\" in the console log, whereas,\nusing callParent
would produce \"Fixed\" then \"Bad\" then \"Good\".
The arguments, either an array or the arguments
object\nfrom the current method, for example: this.callSuper(arguments)
Returns the result of calling the superclass method
\nCreates clone of the plugin.
\nAdditional config for the derived plugin.
\nAbstractComponent calls destroy on all its plugins at destroy time.
\nOverrides: Ext.AbstractPlugin.destroy
The base implementation just sets the plugin's disabled
flag to true
Plugin subclasses which need more complex processing may implement an overriding implementation.
\nOverrides: Ext.AbstractPlugin.disable
The base implementation just sets the plugin's disabled
flag to false
Plugin subclasses which need more complex processing may implement an overriding implementation.
\nOverrides: Ext.AbstractPlugin.enable
The init method is invoked after initComponent method has been run for the client Component.
\n\nThe supplied implementation is empty. Subclasses should perform plugin initialization, and set up bidirectional\nlinks between the plugin and its client Component in their own implementation of this method.
\nThe client Component which owns this plugin.
\n\n\n\nOverrides: Ext.AbstractPlugin.init
Initialize configuration for this class. a typical example:
\n\nExt.define('My.awesome.Class', {\n // The default config\n config: {\n name: 'Awesome',\n isAwesome: true\n },\n\n constructor: function(config) {\n this.initConfig(config);\n }\n});\n\nvar awesome = new My.awesome.Class({\n name: 'Super Awesome'\n});\n\nalert(awesome.getName()); // 'Super Awesome'\n
\nthis
\nSets the component to which this plugin is attached.
\nOwner component.
\nGet the reference to the class from which this object was instantiated. Note that unlike self,\nthis.statics()
is scope-independent and it always returns the class from which it was called, regardless of what\nthis
points to during run-time
Ext.define('My.Cat', {\n statics: {\n totalCreated: 0,\n speciesName: 'Cat' // My.Cat.speciesName = 'Cat'\n },\n\n constructor: function() {\n var statics = this.statics();\n\n alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to\n // equivalent to: My.Cat.speciesName\n\n alert(this.self.speciesName); // dependent on 'this'\n\n statics.totalCreated++;\n },\n\n clone: function() {\n var cloned = new this.self; // dependent on 'this'\n\n cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName\n\n return cloned;\n }\n});\n\n\nExt.define('My.SnowLeopard', {\n extend: 'My.Cat',\n\n statics: {\n speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'\n },\n\n constructor: function() {\n this.callParent();\n }\n});\n\nvar cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat'\n\nvar snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'\n\nvar clone = snowLeopard.clone();\nalert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'\nalert(clone.groupName); // alerts 'Cat'\n\nalert(My.Cat.totalCreated); // alerts 3\n
\nAdd methods / properties to the prototype of this class.
\n\nExt.define('My.awesome.Cat', {\n constructor: function() {\n ...\n }\n});\n\n My.awesome.Cat.addMembers({\n meow: function() {\n alert('Meowww...');\n }\n });\n\n var kitty = new My.awesome.Cat;\n kitty.meow();\n
\nAdd / override static properties of this class.
\n\nExt.define('My.cool.Class', {\n ...\n});\n\nMy.cool.Class.addStatics({\n someProperty: 'someValue', // My.cool.Class.someProperty = 'someValue'\n method1: function() { ... }, // My.cool.Class.method1 = function() { ... };\n method2: function() { ... } // My.cool.Class.method2 = function() { ... };\n});\n
\nthis
\nBorrow another class' members to the prototype of this class.
\n\nExt.define('Bank', {\n money: '$$$',\n printMoney: function() {\n alert('$$$$$$$');\n }\n});\n\nExt.define('Thief', {\n ...\n});\n\nThief.borrow(Bank, ['money', 'printMoney']);\n\nvar steve = new Thief();\n\nalert(steve.money); // alerts '$$$'\nsteve.printMoney(); // alerts '$$$$$$$'\n
\nThe class to borrow members from
\nThe names of the members to borrow
\nthis
\nCreate a new instance of this Class.
\n\nExt.define('My.cool.Class', {\n ...\n});\n\nMy.cool.Class.create({\n someConfig: true\n});\n
\n\nAll parameters are passed to the constructor of the class.
\nthe created instance.
\nCreate aliases for existing prototype methods. Example:
\n\nExt.define('My.cool.Class', {\n method1: function() { ... },\n method2: function() { ... }\n});\n\nvar test = new My.cool.Class();\n\nMy.cool.Class.createAlias({\n method3: 'method1',\n method4: 'method2'\n});\n\ntest.method3(); // test.method1()\n\nMy.cool.Class.createAlias('method5', 'method3');\n\ntest.method5(); // test.method3() -> test.method1()\n
\nThe new method name, or an object to set multiple aliases. See\nflexSetter
\nThe original method name
\nGet the current class' name in string format.
\n\nExt.define('My.cool.Class', {\n constructor: function() {\n alert(this.self.getName()); // alerts 'My.cool.Class'\n }\n});\n\nMy.cool.Class.getName(); // 'My.cool.Class'\n
\nclassName
\nAdds members to class.
\nThis method has been deprecated since 4.1
\nUse addMembers instead.
\n\nOverride members of this class. Overridden methods can be invoked via\ncallParent.
\n\nExt.define('My.Cat', {\n constructor: function() {\n alert(\"I'm a cat!\");\n }\n});\n\nMy.Cat.override({\n constructor: function() {\n alert(\"I'm going to be a cat!\");\n\n this.callParent(arguments);\n\n alert(\"Meeeeoooowwww\");\n }\n});\n\nvar kitty = new My.Cat(); // alerts \"I'm going to be a cat!\"\n // alerts \"I'm a cat!\"\n // alerts \"Meeeeoooowwww\"\n
\n\nAs of 4.1, direct use of this method is deprecated. Use Ext.define\ninstead:
\n\nExt.define('My.CatOverride', {\n override: 'My.Cat',\n constructor: function() {\n alert(\"I'm going to be a cat!\");\n\n this.callParent(arguments);\n\n alert(\"Meeeeoooowwww\");\n }\n});\n
\n\nThe above accomplishes the same result but can be managed by the Ext.Loader\nwhich can properly order the override and its target class and the build process\ncan determine whether the override is needed based on the required state of the\ntarget class (My.Cat).
\nThis method has been deprecated since 4.1.0
\nUse Ext.define instead
\n\nThe properties to add to this class. This should be\nspecified as an object literal containing one or more properties.
\nthis class
\nThis event is fired through the GridView. Add listeners to the GridView object
\n\nFired when a drop gesture has been triggered by a mouseup event in a valid drop position in the GridView.
\n\nReturning false
to this event signals that the drop gesture was invalid, and if the drag proxy will animate\nback to the point from which the drag began.
The dropHandlers parameter can be used to defer the processing of this event. For example to wait for the result of\na message box confirmation or an asynchronous server call. See the details of this property for more information.
\n\nview.on('beforedrop', function(node, data, overModel, dropPosition, dropHandlers) {\n // Defer the handling\n dropHandlers.wait = true;\n Ext.MessageBox.confirm('Drop', 'Are you sure', function(btn){\n if (btn === 'yes') {\n dropHandlers.processDrop();\n } else {\n dropHandlers.cancelDrop();\n }\n });\n});\n
\n\nAny other return value continues with the data transfer operation, unless the wait property is set.
\nThe GridView node if any over which the mouse was positioned.
\n\nAny other return value continues with the data transfer operation.
\nThe data object gathered at mousedown time by the cooperating\nDragZone's getDragData method it contains the following\nproperties:
\nThe value of the GridView's copy
property, or true
if the GridView was configured with\nallowCopy: true
and the control key was pressed when the drag operation was begun
The source GridView from which the drag originated.
\nThe drag proxy element which moves with the mouse
\nThe GridView node upon which the mousedown event was registered.
\nAn Array of Models representing the selected data being\ndragged from the source GridView.
\nThe Model over which the drop gesture took place.
\n\"before\"
or \"after\"
depending on whether the mouse is above or below the midline\nof the node.
This parameter allows the developer to control when the drop action takes place. It is useful if any asynchronous\nprocessing needs to be completed before performing the drop. This object has the following properties:
\nThe options object passed to Ext.util.Observable.addListener.
\n\n\n\nThis event is fired through the GridView. Add listeners to the GridView object Fired when a drop operation\nhas been completed and the data has been moved or copied.
\nThe GridView node if any over which the mouse was positioned.
\nThe data object gathered at mousedown time by the cooperating DragZone's getDragData method it contains the following properties:
\n\ncopy
: Boolean
The value of the GridView's copy
property, or true
if the GridView was configured with allowCopy: true
and\nthe control key was pressed when the drag operation was begun
view
: GridView
The source GridView from which the drag originated.
ddel
: HtmlElement
The drag proxy element which moves with the mouse
item
: HtmlElement
The GridViewGridView node upon which the mousedown event was registered.
records
: Array
An Array of Models representing the selected data being dragged from the source GridView.
The Model over which the drop gesture took place.
\n\"before\"
or \"after\"
depending on whether the mouse is above or below the midline\nof the node.
The options object passed to Ext.util.Observable.addListener.
\n\n\n\n