extjs4.2 中Viewport动态添加或删除panel中的items

来源：互联网发布：储钱罐理财软件怎么样编辑：程序博客网时间：2024/05/03 06:55

显示的viewport

 var viewPort =  new Ext.Viewport({   id:'mainView',           layout : "border",             items : [{          xtype: 'panel',        // title: 'Bottom Inner Panel',        width: '50%',        region:'west',//指定子面板所在区域        height: document.documentElement.clientHeight,        items:[ShxpGrid]    }, {         id:'treePanel',         xtype: 'panel',        // title: 'Bottom Inner Panel',        width: '50%',        region:  'center',        height: document.documentElement.clientHeight,                      containerScroll : true,                       items: [tree],                             rootVisible: false,//是否显示根节点，                    layout:"fit"                        }          ]   });

现在我想通过一个事件将id为treePanel中的items替换掉，步骤如下：

1.添加监听事件

  listeners: {                                 select:function(rowModel,record){//获取选中行的数据                                 var obj = rowModel.getLastSelected().data;                                 var key = "SYSTEMID";                                 //alert(obj[key]);                                 Ext.getCmp('treePanel').removeAll();//删除treePanel                                 systemId = obj[key];                                 changeMenu(systemId);//通过方法进行替换                                                                                            }

2.我做的是权限树的删除替换

function changeMenu(systemId){   var newtree = Ext.create("Ext.panel.Panel", {        height : '100%',//设置高度        region : 'north',        border:false,        layout : {            type : 'accordion',            titleCollapse : false,//允许通过点击标题栏的任意位置来展开/收缩子项Panel            animate : true,// 动画切换效果            activeOnTop : false        // 折叠展开是否改变菜单顺序        },        layoutConfig : {            animate : true        },        split : true    });  Ext.Ajax.request({//向服务端发送ajax请求  url:ctx+'/right/getUserRightCheckboxList',//请求地址     waitMsg: '正在加载权限菜单. ...',     method : 'post', params : {systemid : systemId },         success : function(response) {             var json = Ext.JSON.decode(response.responseText);//获取返回的文本并解析为json格式。Ext.JSON.decode(..)：解码（解析）JSON字符串对象。             if(json.code == 'OK'){             newtree.getEl().unmask();                 Ext.each(json.data, function(el) {//迭代一个数组或是可迭代的值，在每个元素上调用给定的回调函数                  var panel = Ext.create('Ext.panel.Panel', {//创建一个Panel                                     id : el.id,//定义id                                     title : "权限配置",//定义标题                                     iconCls:el.iconCls,//定义图标                                     layout : 'fit'//定义布局。fit:当容器只包含一个子元素时, 子元素自动填满容器                     });                     panel.add(buildTree(el));//当前Panel添加由此节点的子节点所创建的树面板                     newtree.add(panel);//tree（1个Panel）添加当前Panel                 });                }else{  Ext.Msg.alert('加载失败', respText.message+"("+respText.code+")"); }        },      failure : function(request) {             tree.getEl().unmask();              Ext.MessageBox.show({                 title : '操作提示',                 msg : "连接服务器失败",                 buttons : Ext.MessageBox.OK,                 icon : Ext.MessageBox.ERROR                               });                     },              });  Ext.getCmp('treePanel').add(newtree); }

这样将newtree放到方法中，全台就不会报错了

阅读全文

0 0