ext4,ext5 tree添加右键菜单

  ext4,ext5的tree对象如何添加自定义右键菜单,菜单项包含添加,删除,修改tree当前右键点击的tree节点的功能。

ext4,ext5 tree添加右键菜单

  ext4,ext5的tree对象如何添加自定义右键菜单,菜单项包含添加,删除,修改tree当前右键点击的tree节点的功能源代码如下,测试版本为:ext-4.1.1a,ext-5.1.0,基本兼容ext4+和ext5+,ext3-自己看api来修改丢应的js代码。

    <title>ext4,ext5的tree对象如何添加自定义右键菜单示例</title>
    <script>
    var store
    var selectedRow;
    var id = 999;
    var menu = Ext.create('Ext.menu.Menu', {
        floating: true,
        items: [{
            text: '新建', handler: function () {
                var text = prompt('请输入节点内容');
                if (text) {
                    selectedRow.set('leaf', false);//Ext4对叶子节点执行添加操作时,一定要先设置此节点leaf为false,要不无法添加
                    var node = store.getNodeById(selectedRow.get('id'));
                    node.appendChild({ text: text, leaf: true, id: id/*Ext4不会自动生成id,所以需要手动设置一个id,不过一般动态添加时时将数据回传服务器保存后返回唯一id*/ });
                    node.expand(true);//展开本节点
                    id++;
                }
            }
        }, {
            text: '修改', handler: function () {
                var text = prompt('请输入节点内容', selectedRow.get('text'));
                if (text) {
                    selectedRow.set('text', text);
                }
            }
        }, {
            text: '删除', handler: function () {
                if (confirm('确认删除?!')) {
                    var node = store.getNodeById(selectedRow.get('id'));
                    if (node) node.remove();
                }
            }
        }],
        renderTo: document.body
    });
    document.oncontextmenu = function () { return false }//阻止浏览器默认右键菜单
    Ext.onReady(function () {
        store = Ext.create('Ext.data.TreeStore', { root: { expanded: true }, proxy: { type: 'ajax', url: 'data.json' } });
        Ext.create('Ext.tree.Panel', {
            listeners: {
                itemcontextmenu: function (me, record, item, index, e, eOpts) {
                    selectedRow = record;
                    var xy = Ext.get(item).getXY();
                    menu.showAt(xy[0] + 100, xy[1]);
                }
            },
            store: store,
            renderTo: document.body
        });
    })
    </script>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:ext4,ext5 tree添加右键菜单

评论(0)Web开发网
阅读(430)喜欢(0)extjs开发技巧