Colspan 没有合并 Extjs 表格布局中的列答案

【问题标题】：Colspan not merging the columns in Extjs Table LayoutColspan 没有合并 Extjs 表格布局中的列
【发布时间】：2016-05-24 17:46:22
【问题描述】：

我正在尝试设计一种类似于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 布局组合来模拟表格布局。那个有效。但我仍然需要让这个工作正常。

【问题讨论】：

您是否尝试过以百分比形式使用width（宽度：'100%'），因为我认为这里的问题是 textarea 的 colspan 为 2，但它的宽度没有适合父母，

标签： extjs tablelayout

【解决方案1】：

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

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

align:'stretch' 配置无效，它不是表格布局的实际配置。请参阅ExtJs 4.2.5 docs 和工作中的Sencha Fiddle。

【讨论】：

【解决方案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

         },
    });
}});

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

【讨论】：