以 extjs 5 形式更改页脚工具栏宽度答案

【问题标题】：Change footer toolbar width in extjs 5 form以 extjs 5 形式更改页脚工具栏宽度
【发布时间】：2014-07-25 12:33:38
【问题描述】：

我使用带有页脚栏的 extjs 5 创建了一个简单的表单。我想将工具栏设置为特定宽度，而表单本身应占用父容器的 100% 宽度。

这是一个带有示例表单的 jsfiddle：sampleform

我玩了一段时间，但没有得到解决方案... 有什么想法吗？

谢谢！

表格代码：

var form = Ext.create('Ext.form.Panel', {
        title : 'Test',
        renderTo : Ext.getBody(),
        defaultType : 'textfield',
        fieldDefaults : {
            labelAlign : 'left',
            labelWidth : 175,
        },
        items : [{
                fieldLabel : 'Field 1'
            }, {
                fieldLabel : 'Field 2'
            }, {
                fieldLabel : 'Field 3'
            }
        ],
        // Reset and Submit buttons
        fbar : {
            layout : {
                width : 300,
                type : 'fit'
            },
            items : [{
                    text : 'Reset'
                }
            ],
        }
    })

【问题讨论】：

标签： extjs

【解决方案1】：

在 fbar 上设置maxWidth：

Ext.require([
    'Ext.form.*']);

Ext.onReady(function () {

    var form = Ext.create('Ext.form.Panel', {
        title: 'Test',
        renderTo: Ext.getBody(),
        defaultType: 'textfield',
        fieldDefaults: {
            labelAlign: 'left',
            labelWidth: 175,
        },
        items: [{
            fieldLabel: 'Field 1'
        }, {
            fieldLabel: 'Field 2'
        }, {
            fieldLabel: 'Field 3'
        }],
        // Reset and Submit buttons
        fbar: {
            maxWidth: 300,
            items: [{
                text: 'Reset'
            }],
        }
    })
});

【讨论】：