Grid grouping and json store

[ezriel]

Hi,
i tried implement grouping future (from grids example) to my grid but firebug throws an exception
TypeError: Ext.getCmp("scoreTable").down("menucheckitem[text=" + groupName + "]") is null
when i try collapse any group
What am i doing wrong?



Ext.define('Score', {
extend: 'Ext.data.Model',
fields: [
{name: 'scoreId', type: 'int', convert: null},
{name: 'score', type: 'int', convert: null},
{name: 'exam', type:'string'},
{name: 'date', type: 'date', dateFormat: 'Y-m-d H:i:s'},
{name: 'studentName', type:'string'},
{name: 'studentLastName', type:'string'},
{name: 'teacherName', type:'string'},
{name: 'teacherLastName', type:'string'},
{name: 'teamName', type:'string'},
{name: 'subjectName', type:'string'},
{name: 'subjectId', type: 'int', convert: null},
],
idProperty: 'scoreId'
});

Ext.define('ScoreStore', {
extend: 'Ext.data.Store',
model: 'Score',
storeId: 'scoreStore',
autoLoad: true,
pageSize: 25,

proxy: {
type: 'ajax',
api: {
read : 'score/load.action'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
},
listeners: {
exception: function(proxy, response, operation){
var msg;
if (response.responseText != undefined){
var responseObj = Ext.decode(response.responseText,true);
if (responseObj != null && responseObj.message != undefined){
msg = responseObj.message;
}else{
msg = 'Nieznany błąd: Serwer nie wysłał żadnych informacji o błędzie';
}
}else{
msg = 'Nieznany błąd: Nieznana odpowiedz serwera';
}
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: msg,
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
}
});


Ext.define('MyDesktop.ScoreWindow', {
extend: 'Ext.ux.desktop.Module',

requires: [
'Ext.grid.Panel',
],

id:'score-win',

init : function(){
this.launcher = {
text: 'Wyniki egzaminów',
iconCls:'icon-grid',
handler : this.createWindow,
scope: this
};
},

createWindow : function(){

var desktop = this.app.getDesktop();

var sstore = Ext.create('ScoreStore',{
groupField: 'exam',
sorters: ['exam'],
listeners: {
groupchange: function(store, groupers) {
var grouped = sstore.isGrouped(),
groupBy = groupers.items[0] ? groupers.items[0].property : '',
toggleMenuItems, len, i = 0;

// Clear grouping button only valid if the store is grouped
Ext.getCmp('scoreTable').down('[text=Clear Grouping]').setDisabled(!grouped);

// Sync state of group toggle checkboxes
if (grouped && groupBy === 'exam') {
toggleMenuItems = Ext.getCmp('scoreTable').down('button[text=Toggle groups...]').menu.items.items;
for (len = toggleMenuItems.length; i < len; i++) {
toggleMenuItems[i].setChecked(groupingFeature.isExpanded(toggleMenuItems[i].text));
}
Ext.getCmp('scoreTable').down('[text=Toggle groups...]').enable();
} else {
Ext.getCmp('scoreTable').down('[text=Toggle groups...]').disable();
}
},
laod: function(store){
groups = sstore.getGroups();
len = groups.length; i = 0;
toggleMenu = [];
toggleGroup = function(item) {
var groupName = item.text;
if (item.checked) {
groupingFeature.expand(groupName, true);
} else {
groupingFeature.collapse(groupName, true);
}
};

// Create checkbox menu items to toggle associated groupd
for (; i < len; i++) {
toggleMenu[i] = {
xtype: 'menucheckitem',
text: groups[i].name,
handler: toggleGroup
}
}
var toggleMenuItems = Ext.getCmp('scoreTable').down('button[text=Toggle groups...]').menu.items.items;
}
}
});

var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: '{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
hideGroupedHeader: true,
startCollapsed: true,
id: 'restaurantGrouping'
});

var groups,len,i,toggleMenu,toggleGroup;

function onExamChangeListener() {
sstore.reload();
}

function addTooltip(value, metadata) {
metadata.tdAttr='data-qtip="' + value +'"';
return value;
}

function teacherRenderer(value, metaData, record) {
value = record.get('teacherName') + ' ' + value;
metaData.tdAttr='data-qtip="' + value +'"';
return value;
}

function studentRenderer(value, metaData, record) {
value = record.get('studentName') + ' ' + value;
metaData.tdAttr='data-qtip="' + value +'"';
return value;
}

var win = desktop.getWindow('score-win');
if(!win){
win = desktop.createWindow({
id: 'score-win',
title:'Wyniki egzaminów',
width:900,
height:700,
iconCls: 'icon-grid',
animCollapse:false,
constrainHeader:true,
items: [
{
id: 'scoreTable',
title: 'Lista wyników',
xtype: 'grid',
store: sstore,//'groupStore',
height:600,
viewConfig: {
listeners: {
groupcollapse: function(v, n, groupName) {
if (!Ext.getCmp('scoreTable').down('[text=Toggle groups...]').disabled) {
Ext.getCmp('scoreTable').down('menucheckitem[text=' + groupName + ']').setChecked(false, true);
}
},
groupexpand: function(v, n, groupName) {
if (!Ext.getCmp('scoreTable').down('[text=Toggle groups...]').disabled) {
Ext.getCmp('scoreTable').down('menucheckitem[text=' + groupName + ']').setChecked(true, true);
}
}
}
},
features: [groupingFeature],
columns: [
{text: "Egzamin",flex: 3, dataIndex: 'exam', sortable: true, renderer: addTooltip},
{text: "Student", dataIndex: 'studentLastName', sortable: true, renderer: studentRenderer},
{text: "Wynik", dataIndex: 'score', sortable: false, renderer: addTooltip},
{text: "Przedmiot", dataIndex: 'subjectName', sortable: true, renderer: addTooltip},
{text: "Grupa", dataIndex: 'teamName', sortable: true, renderer: addTooltip},
{text: "Nauczyciel", dataIndex: 'teacherLastName', sortable: true, renderer: teacherRenderer},
{text: "Data", dataIndex: 'date', sortable: true, renderer: Ext.util.Format.dateRenderer('Y-m-d H:i')}
],
tbar:['->', {
text: 'Toggle groups...',
menu: toggleMenu
},'->', {
text:'Clear Grouping',
iconCls: 'icon-clear-group',
handler : function() {
groupingFeature.disable();
}
}]
}
],
dockedItems: [{
xtype: 'pagingtoolbar',
id: 'pageTool',
store: sstore,
dock: 'bottom',
displayInfo: true
}]
});
}
win.show();
}
});

It works when i have static data in store and delete load listener


Ext.define('ScoreStore', {
extend: 'Ext.data.Store',
model: 'Score',
data:[
{scoreId: 2, exam: '6666', score: 666}
]......

var sstore = Ext.create('ScoreStore',{
groupField: 'exam',
sorters: ['exam'],
listeners: {
....
laod: function(store){}
}
});

var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: '{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
hideGroupedHeader: true,
startCollapsed: true,
id: 'restaurantGrouping'
}),
groups = sstore.getGroups(),
len = groups.length, i = 0,
toggleMenu = [],
toggleGroup = function(item) {
var groupName = item.text;
if (item.checked) {
groupingFeature.expand(groupName, true);
} else {
groupingFeature.collapse(groupName, true);
}
};
// Create checkbox menu items to toggle associated groupd
for (; i < len; i++) {
toggleMenu[i] = {
xtype: 'menucheckitem',
text: groups[i].name,
handler: toggleGroup
}
}
.....

[mitchellsimoens]

Your code could use quite a bit of help. You are using Ext.getCmp which is not a very good OOP approach, your code isn't very optimized. Did you do any debugging yet?

[ezriel]

Yes, i did. toggleMenu variable is empty when i use json store. I don't know why. What should I use instead of Ext.getCmp function?