ExtJS的自動柵格這類問題

我已經創建了一個ExtJS網格，即建立它自己根據從服務器端收到一些元數據。

這個 '自動柵格' 是建立在一個 '自動存儲' 這樣的：

格：

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），對排序方向錯誤，我得到這個分機錯誤：

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 ...

任何想法嗎？

來源

2013-05-15 albarmat

我遇到過同樣的問題。當您排序時，this.fields.get（fieldName）未定義。當您的商店未正確構建時，它可能會出現，它可能來自您從服務器端收到的元數據。

您也可以達到所要採用存儲metachange事件：

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

看到這個：

Add dynamic column for Ext JS 3.4

來源

2013-12-27 14:59:14 Benja

ExtJS的自動柵格這類問題

回答

相關問題