Question

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

＆＃13;

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'
                
            },
        });
    }
});

＆＃13;

但我无法让colspan为textarea字段工作。上面代码的输出类似于this。

任何人都可以帮助我让这个工作吗？

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

Answer 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。

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

         },
    });
}});

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

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

2 个答案: