extjs4 - 重新调整表单内容的大小以适合浏览器窗口 - 使用卡片布局

Question

我需要标签面板来适应浏览器窗口的大小。我用过card layout，它没有重新调整大小以适应浏览器窗口。我想我在我的viewPort.

launch: function() {                           
        Ext.create('Ext.container.Viewport', {    
            layout: 'card',
            items: [  
            { 
                xtype: 'panel',   
                items: { xtype: 'tabP1' } 
            },
            {
                xtype: 'panel',
                items: { xtype:'tabP2' }
            }                
            ,
            {
                xtype: 'panel',
                items: { xtype:'tabP3' }
            }           
            ]
        }); 
    },

2.) 我的一个标签面板；我正在使用absolute layout. 我正在使用这种布局，因为它很容易在我想要的地方设置表单组件。因此，我想要一个适用于相同布局的解决方案。

Ext.define('MyApp.view.MyForm', {
    extend: 'Ext.form.Panel',
     alias:'widget.tabP1',
   // height: 250,
   // width: 726,
 layout: {
    type: 'absolute'
},
    bodyPadding: 10,
    title: 'My Form',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'gridpanel',
                    title: 'My Grid Panel',
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'string',
                            text: 'String'
                        },
                        {
                            xtype: 'numbercolumn',
                            dataIndex: 'number',
                            text: 'Number'
                        },
                        {
                            xtype: 'datecolumn',
                            dataIndex: 'date',
                            text: 'Date'
                        },
                        {
                            xtype: 'booleancolumn',
                            dataIndex: 'bool',
                            text: 'Boolean'
                        }
                    ],
                    viewConfig: {

                    }
                }
            ]
        });

        me.callParent(arguments);
    }

});

更新 2

更新 2

launch: function() {                           
            Ext.create('Ext.container.Viewport', {    
                layout: 'card',
                items: [  
                { 

                     xtype: 'tabP1'  
                },
                {

                    xtype:'tabP2' 
                }                
                ,
                {

                    xtype:'tabP3' 
                }           
                ]
            }); 
        },


onSuccess: function() {  
     this.getViewport().getLayout().setActiveItem(1); 
    }, 

当我使用你的代码时，我得到一个错误，说这this.getViewport().getLayout().setActiveItem(1)不是一个函数。我想这是因为我使用了border layout. 我该如何解决这个问题？

Answer 1

您的问题是“过度嵌套”为什么要将“tabPFoo”放在没有布局的面板中？它们充其量是多余的，也会导致布局系统在不需要时花费更多的周期。

Ext.require('*');

Ext.onReady(function(){

    var vp = new Ext.container.Viewport({
        layout: 'card',
        items: [{
            xtype: 'grid',
            store: {
                fields: ['name'],
                data: [{
                    name: 'Name 1'
                }]
            },
            columns: [{
                flex: 1,
                dataIndex: 'name',
                text: 'Name'
            }],
            listeners: {
                itemclick: function(view){
                    var grid = view.ownerCt,
                        next = grid.nextSibling();

                    vp.getLayout().setActiveItem(next);
                }
            }
        }, {
            xtype: 'grid',
            store: {
                fields: ['name'],
                data: [{
                    name: 'Name 2'
                }]
            },
            columns: [{
                flex: 1,
                dataIndex: 'name',
                text: 'Name'
            }],
            listeners: {
                itemclick: function(view){
                    var grid = view.ownerCt,
                        next = grid.nextSibling();

                    vp.getLayout().setActiveItem(next);
                }
            }
        }, {
            xtype: 'grid',
            store: {
                fields: ['name'],
                data: [{
                    name: 'Name 3'
                }]
            },
            columns: [{
                flex: 1,
                dataIndex: 'name',
                text: 'Name'
            }],
            listeners: {
                itemclick: function(view){
                    var grid = view.ownerCt,
                        next = grid.previousSibling().previousSibling();

                    vp.getLayout().setActiveItem(next);
                }
            }
        }]
    });

});

显然这不是 MVC 风格，但这是布局应该采用的结构。