View Full Version : Rearrange the groups of a grouping store

28 Aug 2013, 12:27 PM
I'm working with some legacy code in Ext JS 3.4. I have a store containing the details of our products like stocks, prices, dimensions etc. My goal is to group this store by the field "material" (no problem so far) and then display these groups in a given order, not just ascending or descending.
Currently I have this order stored in an array, and I'm looking for a way to apply this order to my entire store.

Here's the store and grid I'm working with:

function createStore(fields,filterEnabled,filterSettings){
if (!myStore) {
myStore = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url: hecoLibrary.baseUri + 'index.php?eID=hecoLibraryAjax&functionName=WSgetStoreDataBasic&l=' + l + '&catId=' + catId + '&vShowOnlyStockArticles='+showOnlyStockArticles
reader: new Ext.data.XmlReader({
record: 'column',
id: 'ArticleId'
}, response.WSgetStoreIndizesBasic) //read StoreIndizes => first line in the webservice response (look at the xml string!)

load: function(obj, records){
Ext.each(records, function(record, cell){
console.log('record: ' + record.data.Material);
console.log('cell: ' + cell);
groupField: 'Material',


return myStore;

And the grid:

function onGetGridSettingsSuccess(result, request){
//Save the store fields and grid column properties
response = Ext.decode(result.responseText);
columns = response.WSgetGridColumnPropertiesBasic;
filterEnabled = response.filterEnabled;
filterSettings = response.filterSettings;
compareSettings = response.compareSettings;
var fields = response.WSgetStoreIndizesBasic;
//Here create the store
myStore = createStore(fields,filterEnabled,filterSettings);
if (!myGrid) {
//Create the Gridpannel
myGrid = new hecoLibrary.Grid({
store: myStore,
renderTo: 'ArticleTableGrid',
height: 300,
width: 500,
listeners: {
afterRender: function(){
viewConfig: {
afterRender: function(){
showProgress('Downloading grid data...', 'loadingBox', 'active');

myStore.on('load', afterGridAndStoreIsRendered);

fn: function(store, records, options){
Ext.each(records, function(record){
if(record.data.OnStock == record.data.Price && record.data.OnStock == 'anfragen'){
return false;

Of course this is just part of the code. I can paste the the entire javascript file if need be.
A working example of the store can be found at:

3 Sep 2013, 7:49 AM
The framework doesn't a way to sort the dataset with anything other than ASC and DESC out of the box. You would need to create your own implementation of sorting on the store. You might look at Ext.data.Store's sortData and createSortFunction methods.

4 Sep 2013, 7:21 AM
Hey, thanks for the answer.
Is there a way to add an additonal column to my store and add specific data to it after the store was already loaded? I need to set specific values depending on already existing values of another column.
Is there a way to achieve this?

4 Sep 2013, 2:05 PM
I believe the convert config is what you're looking for:

Effectively it's dynamically generated field data using any logic you'd like including evaluations against other data in the record / store.

5 Sep 2013, 2:11 AM
Hey, again thanks for the quick answer and thanks for the help!
What I still don't quite get is how to add an additional column to my store. I'd like to add one more column after the store is loaded, and set the records of this column according to the records of another column.
For example, I'd like to add a hidden column named "sort" and compare it to my "material" column. If material is "A", set sort to "0", material = "B" -> sort = "1" and so on. Then order the store by sort ascending.
Is there a way to achieve this...?

5 Sep 2013, 9:31 AM
When you use the convert field you can then set the column to use that field by name. The convert method sets the value for the field that the column maps to.

var data = {
data: [{
valA: 5,
valB: 10
}, {
valA: 10,
valB: 5

var grid = new Ext.grid.GridPanel({
renderTo: document.body,
store: new Ext.data.JsonStore({
autoDestroy: true,
root: 'data',
data: data,
fields: ['valA', 'valB', {
name: 'evalB',
convert: function (val, rec) {
return rec.valB > rec.valA;
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
columns: [
{id: 'company', header: 'Val A', width: 200, sortable: true, dataIndex: 'valA'},
{header: 'Val B', width: 100, sortable: true, dataIndex: 'valB'},
{header: 'B Greater', width: 100, sortable: true, dataIndex: 'evalB'}
width: 600,
height: 300,
frame: true,
title: 'ConvertField'

5 Sep 2013, 10:16 AM
Hey slemmon,

that's a solution that might work if my store already contained all the columns that I need. Unfortunately, that's not the case. That's why I need to add an additional column _after_ the store was loaded.
I know that's an awkward scenario, but I get both the column layout as well as the store data from two different webservices; and we cannot modify these webservices. Hence I need a solution that adds a column after the store was loaded...

5 Sep 2013, 11:34 AM
You can set the grid's columns at runtime using reconfigure.

That requires a store and columnModel to be passed, but you can pass the grid's store back in to the reconfigure method. The columnModel you pass in would be the original columns + the new column.