Question

正如你可能注意到的那样，我是极端新手;我自己设法做了一些事情，但事实是我不明白某些事情。

我左侧有这棵树，右侧有一个标签面板的内容面板。基本上我想要的是当用户点击左侧的树时，在选项卡面板上加载不同的选项（调用不同的组件）。现在，当用户单击第一个选项时，它会在内容面板上显示与该选项相关的组件。（我肯定不是展示这个的最优雅的方式，但至少现在它可以工作）但是，我的问题是，一旦加载，组件似乎没有在正确的选项卡中加载，即使我更改标签，组件保持在同一个位置。

我在论坛中阅读了一些主题后尝试使用rbac.tabs.doLayout();，但没有成功。

我真的很感谢你们给我的帮助，所以我可以指出正确的方向。

这是我的代码：

rbac.userPanel = Ext.create('role.formUserRbac');
    rbac.grid = Ext.create('role.gridUserRbac');

    rbac.tabsShowPanel = Ext.define('mainPanel',{
        extend:'Ext.panel.Panel',            
        border:'false',
        initComponent: function() {
                this.callParent();
        },
        items:[rbac.userPanel,rbac.grid]
    });

    tabsShowPanel = Ext.create('rbac.tabsShowPanel');

    function test(nameTab,des){
    rbac.addTab(true,nameTab);
    console.log(des);
        if (des=='users'){
        //console.log(rbac.tabs.addDocked(rbac.testPanel));
        rbac.tabs.addDocked(tabsShowPanel)
        }

    }

    Ext.define('treeModel', {
    extend: 'Ext.data.Model',
        fields: [
            {mapping: 'id', name: 'id', type: 'string'},
            {mapping: 'text', name: 'text', type: 'string'},
            {mapping: 'descripcion', name: 'descripcion', type: 'string'},
        ]
    })

    rbac.TreeStore = Ext.create('Ext.data.TreeStore', {
        proxy: {
            type: 'ajax',
            url: 'service.php',
            extraParams: {
                accion:'loadtree'
            },
            reader: {
                type: 'json',
                root: 'nodes',
            }
        },
        autoLoad:true,
        sorters: [{
            property: 'id',
            direction: 'ASC'
        },{
            property: 'id',
            direction: 'ASC'
        }],
        root: {
            id: 0,
            expanded: true
        },
        model:'treeModel'
    });

    rbac.treePanel = Ext.create('Ext.tree.Panel', {
        id: 'tree-panel',
        title: 'Navegaci\u00f3n',
        region:'west',
        split: true,
        height: 360,
        width: 180,
        minSize: 150,
        rootVisible: false,
        autoScroll: true,
        collapsible: true,
        collapseMode: 'mini',
        store: rbac.TreeStore 
    });

    var currentItem;

    rbac.tabs = Ext.create('Ext.tab.Panel', {
        resizeTabs: true,
        enableTabScroll: true,
        defaults: {
            autoScroll:true,
            bodyPadding: 10
        },
        items: [{
            title: 'Men\u00FA Principal',
            iconCls: 'tabs',
            closable: false
        }]  
    });

    rbac.addTab = function (closable,tabName) {
        rbac.tabs.add({
            title: tabName,
            iconCls: 'tabs',
            closable: !!closable
        }).show();
    //rbac.tabs.doLayout();  
    }        

    rbac.treePanel.getSelectionModel().on('select', function(selModel, record) {
        if (record.get('leaf')) {
            var des = record.data.descripcion;
            var nameTab = record.data.text;
            test(nameTab,des);
        }
    });

    rbac.contentPanel = {
        id: 'content-panel',
        region: 'center', 
        layout: 'card',
        margins: '2 5 5 0',
        activeItem: 0,
        border: false,
        items: [rbac.tabs],

    };

    rbac.panel = Ext.create('Ext.Viewport', {
        layout: 'border',
        title: 'Ext Layout Browser',
        items: [{
            xtype: 'box',
            id: 'header',
            region: 'north',
            html: '<img src="images/test.png"/>',
            height: 70
        },{
            layout: 'border',
            id: 'layout-browser',
            region:'center',
            border: false,
            split:true,
            margins: '2 0 5 5',
            width: 275,
            minSize: 100,
            maxSize: 500,
            items: [rbac.treePanel, rbac.contentPanel]

        }],
        renderTo: Ext.getBody()
    });

Answer 1

解决：

rbac.addTab = function (closable,tabName) {
           return rbac.tabs.add({
                title: tabName,
                iconCls: 'tabs',
                closable: !!closable
            });

        }

function test(nameTab,des){
        var newTab = rbac.addTab(true,nameTab);
        rbac.tabs.setActiveTab(newTab); 
        if (des=='users'){
                 newTab.add(tabsShowPanel)
            }        
        }

extjs4在选项卡面板中渲染组件

1 个答案: