PDA

View Full Version : Grouping Grid with Ext Designer



l.pavel
6 Oct 2010, 8:07 PM
I am trying to get a Grouping Grid with Ext Designer.
I have created a JSON Store which gives me the following data

itemID
itemName
itemDate -- m/d/Y format

What I want to do is group the items by date, but I cannot find a solution on how to change the grid or the store to allow me to group the results.

Is it the store that has to be modified or the config on the grid. As far as I could find online I need a Grouping store which I have no idea how to get to from the class that I get with the designer.

Thanks for any information that you can give :)

jarrednicholls
7 Oct 2010, 9:14 AM
Hi l.pavel,

To do a grouping grid, you need the Ext.grid.GroupingView and the Ext.data.GroupingStore. The GroupingStore is not supported in the Designer at this time, but will be added in a future release. Because the GroupingStore doesn't exist, the GroupingView is also omitted. You can setup your Grid with a custom store (simply don't configure/bind a store in the Designer) sort of like this:



ItemGrid = Ext.extend(ItemGridUi, {
initComponent: function() {
this.view = new Ext.grid.GroupingView({
// groupingview config
});

// Create GroupingStore that reads JSON data, just like JsonStore out of the box
this.store = new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader({
fields: [
// itemID, itemName, and itemDate field configs
],
// other configs as needed, like root, successProperty, and totalProperty
}),
// Other store configs, such as url
});

ItemGrid.superclass.initComponent.call(this);
}
});


Let me know if that helps!

l.pavel
7 Oct 2010, 3:57 PM
Ok ... I figured that I could somehow extend the classes I already have.

This is what I have and seems for some reason not to be working... I do receive the store data correctly as far as i can tell.

store reply:
{
"storeSuccess":"true",
"storeCount":4,
"storeMessage":"Message here...",
"storeData":[
{"itemID":1,"itemName":"item 1","itemDate":"10\/04\/2010"},
{"itemID":4,"itemName":"item 2","itemDate":"10\/04\/2010"},
{"itemID":10,"itemName":"item 3","itemDate":"09\/01\/2010"},
{"itemID":23,"itemName":"item 4","itemDate":"08\/01\/2010"}
]
}


recipesListGridClassUi definition -- from Ext Designer

itemsListGridClassUi = Ext.extend(Ext.grid.GridPanel, {
initComponent: function() {
this.columns = [
{
xtype: 'numbercolumn',
format: '0',
header: 'ID',
sortable: true,
editable: false,
groupable: false,
hidden: true,
hideable: false,
dataIndex: 'itemID',
id: 'r-grd-id'
},
{
xtype: 'gridcolumn',
dataIndex: 'itemName',
header: 'item Name',
sortable: true,
width: 100,
groupable: false,
hideable: false,
menuDisabled: true,
id: 'r-grd-name'
},
{
xtype: 'datecolumn',
dataIndex: 'itemDate',
header: 'item Date',
sortable: true,
width: 150,
hideable: false,
format: 'm / Y',
id: 'r-grd-date'
}
];
itemsListGridClassUi.superclass.initComponent.call(this);
}
});


itemsListGridClass

itemsListGridClass = Ext.extend(itemsListGridClassUi, {
initComponent: function() {
this.view = new Ext.grid.GroupingView({
forceFit: true,
showGroupName: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})',
//hideGroupedColumn: 'itemDate'
});

this.store = new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader({
root: 'storeData',
idProperty: 'itemID',
messageProperty: 'storeMessage',
successProperty: 'storeSuccess',
totalProperty: 'storeCount',
autoLoad: true,
autoSave: false,
sortField: 'itemDate',
sortDir: 'DESC',
fields: [
{
name: 'itemID',
type: 'int',
mapping: 'itemID'
},
{
name: 'itemName',
type: 'string',
mapping: 'itemName'
},
{
name: 'itemDate',
type: 'date',
mapping: 'itemDate'
}
]
}),
storeId: 'storeitemsID',
url: '/admin/store.items.php',
groupField: 'itemDate',
sortInfo:{field:'itemName', direction: "ASC"}
});

itemsListGridClass.superclass.initComponent.call(this);
}
});
Ext.reg('mygrid1', itemsListGridClass);

The window / grid / store loads fine but it does not display anything. I bet it is a small detail i am missing or i am just trying to use the classes instead of just defining the class itself.

Thanks for the help :)

jarrednicholls
8 Oct 2010, 5:17 AM
Hey l.pavel,

Let's try a few things first. There are a couple of configurations that are applied to the JsonReader, which actually should be a part of the GroupingStore. These would be autoLoad, autoSave, sortField, and sortDir, although the sort(Field|Dir) could just be eliminated since you supplied a sortInfo configuration...which itself may need to be updated to sort by itemDate DESC?

The next thing to try is to set the dateFormat property of your "itemDate" field. Since you are returning the date as a string, the dateFormat property must be set so that the Record can property parse the date string into a true Javascript Date object. So try setting it to:



dateFormat: 'm/d/Y'


Let's see where that gets us. Namely, since the autoLoad property was not set on the GroupingStore, the store wouldn't be loading its data upon initialization...an explicit call to load() would have been necessary. Maybe that's partly the issue? You can check to see if your call is going out and coming back in correctly in Chrome/Safari Web Inspector or in Firebug depending on what browser you're using.

l.pavel
9 Oct 2010, 3:36 PM
Changing the configuration as you said (moving autoload / autosave snd sortfield / sortdir) fixed the problem. However i left dateFormat as " m / Y" since I need the grouping done by the month of year not by the day :)

Thanks a lot for the help.