extjs4.2 treePanel 实现动态的增、删、改

关于树是怎么生成的我就不解释了

我们主要讲的是 treePanel 实现动态的增、删、改

首先我们要有一个树

然后在树上加入监听事件：

  listeners: {      
                        	   checkchange: function(node, checked) {
                                   node.cascadeBy(function(child) {
                                       child.set('checked', checked);
                                   });
                               },
							       'itemcontextmenu':function(view,record,item,index,e,eOpts){  
					                    //禁用浏览器的右键相应事件  
					                    e.preventDefault();  
					                    e.stopEvent();  

					                    var menu = new Ext.menu.Menu({  
					                        //控制右键菜单位置  
					                        float:true,  
					                         items:[{  
					                                text:"修改",  
					                                iconCls:'leaf',  
					                                handler:function(){  
					                                   alert("点击的节点ID是："+record.raw.id+",文字是："+record.raw.text+",父id是："+record.raw.parentId);
					                                }  
					                            },{  
					                                text:"添加",  
					                                iconCls:'leaf',  
					                                handler:function(){  
					                                    this.up("menu").hide();  
					                                    alert("点击的节点ID是："+record.raw.id+",文字是："+record.raw.text+",父id是："+record.raw.parentId);

					                                }  
					                            },{  
					                                text:"删除",  
					                                iconCls:'leaf',  
					                                handler:function(){  
					                                    this.up("menu").hide();  					                                    
					                                   alert("点击的节点ID是："+record.raw.id+",文字是："+record.raw.text+",父id是："+record.raw.parentId);
					                                }  
					                            }  
					                         ]  
					                    }).showAt(e.getXY());//让右键菜单跟随鼠标位置  
					                }  
                              }

右键树出现菜单：

实现了菜单，下一步完善代码:

关于添加：

需要先创建一个from

关于from这么创建我就不多说啦，我博客里有

然后给from定义一个窗体属性

 var win = Ext.create("Ext.window.Window", {
       title: "添加权限",       //标题
       draggable: true,
       icon: '../../../Images/extjs/pencil.png',
       height: 300,                          //高度
       width: 700,                           //宽度
       layout: "fit",                        //窗口布局类型
       modal: true, //是否模态窗口，默认为false
       resizable: true,
       maximizable :true, // 显示最大化按钮在右上角
       renderTo: document.body,
       closeAction:'hide', 
       items: [form],
       animCollapse : true, 
       animateTarget : Ext.getBody(),
   });

完善添加事件代码

{  
					                                text:"添加",  
					                                iconCls:'leaf',  
					                                handler:function(){  
					                                    this.up("menu").hide();  
					                                    var addparentid = record.raw.id;
					                                    //选择节点时并将此节点的值添加到表单
					                                    form.form.findField('RIGHT_PARENT_ID').setValue(addparentid);
					                                    form.form.findField('SYSTEMID').setValue(systemId);
					                                    //alert("点击的节点ID是："+record.raw.id+",文字是："+record.raw.text+",父id是："+record.raw.parentId);
					                                    win.show(); 
					                                }  
					                            }

点击添加后显示：

关于删除权限树代码优化：

{  
  text:"删除",  
  iconCls:'leaf',  
  handler:function(){  
      this.up("menu").hide();  
      var delid = record.raw.id;
      
      Ext.Ajax.request({  
          url : ctx+'/right/deleteRight',//请求地址                      
          method : 'POST',  
          params : {  //要删除的数据向后台传值
          	RIGHT_ID : delid,SYSTEMID:systemId
          },  
          success : function(response) {          	
          	 Ext.Msg.alert("提示", "删除成功");   
              	 Ext.getCmp('treePanel').removeAll();
                 //changeMenu(systemId);//该功能用于删除后，树刷新
          	 
               },   
               failure : function(response) {   
              	  Ext.Msg.alert("提示", "方法调用失败"); 
               }   
      })
      
      //alert("点击的节点ID是："+record.raw.id+",文字是："+record.raw.text+",父id是："+record.raw.parentId);
	}  
}  

下面说一下修改，修改的时候需要赋值，

首先还要新建一个updatefrom

（特别注意：updatefrom中的数据id不可与上一个from中的数据id重复，想知道为什么，自己可以尝试一下）

然后在给updatefrom定义一个窗体属性，我这就不写了，上面有例子

关于修改代码优化：

{  
text:"修改",  
iconCls:'leaf',  
handler:function(){  
    //当点击时隐藏右键菜单  
    this.up("menu").hide();  
    var updatemyid = record.raw.id;
    var updatemytext = record.raw.text;
    var updatemyparentid = record.raw.parentId;
    var updatemyurl = record.raw.url;
    var updatemyiconCls = record.raw.iconCls;//权限主图标
    var updatemysubIcon = record.raw.subIcon;//权限子图标
    var updatemystatus = record.raw.status;
    var updatemysort = record.raw.sort;
    //选择节点时并将此节点的值添加到表单
    upadteform.form.findField('RIGHT_ID1').setValue(updatemyid);
    upadteform.form.findField('RIGHT_NAME1').setValue(updatemytext);
    upadteform.form.findField('RIGHT_PARENT_ID1').setValue(updatemyparentid);
    upadteform.form.findField('SYSTEMID1').setValue(systemId);
    upadteform.form.findField('RIGHT_MAIN_ICON1').setValue(updatemyiconCls);
    upadteform.form.findField('RIGHT_SUB_ICON1').setValue(updatemysubIcon);
    upadteform.form.findField('RIGHT_STATUS1').setValue(updatemystatus);
    upadteform.form.findField('RIGHT_SORT1').setValue(updatemysort);
    upadteform.form.findField('RIGHT_URL1').setValue(updatemyurl);
    //alert("点击的节点ID是："+record.raw.id+",文字是："+record.raw.text+",父id是："+record.raw.parentId);
    upadtewin.show(); 
	}  
}

点击修改后：

其中红色圈出标识不可编辑，在from属性中设置的

这样基本实现了 treePanel 实现动态的增、删、改