ext中将tree中的数据拖拽到grid中，动态生成列

最新推荐文章于 2018-08-30 13:16:06 发布

blago

最新推荐文章于 2018-08-30 13:16:06 发布

阅读量1.3k

点赞数

文章标签： tree ext header function div layout

本文链接：https://blog.csdn.net/blago/article/details/6624172

版权

今天写了好久，公司不能上网，回家后在网上查了下，效果终于出来了，特意写出来分享一下

        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({
            height: 200,
            width: 320,
            hideHeaders: true,
            store: store,
            cm: cm,
            enableDragDrop: true
        })

        var root = new Ext.tree.TreeNode({
            id: 'root',
            text: '数据一'
        });

        var c1 = new Ext.tree.TreeNode({
            id: 'id',
            text: '1'
        })

        var c2 = new Ext.tree.TreeNode({
            id: 'name',
            text: 'name1'
        })

        var c3 = new Ext.tree.TreeNode({
            id: 'descn',
            text: 'descn1'
        })

        root.appendChild(c1);
        root.appendChild(c2);
        root.appendChild(c3);

        var tree = new Ext.tree.TreePanel({
            animate: true,
            enableDD: true,
            ddGroup: 'GridDD',
            enableDrop: true,
            renderTo: 'tree',
            root: root,
            width: 300
        })

        var gridTemp = new Ext.Panel({
            layout: 'fit',
            items: grid,
            height: 200,
            width: 320,
            renderTo: 'gridTemp'
        });

        var ddrow = new Ext.dd.DropTarget(grid.container, {
            ddGroup: 'GridDD',
            copy: false,
            notifyDrop: function(dd, e, data) {
                var selectedNode = tree.getSelectionModel().getSelectedNode();
                var tmpid = selectedNode.attributes.id;
                var tmptext = selectedNode.attributes.text;

                if (tmpid == "root") {
                    alert("根节点不能移动");
                    return;
                }
                if (tmpid == "id") {
                    cmConfig = { header: "编号", dataIndex: "id" }
                }
                if (tmpid == "name") {
                    cmConfig = { header: "名称", dataIndex: "name" }
                }
                if (tmpid == "descn") {
                    cmConfig = { header: "描述", dataIndex: "descn" }
                }
                cmItems.push(cmConfig);

gridTemp.removeAll();

var Tdata = [[tmptext]
]

                var Tstore = new Ext.data.Store({
                proxy: new Ext.data.MemoryProxy(Tdata),
                    reader: new Ext.data.ArrayReader({}, [
                                { name: 'id' },
                                { name: 'name' },
                                { name: 'descn' }
                            ])
                })

                Tstore.load();
                var Tcm = new Ext.grid.ColumnModel(cmItems);
                var Tgrid = new Ext.grid.GridPanel({
                    height: 400,
                    width: 300,
                    store: Tstore,
                    cm: Tcm,
                    enableDragDrop: true
                })

                gridTemp.insert(0, Tgrid);
                Tgrid.doLayout();
                gridTemp.doLayout();
            }
        })

    })
</script>
<body>
    <form id="form1" runat="server">
    <div id="tree">
    </div>
    <div id="gridTemp">
    </div>
    </form>
</body>
</html>

blago

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ext中将tree中的数据拖拽到grid中，动态生成列

今天写了好久，公司不能上网，回家后在网上查了下，效果终于出来了，特意写出来分享一下 Ext.onReady(function() { var cmItems = []; var cmConfig = {}; var cm = ne
复制链接

扫一扫