四时宝库

我们在使用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的动态切换