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,
            ...
        }
    ]
}

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

1 个答案: