标签/ Vbox布局

Question

我有一个应用程序，它使用选项卡布局，并在绑定到每个选项卡的每个表单面板之间共享相同的网格面板作为xtype小部件。

我的主选项卡布局如下：

Ext.define('cardioCatalogQT.view.main.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main-view',
    controller: 'main-view',
    requires: [
        'cardioCatalogQT.view.main.MainController',
        'cardioCatalogQT.view.main.MainModel',
        'Ext.ux.form.ItemSelector',
        'Ext.tip.QuickTipManager',
        'Ext.layout.container.Card'
    ],

    style: 'background-color:#dfe8f5;',
    width: '100%',
    height: 400,

    layout: 'vbox',
    defaults: {
        bodyPadding: 5
    },
    items: [{
            title:'Main',
            region: 'south',
            xtype: 'form',
            itemId: 'Ajax',
            flex: 1,
            styleHtmlContent: true,
            items:[{
                xtype: 'image',
                src: 'resources/images/R3D3.png',
                height: 50,
                width: 280
            },{
                title: 'Ad Hoc Sandbox for Cohort Discovery'
            }] ,
            lbar:[{
                text: 'Initiate advanced request',
                xtype: 'button',

                handler: function(button){
                    var url = 'https://url_here';
                    //cardioCatalogQT.service.UtilityService.http_auth(button);
                    window.open(url);
                }
            }]
        },
        /*{
            xtype: 'resultsGrid'
            //disabled: true
        },*/
        /*{
            xtype: 'searchGrid'
            //disabled: true
        },*/
        {
            xtype: 'demographicGrid'
            //disabled: true
        },
        {
            xtype: 'vitalGrid'
            //disabled: true
        },
        {
            xtype: 'labGrid'
            //disabled: true
        },
        {
            xtype: 'diagnosisGrid'
            //disabled: true

        },
        {
            xtype: 'medicationGrid'
            //disabled: true
        },
        {
            xtype: 'procedureGrid'
            //disabled: true
        },
        {
            xtype: 'queryGrid'
            //disabled: true
        }
    ]
}); 

共享相同网格小部件的各个选项卡（具体来说，demographicGrid，vitalGrid，labGrid，diagnosticGrid，procedureGrid和药网格，在主视图中均由xtype引用）：

/**
 * Widget with template to render to Main view
 */

Ext.define('cardioCatalogQT.view.grid.DemographicGrid', {
    extend: 'Ext.form.Panel',
    alias: 'widget.demographicGrid',
    itemId: 'demographicGrid',
    store: 'Payload',

    requires: [
        'cardioCatalogQT.view.main.MainController'
    ],


    config: {
        variableHeights: false,
        title: 'Demographics',
        xtype: 'form',
        width: 200,
        bodyPadding: 10,
        defaults: {
            anchor: '100%',
            labelWidth: 100
        },


        // inline buttons
        dockedItems: [ {
            xtype: 'toolbar',
            height: 100,
            items: [{
                xtype: 'button',
                text: 'Constrain sex',
                itemId: 'showSex',
                hidden: false,
                listeners: {
                    click: function (button) {
                        button.up('grid').down('#sexValue').show();
                        button.up('grid').down('#hideSex').show();
                        button.up('grid').down('#showSex').hide();
                    }
                }
            }, {
                xtype: 'button',
                text: 'Hide sex constraint',
                itemId: 'hideSex',
                hidden: true,
                listeners: {
                    click: function (button) {
                        button.up('grid').down('#sexValue').hide();
                        button.up('grid').down('#sexValue').setValue('');
                        button.up('grid').down('#hideSex').hide();
                        button.up('grid').down('#showSex').show();
                    }
                }
            },{ // Sex
                xtype: 'combo',
                itemId: 'sexValue',
                queryMode: 'local',
                editable: false,
                value: 'eq',
                triggerAction: 'all',
                forceSelection: true,
                fieldLabel: 'Select sex',
                displayField: 'name',
                valueField: 'value',
                hidden: true,
                store: {
                    fields: ['name', 'value'],
                    data: [
                        {name: 'female', value: 'f'},
                        {name: 'male', value: 'm'}
                    ]
                }
            }, {
                xtype: 'button',
                text: 'Constrain age',
                itemId: 'showAge',
                hidden: false,
                listeners: {
                    click: function (button) {
                        button.up('grid').down('#ageComparator').show();
                        button.up('grid').down('#ageValue').show();
                        button.up('grid').down('#hideAge').show();
                        button.up('grid').down('#showAge').hide();
                    }
                }
            }, {
                xtype: 'button',
                text: 'Hide age',
                itemId: 'hideAge',
                hidden: true,
                listeners: {
                    click: function (button) {
                        button.up('grid').down('#ageComparator').hide();
                        button.up('grid').down('#ageValue').hide();
                        button.up('grid').down('#upperAgeValue').hide();
                        button.up('grid').down('#ageComparator').setValue('');
                        button.up('grid').down('#ageValue').setValue('');
                        button.up('grid').down('#upperAgeValue').setValue('');
                        button.up('grid').down('#hideAge').hide();
                        button.up('grid').down('#showAge').show();
                    }
                }
            }, { // Age
                xtype: 'combo',
                itemId: 'ageComparator',
                queryMode: 'local',
                editable: false,
                value: '',
                triggerAction: 'all',
                forceSelection: true,
                fieldLabel: 'Select age that is',
                displayField: 'name',
                valueField: 'value',
                hidden: true,
                store: {
                    fields: ['name', 'value'],
                    data: [
                        {name: '=', value: 'eq'},
                        {name: '<', value: 'lt'},
                        {name: '<=', value: 'le'},
                        {name: '>', value: 'gt'},
                        {name: '>=', value: 'ge'},
                        {name: 'between', value: 'bt'}
                    ]
                },

                listeners: {
                    change: function(combo, value) {
                        // use component query to  toggle the hidden state of upper value
                        if (value === 'bt') {
                            combo.up('grid').down('#upperAgeValue').show();
                        } else {
                            combo.up('grid').down('#upperAgeValue').hide();
                        }
                    }
                }
            },{
                xtype: 'numberfield',
                itemId: 'ageValue',
                fieldLabel: 'value of',
                value: '',
                hidden: true
            },{
                xtype: 'numberfield',
                itemId: 'upperAgeValue',
                fieldLabel: 'and',
                hidden: true
            },{
                xtype: 'button',
                text: 'Constrain race/ethnicity',
                itemId: 'showRace',
                hidden: false,
                listeners: {
                    click: function (button) {
                        button.up('grid').down('#raceValue').show();
                        button.up('grid').down('#hideRace').show();
                        button.up('grid').down('#showRace').hide();
                    }
                }
            }, {
                xtype: 'button',
                text: 'Hide race/ethnicity constraint',
                itemId: 'hideRace',
                hidden: true,
                listeners: {
                    click: function (button) {
                        button.up('grid').down('#raceValue').hide();
                        button.up('grid').down('#raceValue').setValue('');
                        button.up('grid').down('#hideRace').hide();
                        button.up('grid').down('#showRace').show();
                    }
                }
            },{ // Race
                xtype: 'combo',
                itemId: 'raceValue',
                queryMode: 'local',
                editable: false,
                value: 'eq',
                triggerAction: 'all',
                forceSelection: true,
                fieldLabel: 'Select race',
                displayField: 'name',
                valueField: 'value',
                hidden: true,
                store: {
                    fields: ['name', 'value'],
                    data: [
                        {name: 'female', value: 'f'},
                        {name: 'male', value: 'm'}
                    ]
                }
            },{
                //minWidth: 80,
                text: 'Add to search',
                xtype: 'button',
                itemId: 'searchClick',
                handler: 'onSubmitDemographics'
            }]
        },
            {
                xtype:'searchGrid'
            }
        ]

    }


});

选项卡中每个表单面板之间的唯一区别是项目组件。 这些表单面板中的每一个都引用xtype的'searchGrid'并将其呈现为如所附图像所示：

问题是我有这个网格的6个实例。 这在大多数情况下都有效，但是它引起了一些问题，这些问题与控制网格中的复选框以及一些奇怪的网格存储负载行为有关，老实说，使用此反模式跟踪组件是PITA。

我想以某种方式在下部垂直面板中有我的searchGrid的单个实例，而上部垂直面板具有我需要根据每个选项卡的要求更改的项目组件。 项目控件如何变化的一个示例是

我期望的行为是，当我单击选项卡时，上部项目的组件会将我带到其他表单面板，而下部面板则固定在搜索网格上。

但是，我目前将searchGrid绑定到每个选项卡的表单面板上，因为这是使它起作用的唯一方法。

searchGrid网格面板如下所示：

Ext.define('cardioCatalogQT.view.grid.Search', {
    extend: 'Ext.grid.Panel',

    xtype: 'framing-buttons',
    store: 'Payload',
    itemId: 'searchGrid',

    requires: [
        'cardioCatalogQT.view.main.MainController'
    ],

    columns: [
        {text: "ID", width: 50, sortable: true, dataIndex: 'id'},
        {text: "Type", width: 120, sortable: true, dataIndex: 'type'},
        {text: "Key", flex: 1, sortable: true, dataIndex: 'key'},
        {text: "Criteria", flex: 1, sortable: true, dataIndex: 'criteria'},
        {text: "DateOperator", flex: 1, sortable: true, dataIndex: 'dateComparatorSymbol'},
        {text: "When", flex: 1, sortable: true, dataIndex: 'dateValue'},
        {text: "Count", flex: 1, sortable: true, dataIndex: 'n'}
    ],
    columnLines: true,
    selModel: {
        type: 'checkboxmodel',
        listeners: {
            selectionchange: 'onSelectionChange'
        }
    },

    // When true, this view acts as the default listener scope for listeners declared within it.
    // For example the selectionModel's selectionchange listener resolves to this.
    defaultListenerScope: false,

    // This view acts as a reference holder for all components below it which have a reference config
    // For example the onSelectionChange listener accesses a button using its reference
    //referenceHolder: true,

    // inline buttons
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        ui: 'footer',
        layout: {
            pack: 'center'
        }
    }, {
        xtype: 'toolbar',
        items: [{
            //reference: 'andButton',
            text: 'AND',
            itemId: 'andButton',
            tooltip: 'Add the selected criteria as AND',
            iconCls: 'and',
            disabled: true,
            handler: 'onCriterionAnd'
        },'-',{
            //reference: 'orButton',
            text: 'OR',
            itemId: 'orButton',
            tooltip: 'Add the selected criteria as OR',
            iconCls: 'or',
            disabled: true,
            handler: 'onCriterionOr'
        },'-',{
            //reference: 'notButton',
            text: 'NOT',
            itemId: 'notButton',
            tooltip: 'Add the selected criteria as NOT',
            iconCls: 'not',
            disabled: true,
            handler: 'onCriterionNot'
        },'-',{
            //reference: 'removeButton',  // The referenceHolder can access this button by this name
            text: 'Remove',
            itemId: 'removeButton',
            tooltip: 'Remove the selected item',
            iconCls: 'remove',
            disabled: true,
            handler: 'onCriterionRemove'
        },'-', { // SaveQuery
            //reference: 'SaveQuery',
            text: 'Save',
            itemId: 'saveQuery',
            tooltip: 'save the current filter',
            iconCls: 'save',
            disabled: true,
            handler: 'onFilterSave'
        }]
    }],

    height: 1000,
    frame: true,
    iconCls: 'icon-grid',
    alias: 'widget.searchGrid',
    title: 'Search',

    initComponent: function() {
        this.width = 750;
        this.callParent();
    }
});

我弄乱了使用Vbox布局来获得想要的行为，但还是失败了。 看起来这种情况并不罕见，根据Tab的单击，将上层Vbox面板更改为不同的表单面板，而下层Vbox面板保持固定。 任何见解将是最欢迎的。

Answer 1

如果我正确理解，我的这个小型测试应该使用具有north和center区域的边框布局，完全满足您的要求。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="ext-theme-gray.css">
    <title>Test app</title>
    <script type="text/javascript" src="ext-all-dev.js"></script>
    <script>
    Ext.onReady(function() {
        var Viewport = Ext.create('Ext.container.Viewport',{
            layout:'border',
            items:[{
                xtype:'tabpanel',
                region:'north',
                items:[{
                    xtype:'panel',
                    title:'A',
                    items:[{xtype:'button',text:'Clickme'}]
                },{
                    xtype:'panel',
                    title:'B',
                    items:[{xtype:'textfield'}]
                }]
            },{
                xtype:'gridpanel',
                title:'center',
                region:'center',
                columns:[{
                    dataIndex:'A',
                    text:'A'
                },{
                    dataIndex:'B',
                    text:'B'
                }]
            }]
        })
        Ext.create('Ext.app.Application',{
            name:'TestApp',
            autoCreateViewport: true,
            views:[
                Viewport
            ]
        });
    });
    </script>
</head>
<body>
</body>
</html>

PS：我使用的是ExtJS 4.2.2，但它也应该可以在其他Ext版本中使用。