ExtJS4.2 Learning (11) a table that can be dragged and dropped

Acknowledgement: http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-18/180.html

--------------------------------------------------------------------------------------------

Let's take a look at the first example and change the table size by dragging and dropping:

The following is the complete code:

/** Grid * This JS demonstrates ExtJS's drag-and-drop table: Drag each other between tables .*/ //tabular data At least has columns, data, conversion of raw data 3 itemsExt.onready (function(){    varcolumns =[{header:' Number ', Dataindex: ' ID '}, {header:' Name ', Dataindex: ' Name '}, {header:' Description ', dataindex: ' DESCN '}               ]; vardata = [        [' 1 ', ' name1 ', ' descn1 '],        [' 2 ', ' name2 ', ' descn2 '],        [' 3 ', ' Name3 ', ' descn3 '],        [' 4 ', ' name4 ', ' descn4 '],        [' 5 ', ' name5 ', ' descn5 ']    ]; varstore =NewExt.data.ArrayStore ({data:data, fields: [{name:' ID '}, {name:' Name '}, {name:' Descn '}        ]    });    Store.load (); varGrid =NewExt.grid.GridPanel ({renderto:' Grid ', Store:store, Columns:columns, viewconfig:{//Add this code to drag and drop in the same tableplugins:{PType:' Gridviewdragdrop '            }        }    }); //just add the following code to implement drag and drop    varSza=Newext.resizable (Grid.getel (), {wrap:true,//Automatic PackageMINHEIGHT:100,//min. heightPinnedtrue,//to control the display state of a drop zoneHandles: ' s '//set the direction you can drag and drop    }); Rz.on ("Resize",function(resizer,width,height,event) {grid.setheight (height); },grid);});

To explain what the next attribute means?

The resizable () function must be placed after render, or the problem will occur.

The first parameter is a grid, which means that this resizable area works on the div id= "grid" element.

Wrap:true, this parameter automatically wraps a layer of div outside the specified ID when constructing the resizable () function, so that no other subordinate div is defined in the HTML.

MINHEIGHT:100, which limits the minimum height of the change.

Pinned:true, this parameter controls the display state of the drop zone. If the value is true, the drop area is displayed at the bottom of the table, and if False, only appears when the mouse hovers over the drop-down area. The specific configuration depends on your hobbies.

Handles: ' s ', S is south. Ext with East, south, west, north corresponding upper, lower, left, right, with the first letter to set the direction you can drag and drop.

Finally, do not forget to register the resize event, after the drag and drop is completed, the table will call the SetHeight () method to modify its size, the 3rd parameter of the Re.on () function is the scope of function execution.

A 2nd example, drag and drop in the same table

Ext table built-in support for drag and drop, so it is very convenient to use, only need to set the Gridviewdragdrop plug-in line, the specific code is as follows:

var New Ext.grid.GridPanel ({      ' grid ',      store:store,      columns:columns,      // Add this code to drag and drop  in the same table         plugins:{              ptype:' Gridviewdragdrop '}}  );  

Hey, now on:

What, you think this is not enjoyable, remember I mentioned at the beginning of the article, but also can be dragged between multiple tables, then look at the code:

/** * Grid * This JS demonstrates the ExtJS table: Two tables can be dragged and released from one another .*/ //tabular data At least has columns, data, conversion of raw data 3 itemsExt.onready (function(){        varStore1 =NewExt.data.ArrayStore ({data: [[' Name01 ', ' Descn01 '],              [' Name02 ', ' descn02 '],              [' Name03 ', ' descn03 '],              [' Name04 ', ' descn04 '],              [' To ', ' name05 ', ' descn05 '] ], fields: [{name:' ID '}, {name:' Name '}, {name:' Descn '}          ]      }); varStore2 =NewExt.data.ArrayStore ({data: [[' One ', ' name11 ', ' descn11 '],              [' A ', ' name12 ', ' descn12 '],              [' A ', ' name13 ', ' descn13 '],              [' + ', ' name14 ', ' descn14 '],              [' A ', ' name15 ', ' descn15 '] ], fields: [{name:' ID '}, {name:' Name '}, {name:' Descn '}          ]      });      Store1.load ();        Store2.load (); varcolumns =[{header:' Number ', Dataindex: ' ID '}, {header:' Name ', Dataindex: ' Name '}, {header:' Description ', dataindex: ' DESCN '}      ]; varGRID1 =NewExt.grid.GridPanel ({width:400, Autoheight:true, Renderto:' Grid1 ', Store:store1, Columns:columns, Enabledragdrop:true, Viewconfig: {plugins: {ptype:' Gridviewdragdrop '              }          }      }); varGrid2 =NewExt.grid.GridPanel ({width:400, Autoheight:true, Renderto:' Grid2 ', Store:store2, Columns:columns, Enabledragdrop:true, Viewconfig: {plugins: {ptype:' Gridviewdragdrop '              }          }      });  }); 

On

Well, here's the end of the chapter, the next chapter begins with the extension, and when all the extensions are finished, the table control is over and you try it out.

ExtJS4.2 Learning (11) Table (turn) can be dragged and dropped