extjs字段布局问题答案

【问题标题】：problem with extjs fields layoutextjs字段布局问题
【发布时间】：2011-07-13 12:04:40
【问题描述】：

我在表单上显示字段时遇到问题

var test = Ext.create('Ext.form.Panel', {
        renderTo: 'test',
        title: '1. zzzz',
        width: 800,
        bodyPadding: 5,


        defaults: {
            anchor: '100%'
        },
        items: [
        {
            xtype: 'fieldset',
            defaults: {
                anchor: '100%'
            },
            layout: 'column',
            items: [
            {
                xtype: 'panel',
                fieldDefaults: {
                    msgTarget: 'side',
                    labelWidth: 75

                },
                columnWidth: .5,
                flex: 1,
                defaultType: 'textfield',
                defaults: {
                    anchor: '100%',
                    flex: 1
                },
                items: [
                {
                    xtype: 'numberfield',
                    hideTrigger: true,
                    fieldLabel: 'zzzz',
                    //anchor: '100%',
                    //anchor: '-5',
                    name: 'SRD_NUMBER'
                },
                {
                    fieldLabel: 'zzzz',
                    //anchor: '-5',
                    name: 'SRD_NAME_BR'
                },
                {
                    fieldLabel: 'zzzzz',
                    //anchor: '-5',
                    name: 'SRD_NAME_FL'
                },
                {
                    xtype: 'numberfield',
                    hideTrigger: true,
                    fieldLabel: 'zzzz',
                    disabled: true,
                    //anchor: '-5',
                    name: 'SRD_FOP'
                },
                {
                    fieldLabel: 'zzzz',
                    //anchor: '-5',
                    name: 'SRD_NAME_ORDER'
                },
                {
                    xtype: 'panel',
                    id: 'dep-img',
                    border: false,
                    height: 50,
                    width: 100,
                    cls: 'x-form-item',
                    html: '<img src="http://dep-image/id/10000001482" width="100" height="50" title="zzz">'
                },
                {
                    xtype: 'filefield',
                    name: 'file1',
                    msgTarget: 'side',
                    border: 3,
                    //anchor: '100%',
                    fieldLabel: 'zzzz',
                    buttonText: 'zzzzzz'
                },
                {
                    fieldLabel: 'zzz',
                    //anchor: '-5',
                    name: 'company'
                },
                {
                    fieldLabel: 'zzzz',
                    //anchor: '-5',
                    name: 'company'
                }]
            }
            ]
        } //fieldset
        ]//glob

    });

我需要将字段宽度调整为列宽。

在此页面上http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.FieldContainer 2 个示例在第二个示例中，他们设置了defaults {layout: '100%'}，看起来它不起作用。

找到了自己的救赎：通过将 layout: 'fit' 或 layout: 'anchor' 添加到 fieldset 锚点默认值：{ 布局：'适合'，弹性：1 },

谢谢大家

【问题讨论】：

标签： layout extjs4

【解决方案1】：

您必须为您的 form 设置 height 属性，如果它仍然没有显示，那么也给 fieldset 设置高度。

【讨论】：

【解决方案2】：

找到自己的救赎：通过将 layout: 'fit' 或 layout: 'anchor' 添加到 fieldset 锚点

defaults: {
   layout: 'fit',
   flex: 1
},

谢谢大家

【讨论】：

您能否扩展或提供“布局：'acnchor' to fieldset anchor”的示例？

【解决方案3】：

我会在 formPanel 上指定 layout:'fit'，因为您使用的是单个字段集。

其余的我不明白。看起来您指定了列布局，但只使用了一列。

您能否整理一下示例，我很乐意提供帮助。

【讨论】：

【解决方案4】：

快速浏览后...您是否尝试将 anchor: '0' 放在字段和容器上？

另外，你应该使用 fieldDefaults 而不是

 defaults: {
                anchor: '100%',
                flex: 1
            },

【讨论】：