0

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%'が、うまくいきません。

ここに私のフォームがあります

4

2 に答える 2

1

Resizerを使用できますか？

ここにいくつかの例があります。

于 2012-12-27T14:37:22.077 に答える
1

フォームのデフォルト レイアウトを使用します。同じ行に 2 つのフィールドを表示する必要がある場合は、 http: //docs.sencha.com/ext-js/4-1/#form !/api/Ext.form.FieldContainerを使用します。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
    }
});

お役に立てれば。

于 2012-12-27T14:42:12.977 に答える