1

ストアにネストされたjsonデータがある場合にコンボボックスにdisplayField値のリストが表示されるようにコードを変更する方法。

コンボボックスで列「名前」を編集すると、空のリストが表示されます。

Ext.define("Model", {
    extend: "Ext.data.Model",
    fields: [
        {name: "id", type: "int"},
        {name: "name.name"},
        {name: "phone", mapping: "name.phone"},
        {name: "descr", type: "string", mapping:'description'}
    ]
});

// store with data that we will recieve from test echo ajax service
var Store = Ext.create("Ext.data.Store", {
    model: "Model",
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: '/echo/json/',
        actionMethods: {read: 'POST'}, // echo ajax service required
        extraParams: {
            json: Ext.JSON.encode({
                root: [{id: 1, name: {name:"John", phone: "123"}, description:"Fapfapfap"},
                       {id: 2, name: {name:"Danny", phone: "234"}, description:"Boobooboo"},
                       {id: 3, name: {name:"Tom", phone: "345"}, description:"Tralala"},
                       {id: 4, name: {name:"Jane", phone: "456"}, description:"Ololo"},]
                })
        },
        reader: {
            type: 'json',
            root: 'root'
        }
    },
});

// and finally I have a grid panel
Ext.create("Ext.grid.Panel", {
    store: Store,
    columns: [
        {dataIndex: "id", header:"ID"},
        {dataIndex: "name.name", header:"Name", flex: 1, editor: {xtype:"combo", store: Store, displayField:'name.name'}},
        {dataIndex: "phone", header:"Phone", flex: 1, editor: "textfield"},
        {dataIndex: "descr", header: "Description", flex: 2, editor: "htmleditor"}
    ],
    //selType: 'rowmodel',
    plugins: [Ext.create('Ext.grid.plugin.CellEditing')],
    renderTo: Ext.getBody(),
});

ここでの例：http：//jsfiddle.net/3MknG/2/

4

1 に答える 1

1

フィールド'name'マッピングを以下のように設定すると、意図したとおりに機能します。

{name: "name", mapping: "name.name"}

そして、次のようにグリッド列を構成します。

{dataIndex: "name", header:"Name", flex: 1, 
 editor: {xtype:"combo", store: Store, displayField:'name'}},

変更された例はここにあります：http：//jsfiddle.net/3MknG/3/

ただし、フィールド「name.name」の名前を「name」に変更したくありません。これは、グリッド用に意図されたとおりに機能するためです。

誰かが同様の問題に遭遇しましたか？

アップデート：

私は1つの解決策を見つけました。最高ではありませんが、それは私にとってはうまくいきます。

コンボがコンポーネントとして初期化されているときにモデルを格納するために、マッピング構成を使用して新しいフィールドを動的に追加します。

Ext.define("MyCombo", {
    extend: "Ext.form.field.ComboBox",
    alias:"widget.mycombo",
    initComponent: function(){
        var me = this;

        if (me.displayMapping) {
            var store = me.getStore();
            var proxy = store.getProxy();
            var model = proxy.getModel();
            me.displayField = Ext.id(me.displayMapping); // It is necessary to have difference between the name and other existing names in model.
            // Add new field with mapping to store model
            model.prototype.fields.add(new Ext.data.Field({ name: me.displayField,
                                                            mapping: me.displayMapping}));
        }
        me.callParent();
    }
});

Ext.create("Ext.grid.Panel", {
    store: Ext.create("MyStore"),
    columns: [
        {dataIndex: "id", header:"ID"},
        {dataIndex: "name.name", header:"Name", flex: 1, 
                    editor: {xtype: "mycombo",
                             store: Ext.create("MyStore"),         
                             displayMapping: "name.name"}},
        {dataIndex: "phone", header:"Phone", flex: 1, editor: "textfield"},
        {dataIndex: "descr", header: "Description", flex: 2, editor: "htmleditor"}
    ],
    plugins: [Ext.create('Ext.grid.plugin.CellEditing')],
    renderTo: Ext.getBody(),
});

ここで見つけることができる変更された例：http：//jsfiddle.net/3MknG/7/

誰かがより良い解決策を知っていますか？

于 2012-10-05T20:51:45.813 に答える