1

Sencha は初めてで、ストア内のオブジェクトのリストから選択するフィールドを持つ Sencha フォームパネルを実装しようとしています。これは、単純な解決策があるに違いない、十分に基本的なパターンのように思えます。名前/IDペアのjson配列(場所)を返すajaxエンドポイントを定義するモデルがあります:

Ext.define('MyApp.model.Place', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {name: 'name', type: 'string'},
            {name: 'id', type: 'int'},
        ],
        proxy: {
            type: 'ajax',
            url: '/m/places/',
            reader: {
                type: 'json',
                rootProperty: 'places',
            },
        },
    },
});

そして店：

Ext.define('MyApp.store.Place', {
    extend: 'Ext.data.Store',
    requires: ['MyApp.model.Place'],
    config: {
        model: 'MyApp.model.Place',
        autoLoad: true,
        sorters: [
            {
                property : 'name',
                direction: 'ASC',
            },
        ],
    },
});

場所名用の読み取り専用テキスト フィールドと、場所 ID を送信するための非表示フィールドが必要です。

{
    xtype: 'textfield',
    name: 'place_name',
    label: 'Place',
    readOnly: true,
    listeners: {
        focus: function () {
            var place_picker = Ext.create('Ext.Picker', {
                slots: [
                    {
                        name: 'place_name',
                        title: 'Choose a Place',
                        store: Ext.create('MyApp.store.Place'),
                        itemTpl: '{name}',
                        listeners: {
                            itemtap: function (obj, index, target, record, e, eOpts) {
                                var form = Ext.getCmp('entityform');
                                form.setValues({
                                    place_name: record.get('name'),
                                    place_id: record.get('id'),
                                });
                                // how to dismiss the picker?
                                obj.parent.hide();
                            },
                        },
                    },
                ]
            });
            Ext.Viewport.add(place_picker);
            place_picker.show();
        },
    },
},
{
    xtype: 'hiddenfield',
    name: 'place_id',
},

この時点で、フィールドをタップすると、ピッカーが下から上にスライドして読み込みアニメーションが表示されますが、地名のリストは読み込まれていません。期待される json ドキュメントを返しました。

ここで立ち止まって、正しい軌道に乗っているのか、それともより良いアプローチがあるのか​​ を尋ねます.

ajax リクエストの結果がピッカーに入力されないのはなぜですか? 私のitemTplの使い方は間違っていますか?

フォームフィールドを sencha に適した方法で設定していますか?

itemtap でピッカーを閉じるにはどうすればよいですか? hide() の使用が適切な方法であるかどうか、どういうわけか疑っています。

4

1 に答える 1

0

ピッカー スロットには、オブジェクトの配列であるデータ構成があります。テキストと値を含む特定の形式にする必要があります。

slots :[
    data : [{
text : someValue,
value : someValue1,}] ]

フィールド text と value を持つオブジェクトをスロットに追加する必要があります。

于 2012-10-11T06:59:02.590 に答える