PDA

View Full Version : [SOLVED] RowExpander and CheckboxSelectionModel doesn't work in GroupingStore



steffenk
18 Feb 2010, 3:00 AM
Hi,

i have no clue what the problem is. There is no JS-error, but it doesn't work as it shoud.

Row Expander doesn't render additional row, nothing happens on click of "+"

CheckboxSelectionModel - the checkbox in header has no influence, for multiple select i have to hold CTRL pressed.

Any ideas?

Here is the code



TYPO3.EM.Extlist = {

init : function() {

var proxy = new Ext.data.DirectProxy({
directFn: TYPO3.EM.ExtDirect.getExtensionList
});

var reader = new Ext.data.JsonReader({
idProperty: 'extkey',
root: 'data',
totalProperty:'length',
fields: [
{name : 'install'},
{name : 'title'},
{name : 'extkey'},
{name : 'category'},
{name : 'version'},
{name : 'type'},
{name : 'state'},
{name : 'links'},
{name : 'icon'},
{name : 'description'},
{name : 'shy'},
{name : 'installed'},
{name : 'author'},
{name : 'author_email'},
{name : 'author_company'},

]
});

var store = new Ext.data.GroupingStore( {
reader : reader,
proxy : proxy,
sortInfo : {
field : 'title',
direction : "ASC"
},
groupField : 'category',
listeners: {
load: function(s, records) {
s.filterBy(storeFilter);
},
datachanged: function(s) {
grid.setTitle('Local Extension-List (' + s.data.length + ' extensions found)');
}
},
autoLoad: true

});

// row expander
var expander = new Ext.grid.RowExpander({
tpl : new Ext.Template(
'<p><b>Description:</b> {description}</p><br>',
'<p><b>Version:</b> {version}</p>'
)
});

var sm = new Ext.grid.CheckboxSelectionModel({
singleSelect: false
});

var filterMenu = new Ext.menu.Menu({
items: [
{text: 'Item 1', handler: function(){}},
{text: 'Item 2', handler: function(){}}
]
});

var storeFilter = function(record, id) {
var filterText = Ext.get('filterText').getValue();
var shy = Ext.getCmp('shyFlag').pressed ? 1 : 0;
var installed = Ext.getCmp('installedFlag').pressed ? 1 : 0;
if (shy && record.data.shy == 1) {
return false;
}
if (installed && record.data.installed == 0) {
return false;
}
return true;
};

var grid = new Ext.grid.GridPanel(
{
store : store,
id: 'em-extgrid',
columns : [
sm, expander,
{
id : 'install',
header : "",
width : 20,
sortable : false,
dataIndex : 'install'
}, {
header : "Extension",
width : 150,
sortable : true,
dataIndex : 'title',
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
metaData.attr = 'ext:qtip="' + record.data.description + '"';
return record.data.icon + ' ' + value;
}
}, {
header : "Extension key",
width : 80,
sortable : true,
dataIndex : 'extkey'
}, {
header : "Category",
width : 70,
sortable : true,
dataIndex : 'category'
}, {
header : "Author",
width : 80,
sortable : true,
dataIndex : 'author',
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
metaData.attr = 'ext:qtip="' + value + '"';
var t = Ext.util.Format.ellipsis(value, 20);
if (record.data.author_email) {
return '<a href="mailto:' + record.data.author_email + '">' + t + '</a>';
} else {
return t;
}
}
}, {
header : "Version",
width : 40,
sortable : true,
dataIndex : 'version'
}, {
header : "Type",
width : 30,
sortable : true,
dataIndex : 'type'
}, {
header : "State",
align: 'center',
width : 50,
sortable : true,
dataIndex : 'state',
renderer: function(value){ //only for now, later use css class
var c = '#ffffff';
switch(value) {
case 'alpha': c = '#d12438'; break;
case 'beta': c = '#97b17e'; break;
case 'stable': c = '#3bb65c'; break;
case 'experimental': c = '#007eba'; break;
case 'test': c = '#979797'; break;
case 'obsolete': c = '#000000'; break;
case 'excludeFromUpdates': c = '#cf7307'; break;
}
return '<div style="background-color:' + c + ';color:white;font-weight:bold;">' + value + '</div>';
}
}, {
header : "",
width : 35,
sortable : false,
dataIndex : 'links'
} ],

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

frame : true,
width : 900,
height : 600,
collapsible : false,
animCollapse : false,
title : 'Local Extension-List',
iconCls : 'icon-grid',
tbar : [
{
text: 'Filter:',
menu: filterMenu
},
{
tag: 'input',
id: 'filterText',
type: 'text',
size: 30,
value: '',
style: 'background: #F9D9D9;',
enableKeyEvents: true,
monitorValid: true,

listeners: {
keyup: function(field, event) {
console.log('Event ' + event);
store.filterBy(storeFilter);
}
}
},
'->',
{
id: 'shyFlag',
pressed: true,
enableToggle:true,
text: 'hide shy extensions',
cls: 'x-btn-text shy',
toggleHandler: function(btn, pressed) {
store.filterBy(storeFilter);
}
},
{
id: 'installedFlag',
pressed: false,
enableToggle:true,
text : 'hide not installed',
cls: 'x-btn-text shy',
toggleHandler: function(btn, pressed) {
store.filterBy(storeFilter);
}
} ],
renderTo : 'em-extension-list'
});

}
};

steffenk
19 Feb 2010, 3:08 AM
Noone used that with groupingView?

I just built a short example using the groupingView example, added RowExpander and CheckboxSelectionModel. Exactly the same problem:

http://dev.sk-typo3.de/ext/grouping.html

goldledoigt
19 Feb 2010, 3:26 AM
I guess you have forgoten something ...

plugins: expander

steffenk
19 Feb 2010, 3:43 AM
ahrgg - shame on me ... you are right. Thanks!

goldledoigt
19 Feb 2010, 3:45 AM
my pleasure