Extjs中ViewPort动态更换Panel

本文主要是介绍Extjs中ViewPort动态更换Panel，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

我们在使用extjs进行开发单页面应用时，我们构建了一个viewport有时候可能希望对viewport中的items进行动态替换，网上也有很多的资料但是都只说了个大概并没有详细说明，这里我将对遇到这种需求时如何处理进行详细介绍。
环境

extjs 4.2

首先我们来看viewport

/*** 菜单model*/
Ext.define('Menu', {extend: 'Ext.data.Model',fields: [{name: 'id',type: 'string'}, {name: 'text',type: 'string'}, {name: 'url',type: 'string'}, {name: 'leaf',type: 'boolean'}]
});Ext.onReady(function () {Ext.BLANK_IMAGE_URL = json_base.ExtBlankUrl;progress = Ext.create('Ext.Img', {src: '/img/system/loading_32x32.gif',renderTo: Ext.getBody(),floating: true}).hide();Ext.create('Ext.container.Viewport', {id: 'xnzbViewport',layout: 'border',renderTo: Ext.getBody(),items: [material_zbTree()]});
});/*** 构建指标树* @returns {Ext.tree.Panel}*/
function material_zbTree() {var url = '';return Ext.create('Ext.tree.Panel', {region: 'west',id: 'plWest',title: '指标体系',width: 300,split: true,minWidth: 200,rootVisible: true,useArrows: true,collapsible: true,store: Ext.create('Ext.data.TreeStore', {nodeParam: 'id',model: 'Menu',root: {id: '',text: '指标',url: url,leaf: false,expanded: false},proxy: {type: 'ajax',url: '/m/zb/treeNode'}}),listeners: {'itemclick': function (view, record, item, index, e) {var id = record.get('id');var text = record.get('text');var url = record.get('url');json_base.SelectedNodeId = id;json_base.url = url;material_LoadItems({id: id, text: text, url: url});},//单击节点展开之前的事件'beforeitemclick': function (view, record, item, index, e) {return;}}});
}

首先我构建了一个viewport，这个viewport的west有一个树形菜单，树形菜单是多级树形菜单，针对没级的菜单需要加载特定的panel，我们来看看两个panel

var yjxnGridStore = Ext.create('Ext.data.Store', {storeId: 'xnzb_yjxn_store_grid',autoLoad: false,model: 'yjxnModel',pageSize: 20,proxy: {type: 'ajax',url: 'm/xnzb/yjxn',reader: {type: 'json',root: 'items',totalProperty: 'totalCount'},extraParams: {},startParam: 'start',limitParam: 'limit'}
});function material_yjxnGridPanel() {var cllbStore=material_cllbStore('yjxnCllb','m/cltx/lb/all');var clzlStore=material_clzlStore('yjxnClzl','m/cltx/zl/json');var clxlStore=material_clxlStore('yjxnClxl','m/cltx/xl/json');return Ext.create('Ext.grid.Panel', {id: 'plCenter_yjxn',layout: 'fit',region: 'center',xtype: 'grid',autoScroll: true,split: true,selType: 'rowmodel',title: "条目指标数据<span id='id_selected_text'></span>",store: yjxnGridStore,columns: [{text: '操作', dataIndex: 'sLinks'},{text: '条目指标编号', dataIndex: 'code'},{text: '条目指标名称', dataIndex: 'name'}],dockedItems: [{xtype: 'toolbar',dock: 'top',items: [{xtype: 'combo',id: 'secondYjxn',fieldLabel: '条目1',labelWidth: 50,allowBlank: true,queryMode: 'local',displayField: 'name',valueField: 'code',store: cllbStore,value: '',listeners: {'change': function (obj, selectValue) {Ext.getCmp('thirdYjxn').value = '';clzlStore.proxy.url = 'm/cltx/zl/json/' + selectValue;clzlStore.reload();yjxnGridStore.proxy.extraParams = {fourthcode: selectValue};yjxnGridStore.reload();}}}, {xtype: 'combo',id: 'thirdYjxn',fieldLabel: '条目1',labelWidth: 50,allowBlank: true,queryMode: 'local',displayField: 'name',valueField: 'code',store: clzlStore,value: '',listeners: {'change': function (obj, selectValue) {Ext.getCmp('fourthYjxn').value = '';clxlStore.proxy.url = 'm/cltx/xl/json/' + selectValue;clxlStore.reload();yjxnGridStore.proxy.extraParams = {fourthcode: selectValue};yjxnGridStore.reload();}}}, {xtype: 'combo',id: 'fourthYjxn',fieldLabel: '条目',labelWidth: 50,allowBlank: true,queryMode: 'local',displayField: 'name',valueField: 'code',store: clxlStore,value: '',listeners: {'change': function (obj, selectValue) {yjxnGridStore.proxy.extraParams = {fourthcode: selectValue};yjxnGridStore.reload();}}}, {text: '添加条目',handler: function () {material_Yjxn_Add();}}]}, {xtype: 'pagingtoolbar',id: 'xnzb_yjxn_grid_pagingtoolbar',store: Ext.getStore('xnzb_yjxn_store_grid'),dock: 'bottom',displayInfo: true}]});
}

推荐所有的panel的构建都通过function来进行，这里基础的环境就有了，下面我们就来看看如何动态的切换panel

function material_LoadItems(j) {var gridPanel;if (j.id == 'firstXingneng') {gridPanel = material_yjxnGridPanel();}if (j.id == 'secondXingneng') {gridPanel = material_ejxnGridPanel();}if (j.id == 'thirdXingneng') {gridPanel = material_sjxnGridPanel();}var viewPort = Ext.getCmp('xnzbViewport');viewPort.items.each(function (item) {if (item.getId() == 'plCenter_yjxn' || item.getId() == 'plCenter_ejxn'|| item.getId() == 'plCenter_sjxn' || item.getId() == 'plCenter_khtm'|| item.getId() == 'plCenter_tzxn') {viewPort.remove(item, false);item.hide();}});//viewPort.remove(viewPort.items[2],false);gridPanel.getStore().reload();gridPanel.show();viewPort.add(gridPanel);viewPort.doLayout();
}

viewport通过调用material_LoadItems方法来动态加载panel，并实现动态切换
具体的思路就是
1、获取到viewport
2、遍历viewport的items移除当前的panel，记住这里采用的是viewPort.remove(item, false);其中false表示的是只是从viewport移除这个panel但是并没有销毁这个panel，同时要注意一个方法item.hide();就是移除的这个panel需要隐藏，不然会跟新添加的panel重叠导致问题出现（我就是遇到这个问题，花了很长时间才找到这个问题）
3、移除完了panel后再添加自己想要添加的panel，同时需要调用viewport的doLayout方法显示新添加的panel
这样就完成了viewport的panel的动态切换

这篇关于Extjs中ViewPort动态更换Panel的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---