extjs动态列数

Question

我正在寻找以Extjs形式拥有动态数量的字段列的方法。

基本上表单应该如下所示（2列）：

但是当用户缩小浏览器宽度时，它应该更改为此（1列）：

有没有办法做到这一点？

Answer 1

绝对可以这样做。你只需要使用一点CSS就能让事情发挥作用。我直接在我的表单配置中应用了我的CSS，但你可以轻松地将它放在自己的CSS文件中。

    Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        layout: 'auto',
        defaults: {
            xtype: 'textfield',
            style: {
                float: 'left',
                width: 200
            }
        },
        items: [
            { fieldLabel: 'Field 1' },
            { fieldLabel: 'Field 2' },
            { fieldLabel: 'Field 3' },
            { fieldLabel: 'Field 4' },
            { fieldLabel: 'Field 5' },
            { fieldLabel: 'Field 6' }
        ]
    });

当您将浏览器调整到两列不适合的位置时，您应该看到两列自动换行到一列。

我为您提供了一个示例：http://jsfiddle.net/Asuza/n7Zsj/

当你打开它时，你应该看到两列字段。将CSS主体宽度更改为300px并重新运行小提琴，列数现在应为1。这应该等同于您手动调整浏览器的大小。

Answer 2

您可能会尝试使用不同的布局。首先想我会尝试将表单布局设置为锚点并为所有元素指定固定宽度。

Answer 3

请使用列布局。

{
    xtype:'container'
    layout:'fit',
    items:{
        xtype:'form',
        title:'test',
        layout:'column',
        items:[...]
   }
}

文字字段未设置宽度