PDA

View Full Version : grouping jsonstore



nibblas
23 Feb 2011, 8:43 AM
hy,
is there a way to group a jsonstore like a groupstore?

greetings nibblas

drian
23 Feb 2011, 11:11 AM
you can use something like this:


var GridDataStore = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url: 'yourUrl',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'your_id'
},[
{name: 'your_id', type: 'int'},
{name: 'name'}
]),
groupField: 'name'
});

nibblas
24 Feb 2011, 1:24 AM
hy drian, thx

the store is working now, data is loaded but the grid won't show a grouping... if i delete the view statement the grid shows for each record a row, but not with the view....

any idea what's wrong?


Ext.onReady(function(){

Ext.QuickTips.init();

var xg = Ext.grid;


var grid = new xg.EditorGridPanel({
store :new Ext.data.GroupingStore({
storeId :'QuotationMobiliarStore',
autoLoad : true,
baseParams :{
task: 'LISTING'
},
groupField:'QuotKat',
sortInfo: {field: 'QuotKat', direction: 'ASC'},
groupOnSort: true,
remoteGroup: true,
proxy :new Ext.data.HttpProxy({
url : 'php/quotation.php',
method : 'POST'
}),
reader: new Ext.data.JsonReader({
root :'results',
idProperty: 'ID',
totalProperty:'total',
fields: [{
name :'ID',
mapping :'ID'
},
{
name : 'Pic',
mapping : 'Pic'
},
{
name : 'Preis',
mapping : 'Preis'
},
{
name : 'Beschreibung',
mapping : 'Beschreibung'
},
{
name : 'Subkat',
mapping : 'Subkat'
},
{
name : 'Comment',
mapping : 'Comment'
},
{
name : 'life',
mapping : 'life'
},
{
name : 'SubkatID',
mapping : 'SubkatID'
},
{
name : 'QuotKat',
mapping : 'QuotKat'
},
{
name : 'QuotKatID',
mapping : 'QuotKatID'
}

]})
}),
colModel :new Ext.grid.ColumnModel({
columns:[
{ header: 'ID',
width:50,
dataIndex: 'ID',
hidden:true
},{
header: 'Titel',
dataIndex: 'Beschreibung',
width:150,
editor: new Ext.form.TextField({ // rules about editing
allowBlank: false,
maxLength: 20,
store:this.store,
mode: 'remote',
triggerAction: 'all',
selectOnFocus:true
// maskRe: /([a-zA-Z0-9\s]+)$/ // alphanumeric + spaces allowed
})

},
{
header: 'Pic',
dataIndex: 'Pic',
width:50,
renderer: function(value, metaData, record, rowIndex, colIndex, store){
return "<img src='./images/egas/quotation/"+record.data.Pic+"'>";
},
editor: new Ext.form.TextField({ // rules about editing
allowBlank: false,
maxLength: 20,
store:this.store,
mode: 'remote',
triggerAction: 'all',
selectOnFocus:true
// maskRe: /([a-zA-Z0-9\s]+)$/ // alphanumeric + spaces allowed
})

},
{
header: 'Preis',
width:50,
dataIndex: 'Preis',
editor: new Ext.form.TextField({ // rules about editing
allowBlank: false,
maxLength: 20,
store:this.store,
mode: 'remote',
triggerAction: 'all',
selectOnFocus:true
// maskRe: /([a-zA-Z0-9\s]+)$/ // alphanumeric + spaces allowed
})
},
{
header: 'Comment',
width:50,
dataIndex: 'Comment',
id:'comment',
editor: new Ext.form.TextArea({ // rules about editing
allowBlank: false,
store:this.store,
mode: 'remote',
triggerAction: 'all',
selectOnFocus:true
// maskRe: /([a-zA-Z0-9\s]+)$/ // alphanumeric + spaces allowed
})
},{
header: 'Quotationkategorie',
dataIndex: 'QuotKatID',
sortable:true,
width:100,
renderer:function(value, metaData, record, rowIndex, colIndex, store){
return record.data.QuotKat;

},
editor: new Ext.form.ComboBox({ // rules about editing
store :new Ext.data.JsonStore({
storeId :'quotkatstore',
proxy: new Ext.data.HttpProxy({
url:'php/egas/quotationkategorie.php',
method:'POST'
}),
fields :[{
name :'ID',
mapping :'ID'
},{
name :'Beschreibung',
mapping :'Beschreibung'
}],
root :'results',
baseParams:{
task:'QuotKatCombo'
},
idProperty: 'ID'
}),
displayField:'Beschreibung',
valueField :'ID',
editable :false,
autoLoad :false,

mode :'remote',
forceSelection:true,
triggerAction:'all',
fieldLabel :'QuotationKategorie',
emptyText :'Select kategorie',
selectOnFocus:true
})
},
{
header: 'Subkategorie',
dataIndex: 'SubkatID',
sortable:true,
width:100,
renderer:function(value, metaData, record, rowIndex, colIndex, store){
return record.data.Subkat;

},
editor: new Ext.form.ComboBox({ // rules about editing
store :new Ext.data.JsonStore({
storeId :'subkatstore',
proxy: new Ext.data.HttpProxy({
url:'php/egas/mobiliarsubkategorie.php',
method:'POST'
}),
fields :[{
name :'ID',
mapping :'ID'
},{
name :'Beschreibung',
mapping :'Beschreibung'
}],
root :'results',
baseParams:{
task:'SubKatCombo'
},
idProperty: 'ID'
}),
displayField:'Beschreibung',
valueField :'ID',
editable :false,
autoLoad :false,

mode :'remote',
forceSelection:true,
triggerAction:'all',
fieldLabel :'Subkategorie',
emptyText :'Select kategorie',
selectOnFocus:true
})
}]
}
),

view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),

autoExpandColumn:'comment',
frame:true,
width: 700,
height: 450,
collapsible: true,
animCollapse: false,
title: 'Grouping Example',
iconCls: 'icon-grid',
renderTo: 'x-desktop'
});
});
Here my json result

({"total":"4","results":[{"ID":26,"Pic":"hatch.gif","Preis":450,"QuotKatID":1,"QuotKat":"666","Subkat":"Kinderbett","SubkatID":9,"Beschreibung":"test","Comment":"test","life":6},{"ID":27,"Pic":"icon_moebel.jpg","Preis":4599,"QuotKatID":2,"QuotKat":"gagagag","Subkat":"B\u00fcrotisch","SubkatID":13,"Beschreibung":"Esstisch","Comment":"test","life":18},{"ID":28,"Pic":"excel.png","Preis":150,"QuotKatID":2,"QuotKat":"gagagag","Subkat":"Kinderbett","SubkatID":9,"Beschreibung":"kinderbettli","Comment":"test","life":18},{"ID":29,"Pic":"accordian.gif","Preis":180,"QuotKatID":1,"QuotKat":"666","Subkat":"B\u00fcrotisch","SubkatID":13,"Beschreibung":"test","Comment":"test","life":18}]})

cheers nibblas

Condor
24 Feb 2011, 1:48 AM
A GroupingView only works if the field on which the store is grouped is a (hidden) column.

nibblas
24 Feb 2011, 1:55 AM
got it, damn *****, ordering in code was totally stupid... working now.. thx anyway

thx for additonal information condor!

nibblas

drian
24 Feb 2011, 3:34 AM
A GroupingView only works if the field on which the store is grouped is a (hidden) column.

that's interesting, however i use it without hiding the grouped column and it works.

Condor
24 Feb 2011, 3:50 AM
The grouped column doesn't need to be hidden (but you usually want it hidden).

Also have a look at the GroupingView hideGroupedColumn config option.