Colspan 不合并 Extjs Table 布局中的列

Question

我正在尝试设计一种类似于 image 中所示的布局。我尝试了以下代码

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('Ext.panel.Panel', {
            xtype: 'panel',
            renderTo: Ext.getBody(),
            defaults: {
          // applied to each contained panel
           bodyStyle: 'padding:20px'
      },
            items: [{
                // This is the component A in layout image
                xtype: 'textfield',
                fieldLabel: 'Text-1'
            },{
                // This is the component B in layout image
                xtype: 'textfield',
                fieldLabel: 'Text-2'
            },{
                // This is the component C in layout image
                xtype: 'textareafield',
                fieldLabel: 'TextArea-1',
                colspan: 2
            }],
            layout: {
                type: 'table',
                columns: 2,
                align:'stretch'
                
            },
        });
    }
});

但我无法使 colspan 用于 textarea 字段。上面代码的输出类似于 this。

任何人都可以帮助我完成这项工作吗？

PS：我尝试通过创建容器 - Hbox 布局组合来模拟 table 布局。那一个有效。但我仍然需要让这个工作。

Answer 1

正如@qmat 所建议的那样，您需要为文本区域分配一个百分比宽度，以便为其提供完整的宽度。 colspan 按预期工作，但文本区域使用其标准宽度。

{
    xtype: 'textareafield',
    fieldLabel: 'TextArea-1',
    width: "100%",  // <- gives the textarea the full width
    colspan: 2
}

align:'stretch' 配置无效，它不是 table 布局的实际配置。见 ExtJs 4.2.5 docs and the working Sencha Fiddle.

Answer 2

希望这对你有用。

Ext.application({
name : 'Fiddle',

launch : function() {
    Ext.create('Ext.panel.Panel', {
        xtype: 'panel',
        renderTo: Ext.getBody(),
        items: [{
            // This is the component A in layout image
            xtype: 'textfield',
            width:250,
            emptyText :'A'
          },{
            // This is the component B in layout image
            xtype: 'textfield',
            width:250,
            emptyText :'B'
           },{
            // This is the component C in layout image
            xtype: 'textfield',
            width:500,
            colspan:2,
            emptyText :'C'
         }],
        layout: {
            type: 'table',
            columns: 2

         },
    });
}});

您可以查看下面的 link 并根据您的要求调整宽度大小。如果需要，还可以添加 css。 https://fiddle.sencha.com/#fiddle/1at3

Colspan 不合并 Extjs Table 布局中的列

Colspan not merging the columns in Extjs Table Layout

extjs

tablelayout