Ext grid向tree拖动

Robin1320

浏览: 38081 次
性别:
来自: 重庆

最近访客更多访客>>

aaa2672829611

dfs565454_4344e

一如年少

1988xuxuxu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

EXT JavaScript json CSS UI

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src=" Ext/ext.ux.tree.ArrayTree.js"></script>
<title></title>
<style type="text/css">
#grid-example {width: 100%;height: 100%;}
</style>
<script language="javascript">
var tree;
   $(document).ready(function(){
    var Tree = Ext.tree;

   tree = new Tree.TreePanel({
        el:'tree_div',
        autoScroll:true,
        animate:true,
        enableDD: true,
        border:false,
        ddGroup: "GridDD",
        containerScroll: true,
        loader: new Tree.TreeLoader({
            dataUrl : '$!{basePath}/loadView.do?viewName=report/tree.json'
        })
    });
    var root = new Tree.AsyncTreeNode({
        text: 'RDM报表分组',
        draggable:false,
        id:'source'
    });
    tree.setRootNode(root);
    tree.on('beforenodedrop',function(dropEvent){
        var node = dropEvent.target;    // 目标结点
            var data = dropEvent.data;      // 拖拽的数据
            var point = dropEvent.point;    // 拖拽到目标结点的位置
            alert("point:"+point);
            if(!data.node) {
                switch(point) {
                    case 'append':
                        // 添加时，目标结点为node，子结点设为空
                        inserTreeNode(node, null, data.selections);
                        break;
                    case 'above':
                        // 插入到node之上，目标结点为node的parentNode，子结点为node
                        inserTreeNode(node.parentNode, node, data.selections);
                        break;
                    case 'below':
                        // 插入到node之下，目标结点为node的parentNode，子结点为node的nextSibling
                        inserTreeNode(node.parentNode, node.nextSibling, data.selections);
                        break;
                }
            }

    });
    // render the tree
    tree.render();
    root.expand();
    //tree.on('contextmenu', menuShow);

    createRptList();
    //createFormList();
});
function menuShow ( node )
            {
                treeRightMenu.show(node.ui.getAnchor());
                node.select();//让右击是选中当前节点
            };

function inserTreeNode (node, refNode, selections) {

    for(var i = 0; i < selections.length; i ++) {
        var record = selections[i];
        alert(record.get('text'));
        tree.appendChild(new Tree.AsyncTreeNode({text:'dd',id:'11'}));
//         node.insertBefore(new Tree.AsyncTreeNode({
//             text: record.get('text'),
//             id: record.get('id'),
//             leaf: record.get('leaf'),
//             cls: record.get('cls')
//         }), refNode);
    }
}
function createRptList(){
// grid的数据源
var data = [
    ['VIP用户投诉', 211, true, 'file'],
    ['12', 212, true, 'file'],
    ['13', 213, true, 'file'],
    ['14', 214, true, 'file'],
    ['15', 215, true, 'file'],
    ['16', 221, true, 'file'],
    ['17', 222, true, 'file'],
    ['18', 223, true, 'file'],
    ['19', 224, true, 'file'],
    ['20', 225, true, 'file']
];

var store = new Ext.data.Store({
    reader: new Ext.data.ArrayReader({}, [
       {name: 'text'},
       {name: 'id'},
       {name: 'leaf'},
       {name: 'cls'}
    ])
});
store.loadData(data);

// 建一个grid，并设置到tgDD拖拽组中
var Grid = Ext.grid;

var model = new Grid.ColumnModel([
    {header: "text",   sortable: true, dataIndex: 'text'},
    {id:'id', header: "id",   sortable: true, dataIndex: 'id'},
    {header: "leaf",   sortable: true, dataIndex: 'leaf'},
    {header: "cls",    sortable: true, dataIndex: 'cls'}
]);

var grid = new Grid.GridPanel({
    renderTo: 'grid',
    ds: store,
    cm: model,
    sm: new Grid.RowSelectionModel(),
    autoHeight: true,
    enableDragDrop: true,
    ddGroup: "GridDD"
});

}
function createFormList(){
var msForm = new Ext.form.FormPanel({
renderTo: 'multiselect',
title:'dddddddddd',
items:[{
               xtype: 'multiselect',
               fieldLabel: 'Multiselect<br />(Required)',
               name: 'multiselect',
               width: 250,
               height: 200,
               allowBlank:false

           }]

});
}
</script>
</head>
<body>
<div id="multiselect"></div>

<table>
<tr>
<td><div id="tree_div" style="overflow:auto; height:300px;width:300px;border:1px solid #c3daf9;"></div></td>
<td><div id="grid" style="overflow:auto; height:300px;width:450px;"></div></td>
</tr>
</table>

</body>
</html>

分享到：

雷人的IT流程图 | 解决读取XML数据只有一行时报错问题；

2009-11-13 09:01
浏览 1573
评论(0)
查看更多

发表评论

文章已被作者锁定，不允许评论。

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论