extjs - 单击时在视口内显示网格 - Ext JS

Question

我想要做的是添加一个网格，它是在我的 app.js 中创建的面板的 65% 宽度

Ext.application({
    name: 'AM',
    appFolder: 'app',
    controllers: [ 'Metadata', 'Print', 'Export' ],
    launch: function() {
        var types = Ext.create('AM.store.Type');
        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            width: 1000,
            height: 600,
            title: '<center>MetaCenter</center>',
            layout: 'hbox',
            style: { marginLeft: 'auto', marginRight: 'auto' },
            items: [ 
                { xtype: 'panel', padding: 5, height: 500, width: '35%',
                    items: [ 
                                            ...

                        { xtype: 'button', text: 'Search', 
                            listeners: { 
                                click: function() {
                                    console.log('Search Button clicked');
                                    //Code to create panel view?
                            } 
                        },
                    ],

                }

我没有明确地创建一个视口，所以我不相信我可以做一个 viewport.add('grid') 函数，但我不确定。有任何想法吗？

Answer 1

您可以在创建容器时添加网格，使用hidden: true，然后在单击按钮时显示它：

{
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    items: [
        { 
            xtype: 'panel', 
            flex: 0.35,
            items: [
                ...
                { 
                    xtype: 'button', 
                    text: 'Search',
                    listeners: {
                        click: function(btn) {
                            btn.up('panel').nextSibling().show();
                        }
                    }
                }
            ]
        },
        {
            xtype: 'grid',
            flex: 0.65,
            hidden: true,
            ...
        }
    ]
}