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的动态切换