ExtJs Form Items定位inline和under，复杂

Question

我使用 ExtJs 4 创建了一个表单

xtype: 'prg-formPanel',
             id: 'blog-edit-form', // id fixed : id: 'upload-form-'+this.filetype,
             url: baseUrl + "crud",
             border: 0,
             bodyStyle: {
                 padding: '10px 20px'
             },                    
             height: 600,
             defaultType: 'textfield',
             defaults: {
                 anchor: '95%',
                 allowBlank: true,
                 msgTarget: 'side',
                 labelWidth: 60
             },
             layout: {
                type: 'table',
                columns: 2
             },
             items: [{
                    inputType: 'hidden',
                    id: 'actionType',
                    name: 'actionType',
                    value: this.actionType,
                    scope: this
                },{
                     inputType: 'hidden',
                     id: 'id',
                     name: 'id',
                     value: (Ext.isEmpty(this.record)?null:this.record.get('id'))
                },{
                     inputType: 'textfield',
                     id: 'title',
                     fieldLabel: 'Başlık',
                     name: 'title',
                     labelWidth: 60,
                     value: (Ext.isEmpty(this.record)?null:this.record.get('title')),
                     colspan:2
                },{
                     inputType: 'textfield',
                     id: 'name',
                     fieldLabel: 'İsim',
                     name: 'name',
                     labelWidth: 60,
                     value: (Ext.isEmpty(this.record)?null:this.record.get('name')),
                     colspan:2
                },
                new Prg.checkBox({
                    fieldLabel: 'Aktif mi?',
                    name: 'activeFlag',
                    labelWidth: 60,
                    checked: (Ext.isEmpty(this.record)?false:this.record.get('activeFlag'))
                }),
                new Prg.idCombo({
                    fieldLabel : 'Dil',
                    labelWidth: 60,
                    emptyText : 'Dili seçiniz...',
                    id: 'langId',
                    name : 'langId',
                    store : this.ds_language,
                    scope: this
                }),{
                     inputType: 'textfield',
                     id: 'targetURL',
                     fieldLabel: 'Link',
                     name: 'targetURL',
                     labelWidth: 60,
                     value: (Ext.isEmpty(this.record)?null:this.record.get('targetURL')),
                     colspan:2
                },{
                    xtype: "TinyMCEEditor",
                    fieldLabel: "İçerik",
                    width: 800,
                    height: 400,
                    colspan:2,
                    name: "contentHTML",
                    id: "contentHTML",
                    tinyMCESettings: {
                        mode: "exact",
                        theme: "advanced",
                        skin: "o2k7",
                        // Tiny Settings Here
                            //...
                    value: (Ext.isEmpty(this.record)?"":this.record.get('contentHTML'))
                },
                new Ext.form.field.ComboBox({
                    id: "categories",
                    name: "categories",
                    fieldLabel: 'Kategori',
                    multiSelect: true,
                    displayField: 'name',
                    forceSelection: true,
                    labelWidth: 60,
                    store: this.ds_tags,
                    queryMode: 'remote',
                    scope: this,
                    colspan:2
                })
                ] // Form items closure
        }];
        this.buttons = [new Prg.btn({
            text: btnUploadMsg,
            handler: this.onSave,
            scope: this
        }),new Prg.btn({
            text: btnCancelMsg,
            handler: function() {
                this.hide();
            },
            scope: this
        })];
        this.callParent(arguments);
        this.form = this.getComponent('blog-edit-form').getForm(); // 'upload-form-'+this.filetype
    }

如您所见，我使用了表格布局，一些表单项应该是内联的，其他的应该在新行中。我已经通过表格完成了，但是，现在项目宽度是固定的...... 我还想给他们 95% 的价值，让他们在调整窗口大小时自动调整大小。我找不到路。尝试添加anchor 和width: '90%' 但不起作用。

Answer 1

使用表单的默认布局：form 并使用FieldContainer http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.FieldContainer，您需要在同一行显示两个字段。

通过这种方式，您可以利用 anchor 并仍然创建您想要的复杂布局。

这个应该工作（因为自定义类型我无法测试它）

Ext.define('Prg.FormPanel', {
initComponent: function() {
    Ext.applyIf(this, {
        xtype: 'prg-formPanel',
        id: 'blog-edit-form',
        // id fixed : id: 'upload-form-'+this.filetype,
        url: baseUrl + "crud",
        border: 0,
        bodyStyle: {
            padding: '10px 20px'
        },
        height: 600,
        defaultType: 'textfield',
        defaults: {
            anchor: '95%',
            allowBlank: true,
            msgTarget: 'side',
            labelWidth: 60
        },
        layout: {
            type: 'form'
        },
        items: [{
            inputType: 'hidden',
            id: 'actionType',
            name: 'actionType',
            value: this.actionType,
            scope: this
        }, {
            inputType: 'hidden',
            id: 'id',
            name: 'id',
            value: (Ext.isEmpty(this.record) ? null : this.record.get('id'))
        }, {
            inputType: 'textfield',
            id: 'title',
            fieldLabel: 'Başlık',
            name: 'title',
            labelWidth: 60,
            value: (Ext.isEmpty(this.record) ? null : this.record.get('title'))
        }, {
            inputType: 'textfield',
            id: 'name',
            fieldLabel: 'İsim',
            name: 'name',
            labelWidth: 60,
            value: (Ext.isEmpty(this.record) ? null : this.record.get('name'))
        }, {
            xtype: 'fieldcontainer',
            layout: 'hbox',
            items: [
            new Prg.checkBox({
                fieldLabel: 'Aktif mi?',
                name: 'activeFlag',
                labelWidth: 60,
                checked: (Ext.isEmpty(this.record) ? false : this.record.get('activeFlag'))
            }), new Prg.idCombo({
                fieldLabel: 'Dil',
                labelWidth: 60,
                emptyText: 'Dili seçiniz...',
                id: 'langId',
                name: 'langId',
                store: this.ds_language,
                scope: this
            })]
        }, {
            inputType: 'textfield',
            id: 'targetURL',
            fieldLabel: 'Link',
            name: 'targetURL',
            labelWidth: 60,
            value: (Ext.isEmpty(this.record) ? null : this.record.get('targetURL'))
        }, {
            xtype: "TinyMCEEditor",
            fieldLabel: "İçerik",
            width: 800,
            height: 400
            name: "contentHTML",
            id: "contentHTML",
            tinyMCESettings: {
                mode: "exact",
                theme: "advanced",
                skin: "o2k7",
                // Tiny Settings Here
                //...
                value: (Ext.isEmpty(this.record) ? "" : this.record.get('contentHTML'))
            },
            new Ext.form.field.ComboBox({
                id: "categories",
                name: "categories",
                fieldLabel: 'Kategori',
                multiSelect: true,
                displayField: 'name',
                forceSelection: true,
                labelWidth: 60,
                store: this.ds_tags,
                queryMode: 'remote',
                scope: this
            })] // Form items closure
        });
    this.buttons = [new Prg.btn({
        text: btnUploadMsg,
        handler: this.onSave,
        scope: this
    }), new Prg.btn({
        text: btnCancelMsg,
        handler: function() {
            this.hide();
        },
        scope: this
    })];
    this.callParent(arguments);
    this.form = this.getComponent('blog-edit-form').getForm(); // 'upload-form-'+this.filetype
    }
});

希望这会有所帮助。

Answer 2

也许您可以使用Resizer？

这里有一些examples。