0

我正在使用 Extjs 3.4

我创建了一个 Extjs 网格，它根据从服务器端收到的一些元数据自行构建。

这个'autoGrid'是建立在这样的'autoStore'之上的：

网格 ：

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();

}

店铺 ：

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;

}

一切都很好，我的数据被很好地检索到，在网格上很好地呈现。问题是当我尝试进行排序（remoteSort）时，排序方向出现错误，我得到了这个 Ext 错误：

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

fieldName 检索良好，但排序方向为空。

似乎我的商店也被视为一个对象而不是 Ext.Json.Store 因为当我调试时我有这个：

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

请问有什么想法吗？

4

1 回答 1

1

我也遇到过同样的问题。this.fields.get(fieldName) 排序时未定义。当您的商店未正确构建时出现，它可能来自您从服务器端接收的元数据。

您还可以使用 store metachange 事件来实现您想要的：

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

看到这个：

为 Ext JS 3.4 添加动态列

于 2013-12-27T14:59:14.790 回答