extjs中treepanel的右键新建，编辑，删除操作

为什么80%的码农都做不了架构师？>>>   

我们要的效果是这样的：

一：这个treePanel的js如下：

 

var orgPanel,appContextmenu,orgTreePanel= new Ext.ux.tree.TreeGrid({
            id:'orgTree',
            enableDD: true,
            region : 'center',
            enableSort:false,
            border:false,
            width:200,
            region:"west",
            margins:'0 4 0 0',
            title:'组织架构设置',
            useArrows: true,
            animate: true,
            columns:[{
                header:'组织',
                dataIndex: 'text',
                sortable:false,
                width: 180
            }],
            dataUrl : 'system/organization/resourceTree.json?type=1',
            root: new Ext.tree.AsyncTreeNode({
                id:'0',
                expanded:true
            }),
            tbar :[{
                iconCls : 'refreshItem',
                text : '刷新',
                handler : function() {
                    orgTreePanel.loader.dataUrl = 'system/organization/resourceTree.json?type=1';
                    orgTreePanel.root.reload();
                    orgTreePanel.root.expand(true);
                }
            }, {
                text : '展开',
                tooltip : '展开',
                iconCls : 'addItem',
                handler : function(){
                    orgTreePanel.root.expand(true);
                }
            }, {
                text : '收起',
                tooltip : '收起',
                iconCls : 'updateItem',
                handler : function(){
                    orgTreePanel.collapseAll()
                }
            }],
            contextMenu: new Ext.menu.Menu({
                items: [{
                    iconCls: 'add',
                    text: '新建组织'
                }, {
                    iconCls: 'edit',
                    text: '编辑组织'
                }, {
                    iconCls: 'delete',
                    text: '删除组织'
                }],
                listeners: {
                    itemclick: function(item){
                        var nodeDataDel = item.parentMenu.contextNode.attributes;
                        var parentNodeData = item.parentMenu.contextNode.parentNode;
                        //var nodeData = orgPanel.getSelectionModel().getSelectedNode();
                        switch (item.iconCls) {
                            case 'add':
                                createOrganizationFun(parentNodeData);
                                break;
                            case 'edit':
                                updateOrganizationFun(nodeDataDel,parentNodeData);
                                break;
                            case 'delete':
                                deleteOrganizationFun(nodeDataDel.id,nodeDataDel.children.length==0?true:false);
                                break;
                        }
                        item.parentMenu.hide();
                    }
                }
            }),
            listeners: {
                afterrender: function(t) {
                    treeMask=new Ext.LoadMask(t.getEl(), {msg:"数据加载中..."})
                    orgTreePanel.root.expand(true);
                    orgPanel = t;
                },
                contextmenu: function(node, e){
                    appContextmenu = false;
                    node.select();
                    var tree = node.getOwnerTree();
                    var c = tree.contextMenu;
                    c.contextNode = node;
                    c.showAt(e.getXY());
                }

            }
        });

二：我们用contextMenu去定义treepanel的右键的内容，用item去定义新建，编辑，删除方法，listeners去监听树的节点，去调用对应的方法：

 

三：这里只说明一下编辑的方法举例：

我们看到在treepanel的listener监听中，

  var nodeDataDel = item.parentMenu.contextNode.attributes;
     var parentNodeData = item.parentMenu.contextNode.parentNode;

这两个变量分别得到的对应节点的id和父节点的 id,接着把参数传进方法

  case 'edit':
   updateOrganizationFun(nodeDataDel,parentNodeData);中

四：对应updateOrganizationFun的window打开窗口的表单：

//编辑组织的方法
        var updateOrganizationWin,updateOrganizationFun = function (data,pData) {
            updateOrganizationWin = new Ext.Window({
                title:"编辑组织",
                width:580,
                buttonAlign:'center',
                modal:true,
                items:[
                    {
                        xtype:'form',
                        plain:true,
                        url:'system/organization/updateOrganization.json',
                        labelWidth:80,
                        baseCls:"x-plain",
                        bodyStyle:"padding:8px",
                        defaultType:"textfield",
                        labelAlign:'right',
                        defaults:{
                            anchor:'60%'
                        },
                        items:[
                            {
                                fieldLabel:'组织名称',
                                name:'name',
                                allowBlank:false,
                                value:data.text
                            },{
                                xtype:'textarea',
                                fieldLabel:'组织描述',
                                name:'desc',
                                allowBlank:false,
                                value:data.desc
                            },{
                                fieldLabel:'上级组织',
                                readOnly:true,
                                value:pData.text
                            },{
                                xtype:'combo',
                                id:'typeCombo',
                                fieldLabel:'类型',
                                typeAhead:true,
                                triggerAction:'all',
                                hiddenName:'type',
                                lazyRender:true,
                                allowBlank:false,
                                editable:false,
                                mode:'local',
                                store:[
                                    [ 0, '公司' ],
                                    [1, '部门'],
                                    [2, '其他组织']
                                ]
                            },{
                                name:"sort",
                                fieldLabel:'序号',
                                regex: /^[0-9]*$/ ,
                                maxLength:3,
                                allowBlank:false,
                                value:data.sort
                            },{
                                hidden: true,
                                name:'pid',
                                value:pData.id
                            },{
                                hidden: true,
                                name:'id',
                                value:data.id
                            }
                        ]}
                ],
                buttons:[
                    {
                        text:'确定',
                        handler:function () {
                            var fromPanel = updateOrganizationWin.get(0);
                            if (!fromPanel.getForm().isValid()) {
                                Ext.Msg.alert("提示", "请按相关提示正确填写");
                                return;
                            }
                            fromPanel.form.submit({
                                waitMsg:'正在处理中...',
                                failure:function (form, action) {
                                    Ext.Msg.alert('错误消息', "修改失败,请联系技术人员!");
                                },
                                success:function (form, action) {
                                    var JSON = Ext.decode(action.response.responseText);
                                    if (JSON.code == 1) {
                                        Ext.MessageBox.alert('消息提示', "组织名已存在！");
                                    } else {
                                        Ext.MessageBox.alert('消息提示', '添加成功!');
                                        orgTreePanel.root.reload();
                                        orgTreePanel.root.expand(true);
                                        updateOrganizationWin.destroy();
                                    }
                                }
                            });
                        }
                    },
                    {
                        text:'取消',
                        handler:function () {
                            updateOrganizationWin.destroy();
                        }
                    }
                ]
            });
            updateOrganizationWin.show();
            //赋值控件显示值
            Ext.getCmp("typeCombo").setValue(1);
        }

其中通过：function (data,pData)把参数传到这个window 组件了，该范围都能用到这两个变量了。

这样就把treePanel的节点的右键的方法说明了。

后续有很多开发填坑的文章发布，如果对你有帮助，请支持和加关注一下

http://e22a.com/h.05ApkG?cv=AAKHZXVo&sm=339944

https://shop119727980.taobao.com/?spm=0.0.0.0 

转载于:https://my.oschina.net/baishi/blog/110266