0

コンボボックスエディターを持つ列があるグリッドがあります。エディターコンボボックス用に次のストアがあります

var combostore = Ext.create('Ext.data.Store', {
    fields: ['Value'],
    proxy: {
        type: 'ajax',
        url: '/pwbench/json/store1.json',
        reader: {
            type: 'json'
        }
    },
    autoLoad: true
});

コンボボックスのエディター構成は以下のとおりです

editor: {
          xtype: 'combobox',
      store: combostore,
      displayField: 'Value',
      queryMode: 'remote',
      valueField: 'Value',
      emptyText:'Select',
      autoShow: true,
      selectOnFocus:true,
      editable: false,
}

ストアの json データは次のとおりです。

{[{"Value": "Store 1"},{"Value": "Store 1"},{"Value": "Store 1"},{"Value": "Store 1"}]}

http 応答は json データを正常にフェッチしていますが、コンボボックスをクリックすると、オプションのリストが表示されません。ただし、ローカル データでストアを使用すると、リストが表示されますが、アイテムを選択してグリッドのセルの外側をクリックすると、値が消えます。これらのエラーを両方とも修正する必要があります。ajax jsonデータをレンダリングする方法と、選択した値を保持する方法は?

4

2 に答える 2

0

グリッドの例で動作するコンボボックスがあります。これが参考になるかどうかを確認してください。

Ext.onReady(function() {

    Ext.require([ 'Ext.data.*', 'Ext.grid.*' ]);


    // ************************** Define Data Models ************************ //

    Ext.define('SUserSRole', {
        extend : 'Ext.data.Model',
        fields : [ 'id', 'username', 'authority' ]
    });

    Ext.define('SecureUser', {
        extend : 'Ext.data.Model',
        fields : [ 'id', 'username', 'password' ]
    });

    Ext.define('SecureRole', {
        extend : 'Ext.data.Model',
        fields : [ 'id', 'authority' ]
    });


    // ************************** Define Data Stores ************************ //

    //The Store contains the AjaxProxy as an inline configuration
    var userStore = Ext.create('Ext.data.Store', {
        autoLoad : true,
        model : 'SecureUser',
        proxy : {
            type : 'ajax',
            api: {
                read: '../secureUser/listJSON',
            },
            reader : {
                type : 'json',
                successProperty: 'success',
                root : 'secureUsers',
                messageProperty: 'message'
            },
            writer : {
                type : 'json',
                encode: 'true',
                root: 'secureUsers'                 
            }
        }
    });


    //The Store contains the AjaxProxy as an inline configuration
    var roleStore = Ext.create('Ext.data.Store', {
        autoLoad : true,
        model : 'SecureRole',
        proxy : {
            type : 'ajax',
            api: {
                read: '../secureRole/listJSON',
            },
            reader : {
                type : 'json',
                successProperty: 'success',
                root : 'secureRoles',
                messageProperty: 'message'
            },
            writer : {
                type : 'json',
                encode: 'true',
                root: 'secureRoles'                 
            }
        }
    });

    //The Store contains the AjaxProxy as an inline configuration
    var userRoleStore = Ext.create('Ext.data.Store', {
        autoLoad : true,
        model : 'SUserSRole',
        proxy : {
            type : 'ajax',
            api: {
                read: '../secureUserSecureRole/listJSON',
            },
            reader : {
                type : 'json',
                successProperty: 'success',
                idProperty: 'id',
                root : 'secureUserRoles',
                messageProperty: 'message'
            },
            writer : {
                type : 'json',
                encode: 'true',
                root: 'secureUsers'                 
            }
        }
    });

    //renderer needed to display correct field when not editing combo (see API)
    Ext.util.Format.comboRenderer = function(combo) {
        return function(value) {
            var record = combo.findRecord(combo.valueField, value);
            return record ? record.get(combo.displayField)
                    : combo.valueNotFoundText;
        }
    }

    var userCombo = new Ext.form.ComboBox({
        typeAhead: true,
        triggerAction: 'all',
        mode: 'remote',
        emptyText: 'Select User',
        store: userStore,
        valueField: 'username',
        displayField: 'username'
    });

    var roleCombo = new Ext.form.ComboBox({
        typeAhead: true,
        triggerAction: 'all',
        mode: 'remote',
        emptyText: 'Select Role',
        store: roleStore,
        valueField: 'authority',
        displayField: 'authority'
    });

    // Grid-columns with meta-data from backend.
    var userRoleColumns = [ {
        header : "ID",
        width : 40,
        sortable : true,
        dataIndex : 'id'
    },{
        header : 'User Name',
        width : 130,
        dataIndex : 'username',
        editor : userCombo,
        renderer: Ext.util.Format.comboRenderer(userCombo)
    },{
        header : 'Authority',
        width : 130,
        dataIndex : 'authority',
        editor : roleCombo,
        renderer: Ext.util.Format.comboRenderer(roleCombo)
    }];

     var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 1
        })

    // create youbrew.recipe.Grid instance (@see recipeGrid.js)
    var userRoleGrid = Ext.create('Ext.grid.Panel', {
        renderTo : document.body,
        plugins : [ rowEditing ],
        store: userRoleStore,
        width : 320,
        height : 300,
        clicksToEdit : 'auto',
        columns : userRoleColumns,
        dockedItems : [ {
            xtype : 'toolbar',
            items : [
                    {
                        text : 'Add',
                        handler : function() {
                            // empty record
                            var rowCount = userRoleStore.getCount();
                            userRoleStore.insert(rowCount, new SUserSRole());
                            userRoleGrid.getView().refresh();
                            rowEditing.startEdit(rowCount,0);
                        }
                    }
            ]
        }]

    });
});
于 2013-06-10T01:36:50.063 に答える
0

JSON データが無効です。これは ExtJS やコンボボックスとは関係ありません。

JSON データを JSONLint バリデーターに入れる

キーが必要です:

{"someVarName": [{"Value": "Store 1"}, ...]}

または単に（これはおそらくあなたが望むものです）：

[{"Value": "Store 1"}, ...]
于 2013-06-21T21:04:00.287 に答える