Extjs中ViewPort动态更换Panel

た入场券 2022-05-21 05:51 200阅读 0赞

我们在使用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

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

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