PDA

View Full Version : Grid Grouping with locked column issue (Extjs 4..2.1)



shadow_moon
3 Apr 2014, 1:21 AM
Hi Everyone..
I am new in Extjs 4. I have a grid with Grouping feature.
The code runs well until I locked a column.
The text of information of group (groupHeaderTpl) was cut by the locked grid.
But if I didn't locked the column, The group text run well. I need the grouping also the feature of lock column.

Here is my code to add the grouping feature:



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


This is portion of the code to call groupingFeature:


var grid = Ext.create('Ext.grid.Panel', {
id: 'grid1',
name: 'grid1',
title: 'Grid 1',
layout: 'fit',
store: mystore,
features: [groupingFeature, filters],
loadMask: true,


I also attach a picture for this issue.

Does anyone know how to fix this issue?

Thanks.

scottmartin
3 Apr 2014, 10:00 AM
When you lock a grid, it creates a 2nd grid .. so you would need to specify the width.

See the following example and change the 1st grid column to:
https://fiddle.sencha.com/#fiddle/2hr



columns : [
{ header : 'Type', dataIndex : 'type', locked: true, width: 200 }, // default is 100
.....
],


If that does not help, then please create an example that displays your issue.

shadow_moon
3 Apr 2014, 5:51 PM
Hi scottmartin, thanks for your response.

I have added "width" as u told. I set become "200". Ok, that works.
But the problem is I need the column number row in the first column (xtype: 'rownumberer').
And the max width is "45". It makes the text group header is cut by the rownumber column.

Here is a little modification code from your code at fiddle sencha :



Ext.onReady(function () {

Ext.create('Ext.data.Store', {
storeId : 'simpsonsStore',
fields : ['type', 'name', 'email', 'change'],
groupField: 'type',
data : {'items' : [
{ 'type' : 'Child', 'name' : 'Lisa', 'email' : '[email protected]', 'change' : 100 },
{ 'type' : 'Child', 'name' : 'Bart', 'email' : '[email protected]', 'change' : -20 },
{ 'type' : 'Parent', 'name' : 'Homer', 'email' : '[email protected]', 'change' : 23 },
{ 'type' : 'Parent', 'name' : 'Marge', 'email' : '[email protected]', 'change' : -11 }
]},
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns : [
{ header : 'Row', xtype: 'rownumberer', width: 45, locked: true },
{ header : 'Type', dataIndex : 'type' },
{ header : 'Name', dataIndex : 'name' },
{ header : 'Email', dataIndex : 'email', flex : 1 },
{ header : 'Change', dataIndex : 'change' }
],
height: 300,
width: 500,

features : [{
ftype : 'grouping'
}],

viewConfig : {
listeners : {
groupclick : function(view, node, group, e, eOpts) {
console.log('groupclick');
}
}
},

renderTo : Ext.getBody()
});
});


Thanks.

shadow_moon
6 Apr 2014, 10:09 PM
Any idea? Thanks.

shadow_moon
15 Apr 2014, 6:06 PM
If I use selModel: new Ext.selection.CheckboxModel in Grid, It looks like what I need, but with the combobox. Is Extjs Grid can change the selModel with the row number counter? Thanks.

shadow_moon
6 May 2014, 11:23 PM
Somebody, can you help me?