ExtJS4.2学习(11)可拖放的表格（转）

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

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

先来看下第一个例子，通过拖放改变表格大小：

以下是完整代码：

/**
 * Grid
 * 此js演示了ExtJS之可拖放的表格：在一个表格间互相拖行
 */
//表格数据最起码有列、数据、转换原始数据这3项
Ext.onReady(function(){
    var columns = [
                   {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.ArrayStore({
        data: data,
        fields: [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ]
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        renderTo: 'grid',
        store: store,
        columns: columns,
        viewConfig:{ //加入此代码可在同一个表格里拖放
            plugins:{
                ptype:'gridviewdragdrop'
            }
        }
    });

    //只需要加入下面代码即可实现拖放
    var rz = new Ext.Resizable(grid.getEl(),{
        wrap:true, //自动包裹
        minHeight:100, //最小高度
        pinned:true, //控制可拖放区域的显示状态
        handles:'s' //设置可以拖放的方向
    });
    rz.on("resize",function(resizer,width,height,event){
        grid.setHeight(height);
    },grid);
});

来解释下属性什么意思？

Resizable()函数必须放在render之后，否则会出现问题。

第一个参数是grid，就是说这个可改变大小的区域是在div id="grid" 这个元素上起作用。

wrap:true，这个参数会在构造Resizable()函数时自动在指定id的外边包裹一层div，这样就不用在HTML里定义其他附属的div了。

minHeight:100，它限制改变的最小高度。

pinned:true，此参数控制可拖放区域的显示状态。如果值为true，则可拖放区域会一直显示在表格下方；如果值为false，只有鼠标悬停在可拖放区域上方时才会出现。具体配置取决于个人爱好。

handles:'s'，s即south。Ext中用东、南、西、北对应上、下、左、右，用首字母来设置可以拖放的方向。

最后别忘了注册resize事件，在拖放完成之后，表格会调用setHeight()方法修改自己的大小，re.on()函数的第3个参数是函数执行的scope。

第2个例子，在同一个表格中拖放

Ext的表格内置了对拖放的支持，所以使用起来非常方便，只需要设置gridviewdragdrop插件就行了，具体代码如下：

var grid = new Ext.grid.GridPanel({
    renderTo: 'grid',
    store: store,
    columns: columns,
    viewConfig:{ //加入此代码可在同一个表格里拖放
        plugins:{
            ptype:'gridviewdragdrop'
        }
    }
});  

嘿嘿，现在上效果图：

什么，你觉得这样还不过瘾，记得我在文章开头提过，还可以多个表格之间相互拖拽，那么现在来看看代码：

/**
 * Grid
 * 此js演示了ExtJS之可拖放的表格：两个表格间可以互相拖放行
 */
//表格数据最起码有列、数据、转换原始数据这3项
Ext.onReady(function(){  

    var store1 = new Ext.data.ArrayStore({
        data: [
            ['01','name01','descn01'],
            ['02','name02','descn02'],
            ['03','name03','descn03'],
            ['04','name04','descn04'],
            ['05','name05','descn05']
        ],
        fields: [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ]
    });
    var store2 = new Ext.data.ArrayStore({
        data: [
            ['11','name11','descn11'],
            ['12','name12','descn12'],
            ['13','name13','descn13'],
            ['14','name14','descn14'],
            ['15','name15','descn15']
        ],
        fields: [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ]
    });  

    store1.load();
    store2.load();  

    var columns = [
        {header:'编号',dataIndex:'id'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ];  

    var grid1 = new Ext.grid.GridPanel({
        width:400,
        autoHeight: true,
        renderTo: 'grid1',
        store: store1,
        columns: columns,
        enableDragDrop: true,
        viewConfig: {
            plugins: {
                ptype: 'gridviewdragdrop'
            }
        }
    });
    var grid2 = new Ext.grid.GridPanel({
        width:400,
        autoHeight: true,
        renderTo: 'grid2',
        store: store2,
        columns: columns,
        enableDragDrop: true,
        viewConfig: {
            plugins: {
                ptype: 'gridviewdragdrop'
            }
        }
    });
});  

上效果图：

好了，本章到此结束，下章开始讲扩展插件，等所有扩展插件讲完，表格控件就到此结束了，你也来动手试试吧。