Question

我有一个包含两行和两列的表 - 但我想以不同的方式对每一行进行排序。

第一行：(first column - width:30px, second column - width:270px)

第二行：(first column - width:130px, second column - width:170px)。

我无法将两行提取到不同的容器中。我需要换桌子。

我的代码是：

var replacePanel = new Ext.Container({
        id:'replacePanel',
        layout:'table',
        border: false,
        layoutConfig:{columns: 2},
        style: { "padding-bottom": "5px", margin: "5px 0 0 20px" ,"white-space":"normal"},
        items:[
            {
                xtype: "checkbox",
                name: 'replace_cb', id: 'replace_cb',
                width: 15, style: "margin-top:5px;",
                listeners: {
                    check: function (checkbox, checked) {
                        var settingsForm = Ext.ComponentMgr.get('settingsForm');
                        settingsForm.changedFormula = true;
                        replacePanel.findById("replace_column").setDisabled(!checked);
                    }
                }
            },
            {
                xtype: "label", width: 390,
                text: getDomElement("profileSetting.customMetrics.useNewMetric").value,
                style:'padding-left:5px; padding-right:5px; margin-top:5px'
            },
            {
                xtype: "container", width:160, style: "margin-top:4px", items: [
                {
                    xtype: "combo", width: 150,
                    name:'replace_column',
                    id:'replace_column',
                    allowBlank:false, editable: false, typeAhead: true, disabled: true,
                    triggerAction: 'all', lazyRender:true, mode: 'local',
                    store: new Ext.data.JsonStore({ id: 'storeForReplaceColumn', fields: ['id', 'displayText'] }),
                    valueField: 'id',
                    displayField: 'displayText',
                    listeners: {
                        afterrender: function(combo) {
                            if (Ext.isIE) {
                                Ext.get(combo.el.dom.parentNode).setWidth(160);
                            }
                        },
                        select : function() {
                            var settingsForm = Ext.ComponentMgr.get('settingsForm');
                            settingsForm.changedFormula = true;
                        }
                    }
                }]
            },
            {
            xtype: "container",
            html: getDomElement("profileSetting.customMetrics.whenReplacingMetrics").value
            }
        ]
    });

Answer 1

在这种情况下，表布局不是很好的选择。我会选择行的vbox布局和列的hbox布局。

伪代码：

vbox
  item 1 (hbox)
     left cell
     right cell
  item 2 (hbox)
     left cell
     right cell

Ext表格布局

1 个答案: