Extjs autoGrid sort Issue

Question

I'm Using Extjs 3.4

I have created an Extjs grid, that build It self according to some meta data recieved from the server side.

this 'autoGrid' is build on an 'autoStore' like this :

grid :

function autoGrid(response, panel, node) {
var jsonData = Ext.util.JSON.decode(response[0]);
var grid = Ext.getCmp('contentGrid_' + panel.title);
if (grid) {
    grid.destroy();
}
var gridStoreFields = [],
sizeColumnAvailable = false,
gridPagingToolBar, gridPagerInfo,
gridItemsInfo,
gridDropTarget = null,
readerFields = [],
gridColumns = [],
gridFilters;
try {
    gridColumns.push(new Ext.grid.RowNumberer({ width: 30 }));
    for (var i = 0; i < jsonData.length; i++) {
        var field = {  name: jsonData[i].name, type: jsonData[i].type };
        var header = { name: jsonData[i].name, dataIndex: jsonData[i].name, type: jsonData[i].type, header: jsonData[i].header, sortable: jsonData[i].sortable };
        gridStoreFields.push(field);
        gridColumns.push(header);
        readerFields.push(jsonData[i].name);
    }
} catch (e) {
    ProcessScriptError(e);
}
var store = autoGridStore(gridStoreFields, readerFields, selectedNode);
grid = new Ext.grid.GridPanel({
    defaults: { sortable: true },
    id: 'contentGrid_' + panel.targetEntity,
    store: store,
    columns: gridColumns,
    frame: true,
    loadMask: true,
    remoteSort: true,
    width: 700,
    height: 450,
    bbar: new Ext.PagingToolbar({
        id: 'contentGrid_' + panel.title + '_PagingToolbar',
        pageSize: 20,//commonParameters.User.Preferences.LinesPerPage,
        store: store,
        displayInfo: true,
        totalProperty: "totalCount",
        displayMsg: commonParameters.Labels.Lbl_Element_Afficher + ' {0} - {1}' + ' ' + commonParameters.Labels.Lbl_De + ' ' + '{2}',
        emptyMsg: commonParameters.Labels.Msg_Empty
    }),
    listeners: {
        rowdblclick: function (grid, row, _object) {
            // si l'utilisateur a accès , ouverture au double clic
            // if(getTraitementWebAfficher(1))
            //{
            var record = grid.getStore().getAt(row);
            if (record != null)
                Edit(record.data.Id);
            else
                Ext.MessageBox.alert(commonParameters.Labels.Msg_Error, commonParameters.Labels.Msg_Probleme);
            // }
        },
        rowcontextmenu: initGridContextMenu
    }
});
grid.store.load({
    params: {
        start: 0,
        limit: 2,//commonParameters.User.cdus_nb_ligne_par_page,
        sort: grid.store.sortInfo.field,
        dir: grid.store.sortInfo.direction,
        'action': 'search',
        targetEntity:grid.store.targetEntity
    }
});
grid.store.on('load', function (store, records, options) {
    // store successufully loaded => hide loading window...
    commonParameters.globalLoadMask.hide();
});
panel.add(grid);
panel.doLayout();

}

Store :

function autoGridStore(gridStoreFields, readerFields) {
var autoGridStoreReader = new Ext.data.JsonReader({
    totalProperty: "totalCount",    // The property which contains the number of returned records (optional)
    root: "records",                // The property which contains an Array of record objects
    id: "Id"                     // The property within the record object that provides an ID for the record (optional)
}, readerFields);
var autoGridStore = new Ext.data.Store({fields : gridStoreFields, url: selectedNode.attributes.nodeUrl, targetEntity: selectedNode.attributes.targetEntity });
autoGridStore.remoteSort = true;
autoGridStore.idProperty = 'Id';
autoGridStore.totalProperty = 'totalCount';
autoGridStore.successProperty = 'success';
autoGridStore.sortInfo = { field: "Id", direction: "ASC" };
if (autoGridStore.getSortState()) {
    autoGridStore.sortInfo = { field: autoGridStore.getSortState().field, direction: autoGridStore.getSortState().direction };
}
autoGridStore.reader = autoGridStoreReader;
return autoGridStore;

}

Every thing is Ok, My data is well retrieved, well rendered on grid. The problem is that when I tried to make a sort ( remoteSort ), There is an error on the sort Direction, I got this Ext error :

 singleSort: function (fieldName, dir) {
    var field = this.fields.get(fieldName);
    if (!field) {
        return false;
    }

    var name = field.name,
        sortInfo = this.sortInfo || null,
        sortToggle = this.sortToggle ? this.sortToggle[name] : null;

    if (!dir) {
        if (sortInfo && sortInfo.field == name) {
            dir = (this.sortToggle[name] || 'ASC').toggle('ASC', 'DESC');
        } else {
            dir = field.sortDir;
        }
    }

the fieldName is well retrieved, but the sort direction is empty.

It seems that my store is also considered as an object and not a Ext.Json.Store because when I debug I have this :

var field = this.fields.get(fieldName); => this.fields doesn't contain a definition for get ... 

Any idea please ?

Answer 1

I have experienced the same problem. this.fields.get(fieldName) is undefined when you sort. It appears when your store is not properly construct, it might come from your meta data received from the server side.

You can also achieve that you want using store metachange event:

onMetaChange: function(newCol){
 [...]
    this.grid.reconfigure(store, new Ext.grid.ColumnModel(this.reader.meta.colModel))
}

See this:

Add dynamic column for Ext JS 3.4