extJs 列布局问题

Posted 2023-02-26

【中文标题】extJs 列布局问题

【英文标题】：extJs column layout issue

【发布时间】：2012-03-20 12:36:27

【问题描述】：

我有 3 个 extJs 窗口。每个都有一些表单控件，然后是两个显示图表的选项卡。目前所有窗口都出现在同一个地方，我必须拖动它们才能让它们像这样排成一排 | | | .如何在屏幕上创建 3 列并将每个窗口放在其中之一中。请在下面找到其中一个窗口的代码。是的，我看过这个链接 http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout/table.html 但这对我的事业没有帮助。如果我像链接中提到的那样创建 3 列布局，则不会显示任何内容。请假设所有窗口都具有相同的代码并建议一种方法。还有一件事，我在所有窗口中都有可关闭和最大化的功能。谢谢。

var win = Ext.create('Ext.Window', 
    id: 'r1',
    width: eachWindowWidth,
    height: eachWindowHeight,
    hidden: false,
    maximizable: true,
    title: 'Registered Hosts',
    renderTo: Ext.getBody(),
    tbar: [
        xtype: 'combo',
        width: 50,
        store: optionRegistered,
        mode: 'local',
        fieldLabel: '',
        name: 'answer',
        anchor: '90%',
        displayField: 'answer',
        valueField: 'id'
    , 
        xtype: 'datefield',
        width: 90,
        name: 'time',
        fieldLabel: '',
        anchor: '90%'
    , 
        xtype: "label",
        width: 20,
        fieldLabel: text,
        name: 'txt',
        text: 'to'
    , 
        xtype: 'combo',
        id: 'c22devices',
        width: 50,
        store: optionRegistered,
        mode: 'local',
        fieldLabel: '',
        name: 'answer',
        anchor: '90%',
        displayField: 'answer',
        valueField: 'id'
    , 
        xtype: 'datefield',
        id: 'cl22devices',
        width: 90,
        name: 'time',
        fieldLabel: '',
        anchor: '90%'
    , 
        xtype: 'button',
        text: 'Ok'
    ],
    items: [

    
        xtype: "label",
        fieldLabel: text,
        name: 'txt',
        text: text
    , 
        xtype: 'tabpanel',
        id: "tabs1",
        activeTab: 0,
        width: eachTabWidth,
        height: eachTabHeight,
        plain: true,
        defaults: 
            autoScroll: true,
            bodyPadding: 10
        ,
        items: [
            title: 'Normal Tab',
            items: [
                id: 'chartCmp1',
                xtype: 'chart',
                height: 300,
                width: 300,
                style: 'background:#fff',
                animate: true,
                shadow: true,
                store: storeRouge,
                axes: [
                    type: 'Numeric',
                    position: 'left',
                    fields: ['total'],
                    label: 
                        renderer: Ext.util.Format.numberRenderer('0,0')
                    ,
                    grid: true,
                    minimum: 0
                , 
                    type: 'Category',
                    position: 'bottom',
                    grid: true,
                    fields: ['date'],
                ],
                series: [
                    type: 'column',
                    axis: 'left',
                    highlight: true,
                    tips: 
                        trackMouse: true,
                        width: 140,
                        height: 28,
                        renderer: function (storeItem, item) 
                            this.setTitle(storeItem.get('date') + ': ' + storeItem.get('total') + ' $');
                        
                    ,
                    label: 
                        display: 'insideEnd',
                        'text-anchor': 'middle',
                        field: 'total',
                        renderer: Ext.util.Format.numberRenderer('0'),
                        orientation: 'vertical',
                        color: '#333'
                    ,
                    xField: 'date',
                    yField: 'total'
                ]
            ]
        , 
            title: 'Table View',
            xtype: 'grid',
            id: "gridChart1",
            width: 200,
            height: 200,
            collapsible: false,
            store: storeRouge,
            multiSelect: true,
            viewConfig: 
                emptyText: 'No information to display'
            ,
            columns: [
                text: 'Devices',
                flex: 50,
                dataIndex: 'date'
            , 
                text: 'Pass',
                flex: 50,
                dataIndex: 'total'
            ]
        ]
    ],
    listeners: 

        resize: function () 
            Ext.getCmp("tabs1").setWidth(this.width);
            Ext.getCmp("tabs1").setHeight(this.height);
            Ext.getCmp("chartCmp1").setWidth(this.width * 100 / 100);
            Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
            Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
            Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
        
    
);

【问题讨论】：

如何组合您的窗口？你把它们放在某种容器里吗？

我试过这样dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout/table.html

但该示例布局面板而不是窗口。你正在尝试布局窗口。这就是为什么我要问你把窗户放在哪里？我认为您不能使用窗口代替面板。

【参考方案1】：

问题是，Ext.Window 虽然是 Ext.Panel 的后代，但并不像普通的 Ext.Panels 那样遵守布局规则，它自己浮动并且仅受它们的 DOM 元素的限制'被渲染到（默认为body）。

这意味着您必须跳一些循环来手动定位和布局窗口。您还可以尝试从 Ext.WindowGroup 创建一些后代类来帮助您管理窗口并保持它们整洁。