ExtJs grid可拖拽行

ExtJS可拖拽功能

---

步骤：

在定义grid的时候设置    enableDragDrop: true 可以拖拽的功能

在定义一个dropTarget

如果获得用户选择了几行；

var rows = data.selections;

得到用户拖动到第几行

var index = dd.getDragData(e).rowIndex;

 var ddrow = new Ext.dd.DropTarget(grid.container, {

        ddGroup : 'GridDD',

        copy    : false,

        notifyDrop : function(dd, e, data) {

            // 选中了多少行

            var rows = data.selections;

            // 拖动到第几行

            var index = dd.getDragData(e).rowIndex;

            if (typeof(index) == "undefined") {

                return;

            }

            // 修改store

            for(i = 0; i < rows.length; i++) {

                var rowData = rows[i];

                if(!this.copy) store.remove(rowData);

                store.insert(index, rowData);

            }

        }

    });

 

< html >
     < head >
         < meta   http-equiv = "Content-Type"   content = "text/html; charset=gbk" >
         < title > 03.grid </ title >
           < link   rel = "stylesheet"   type = "text/css"   href = "../ext3.2/resources/css/ext-all.css"   />
         < script   type = "text/javascript"   src = "../ext3.2/adapter/ext/ext-base.js" ></ script >
         < script   type = "text/javascript"   src = "../ext3.2/ext-all.js" ></ script >
         < script   type = "text/javascript" >
Ext.onReady( function (){
     var  cm =  new  Ext.grid.ColumnModel([
        {header: '编号' ,dataIndex: 'id' },
        {header: '名称' ,dataIndex: 'name' },
        {header: '描述' ,dataIndex: 'descn' }
    ]);
     var  data = [
        [ '1' , 'name1' , 'descn1' ],
        [ '2' , 'name2' , 'descn2' ],
        [ '3' , 'name3' , 'descn3' ],
        [ '4' , 'name4' , 'descn4' ],
        [ '5' , 'name5' , 'descn5' ]
    ];
     var  store =  new  Ext.data.Store({
        proxy:  new  Ext.data.MemoryProxy(data),
        reader:  new  Ext.data.ArrayReader({}, [
            {name:  'id' },
            {name:  'name' },
            {name:  'descn' }
        ])
    });
    store.load();
     var  grid =  new  Ext.grid.GridPanel({
        autoHeight:  true ,
        renderTo:  'grid' ,
        store: store,
        cm: cm,
        enableDragDrop:  true
     });
     var  ddrow =  new  Ext.dd.DropTarget(grid.container, {
        ddGroup :  'GridDD' ,
        copy    :  false ,
        notifyDrop :  function (dd, e, data) {
             // 选中了多少行
            var  rows = data.selections;
             // 拖动到第几行
            var  index = dd.getDragData(e).rowIndex;
             if  ( typeof (index) ==  "undefined" ) {
                 return ;
            }
             // 修改store
            for (i = 0; i < rows.length; i++) {
                 var  rowData = rows[i];
                 if (! this .copy) store.remove(rowData);
                store.insert(index, rowData);
            }
        }
    });
});
         </ script >
     </ head >
     < body >
       
         < div   id = "grid" ></ div >
     </ body >
</ html >

来自为知笔记(Wiz)