Hallo liebe JS Gemeinde,
ich habe ein Problem mit einem GroupingStore aus ExtJS.
Ich hole mir per AjaxRequest Daten aus einer Datenbank. Diese möchte ich in einem Grid anzeigen und gruppieren.
Lasse ich die Daten in einem XmlStore anzeigen, ist das überhaupt kein Problem, allerdings werden sie dann nicht gruppiert. Wie kann ich diese Daten nun ordentlich gruppieren?
Hier mein Code:
function ladeExtJsUserverwaltung() {
var handbuecher\_reader = new Ext.data.XmlReader({
record:'handbuch'
});
//Store-Felder
var handbuecher\_store\_fields = [
{name: 'id', mapping:'id', type:'string'},
{name: 'bezeichnung', type: 'string'},
{name: 'kategorie\_id', type: 'string'}
];
//Benutzerdaten-Store fuellen
var handbuecher\_store = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
method: 'POST',
url: AjaxURL
}),
baseParams: {
'module': 'cm',
'function': 'handbuecher\_auflisten',
'session\_id': session\_id
},
reader: handbuecher\_reader,
groupField:'bezeichnung',
autoLoad: false,
autoSave: false,
idPath: 'id',
// record: 'handbuch',
totalProperty: 'handbuch \> SQL\_CALC\_FOUND\_ROWS',
remoteSort: true,
paramNames: {
start: 'limitstart',
limit: 'limitlaenge',
sort: 'sortierennach',
dir: 'reihenfolge'
},
// fields: handbuecher\_store\_fields,
listeners: {
load: function(Store,records,options) {
if(records.length==1 && records[0].data.id==0) {
Store.removeAll();
}
}
}
});
//Handbuecher SelectionModel
var ext\_handbuecher\_grid\_sel\_model = new Ext.ux.MultiRowUpdateSelectionModel({
checkOnly: true
});
//Definition des Grid-Spalten-Models
var handbuecher\_grid\_columnmodel = new Ext.grid.ColumnModel({
id: 'ext\_column\_model\_handbuecher',
columns: [
ext\_handbuecher\_grid\_sel\_model,
{
id: 'ext\_col\_handbuecher\_ID',
header: GUI.leseLng('id'),
dataIndex: 'id',
width: 50,
sortable: true,
hidden: true
},
{
id: 'ext\_col\_handbuecher\_bezeichnung',
header: GUI.leseLng('bezeichnung'),
dataIndex: 'bezeichnung',
width: 320,
sortable: true,
editor: new Ext.form.TextField({
allowBlank: false
})
},
{
id: 'kategorie\_id',
header: GUI.leseLng('kategorie'),
dataIndex: 'kategorie\_id',
width: 120,
sortable: true,
editor: new Ext.form.TextField({
allowBlank: false
})
}
]
});
//Grid initialisieren
var handbuecher\_grid = new Ext.grid.EditorGridPanel({
title: GUI.leseLng('handbuecher\_und\_formulare'),
id: 'ext\_grid\_handbuecher',
store: handbuecher\_store,
renderTo: 'handuecher\_auflisten',
selModel: ext\_handbuecher\_grid\_sel\_model,
cm: handbuecher\_grid\_columnmodel,
view: new Ext.grid.GroupingView({
forceFit: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length \> 1 ? "Items" : "Item"]})'
}),
frame: true,
autoHeight: false,
clicksToEdit: 2,
stateful: true,
stateId: 'ext\_state\_handbuecher\_grid',
stateEvents: ['columnmove', 'columnresize', 'sortchange', 'groupchange'],
stripeRows: true,
loadMask: true,
plugins: [
new Ext.ux.FitToParent({
parent: 'inhalt\_frame',
offsets: [10,10]
}),
'autosizecolumns'
],
listeners: {
afterrender: function(this\_grid) {
//Store erst laden nachdem Grid gerendert wurde
this\_grid.getStore().load({
params: {
limitstart: 0,
limitlaenge: CM\_Default\_Grid\_Num\_Rows
}
});
}
},
bbar: {
xtype: 'paging',
pageSize: CM\_Default\_Grid\_Num\_Rows,
plugins: [
new Ext.ux.grid.PageSizer({initialSize: CM\_Default\_Grid\_Num\_Rows})
],
store: handbuecher\_store,
displayInfo: true
}
});
}