2

我正在寻找在 Extjs 表单中具有动态数量的字段列的方法。

基本上形式应该是这样的（2列）： 在此处输入图像描述

但是当用户缩小浏览器宽度时，它应该变成这个（1列）： 在此处输入图像描述

有没有办法做到这一点？

4

3 回答 3

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 并重新运行 fiddle，列数现在应该是 1。这应该等同于您手动调整浏览器的大小。

于 2013-09-18T14:39:21.810 回答
0

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

于 2013-07-09T16:33:53.513 回答
0

请使用列布局。

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

对于文本字段不设置宽度

于 2017-02-23T16:19:20.243 回答