Extjs Combobox ajax store doesn't render

Question

I have a grid in which I have column which has a combobox editor. I have the following store for the editor combobox

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

My editor config for the combobox is below

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

The json data for the store is below

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

The http response is fetching the json data fine, but when I click on the combobox, it doesn't show the list of options. However, if I use a store with local data, it displays the list but when I select an item and click outside of the cell of the grid, the value disappears. I need to fix both these errors. How to render the ajax json data and how to retain selected value?

rajugaadu rajugaadu · Accepted Answer · 2013-06-10T01:36:50

I have a working Combobox in a Grid example. See if this can help you as a reference.

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);
                        }
                    }
            ]
        }]

    });
});

Extjs Combobox ajax store doesn't render

2 Answers