2

ExtJS TextField4.2.1 で提供される は、基本的には aLabelとTextFielda セット内のContainerlayouthboxです。

と のComboBox間にを挿入する必要があります。LabelTextFieldContainer

クラスを試してみましextendたTextFieldが、コンポーネントを別のコンポーネント階層に追加するための適切な構文を具体的に示すものは見つかりません。

コンポーネントを拡張し、私がしようとしているように変更する方法をExtJSにまったく慣れていない人に説明する回答コードスニペットまたはリンクを誰かが投稿できますか?

正しい方向に向けられる必要があるだけで、それで走ることができると思います。

4

2 に答える 2

2

Ext.form.field.FieldContainerを探しています

最も簡単な例を次に示します。

Ext.create('Ext.form.Panel', {
    title: 'FieldContainer Example',
    width: 550,
    bodyPadding: 10,

    items: [{
        xtype: 'fieldcontainer',
        fieldLabel: 'Last Three Jobs',
        labelWidth: 100,
        layout: 'hbox',
        items: [{
            xtype: 'combo',
                store: {
                fields: ['abbr', 'name'],
                data : [
                    {"abbr":"AL", "name":"Alabama"},
                    {"abbr":"AK", "name":"Alaska"},
                    {"abbr":"AZ", "name":"Arizona"}
                ]
            },
            queryMode: 'local',
            displayField: 'name',
            valueField: 'abbr',
            flex: 1
        }, {
            xtype: 'splitter'
        }, {
            xtype: 'textfield',
            flex: 1
        }]
    }],
    renderTo: Ext.getBody()
});

fieldContainer を単一のフィールドとして機能させることもできます。簡単な説明:

  • を混ぜるExt.form.field.Field
  • 内部フィールドsubmitValueをに設定しますfalse
于 2013-07-04T09:31:39.077 に答える
1

@sra から提供された回答に基づいて、これが私が最終的に得たものです。Sencha Architect から抽出されたコード。

Ext.define('MyApp.view.MyForm', {
    extend: 'Ext.form.Panel',

    height: 250,
    width: 680,
    bodyPadding: 10,
    title: 'My Form',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'fieldcontainer',
                    height: 22,
                    layout: {
                        align: 'stretch',
                        type: 'hbox'
                    },
                    fieldLabel: 'Label',
                    items: [
                        {
                            xtype: 'combobox',
                            fieldLabel: 'Label',
                            hideLabel: true
                        },
                        {
                            xtype: 'textfield',
                            flex: 1,
                            fieldLabel: 'Label',
                            hideLabel: true
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});
于 2013-07-04T16:17:23.573 に答える