PDA

View Full Version : Problem with Grid Column Header Grouping



khushi
27 Nov 2010, 12:56 AM
Hi

how can we remove "id" column from "Asia" in Grid Column Header Grouping like in the screen shot.

Thanks in advance

Condor
27 Nov 2010, 2:20 AM
I this really an Ext 2.x question? In Ext 2.x this plugin had a different name!

Also, you're not giving enough information. What do you actually mean by 'remove "id" column from "Asia"'?

khushi
27 Nov 2010, 2:31 AM
I have to create a Grid Column Header Grouping like in the screen shot. problem is that when i add new column , it add it to group.

Condor
27 Nov 2010, 3:11 AM
The plugin doesn't do row spanning, but you can create empty columns, e.g.

rows: [
{},
{colspan: 3, header: 'Marks'},
{},
{}
]

khushi
28 Nov 2010, 10:29 PM
hi Condor,

Thanks for your reply.

i am using ext 3.3 version http://dev.sencha.com/deploy/dev/examples/grid/ColumnHeaderGroup.html. i am unable to crate grid with colspan.

please help me.



/*!
* Ext JS Library 3.3.0
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function() {
var structure = {
Asia: [''],
Marks: ['']
},
products = ['ProductX', 'ProductY'],
fields = [],
columns = [],
data = [],
continentGroupRow = [],
cityGroupRow = [],



/*
* Example method that generates:
* 1) The column configuration for the grid
* 2) The column grouping configuration
* 3) The data for the store
* 4) The fields for the store
*/
function generateConfig(){
var arr,
numProducts = products.length;

Ext.iterate(structure, function(continent, cities){
continentGroupRow.push({
header: continent,
align: 'center',
colspan: cities.length * numProducts
});
Ext.each(cities, function(city){
cityGroupRow.push({
header: city,
colspan: numProducts,
align: 'center'
});
Ext.each(products, function(product){
fields.push({
type: 'int',
name: city + product
});
columns.push({
dataIndex: city + product,
header: product,
renderer: Ext.util.Format.usMoney
});
});
arr = [];
for(var i = 0; i < 20; ++i){
arr.push((Math.floor(Math.random()*11) + 1) * 100000);
}
data.push(arr);
});
})
}

// Run method to generate columns, fields, row grouping
generateConfig();


/*
* continentGroupRow at this point is:
* [
* {header: 'Asia', colspan: 4, align: 'center'},
* {header: 'Europe', colspan: 6, align: 'center'}
* ]
*
* cityGroupRow at this point is:
* [
* {header: 'Beijing', colspan: 2, align: 'center'},
* {header: 'Tokyo', colspan: 2, align: 'center'},
* {header: 'Berlin', colspan: 2, align: 'center'},
* {header: 'London', colspan: 2, align: 'center'},
* {header: 'Paris', colspan: 2, align: 'center'}
* ]
*/
var group = new Ext.ux.grid.ColumnHeaderGroup({
rows: [continentGroupRow]
});

/*
* fields at this point is:
* [
* {type: 'int', name: 'BeijingProductX'},
* {type: 'int', name: 'BeijingProductY'},
* {type: 'int', name: 'TokyoProductX'},
* {type: 'int', name: 'TokyoProductY'},
* {type: 'int', name: 'BerlinProductX'},
* {type: 'int', name: 'BerlinProductY'},
* {type: 'int', name: 'LondonProductX'},
* {type: 'int', name: 'LondonProductY'},
* {type: 'int', name: 'ParisProductX'},
* {type: 'int', name: 'ParisProductY'}
* ]
*
* columns at this point is:
* [
* {dataIndex: 'BeijingProductX', header: 'ProductX'},
* {dataIndex: 'BeijingProductY', header: 'ProductY'},
* {dataIndex: 'TokyoProductX', header: 'ProductX'},
* {dataIndex: 'TokyoProductY', header: 'ProductY'},
* {dataIndex: 'BerlinProductX', header: 'ProductX'},
* {dataIndex: 'BerlinProductY', header: 'ProductY'},
* {dataIndex: 'LondonProductX', header: 'ProductX'},
* {dataIndex: 'LondonProductY', header: 'ProductY'},
* {dataIndex: 'ParisProductX', header: 'ProductX'},
* {dataIndex: 'ParisProductY', header: 'ProductY'}
* ]
*/
var grid = new Ext.grid.GridPanel({
renderTo: 'column-group-grid',

title: 'Sales By Location',
width: 1000,
height: 400,
store: new Ext.data.ArrayStore({
fields: fields,
data: data
}),

columns: columns,
viewConfig: {
forceFit: true
},
plugins: group
});
});

Condor
28 Nov 2010, 11:14 PM
What exactly doesn't work?

khushi
28 Nov 2010, 11:38 PM
when i am adding new column "New" in grid.then it adds 'ProductX' & 'ProductY' to that column. & i don't want to add 'ProductX' & 'ProductY' in "New" column.

Condor
28 Nov 2010, 11:45 PM
Forget the autogenerated columns in the example for a moment and tell us which columns and which groups you actually want.

khushi
29 Nov 2010, 12:42 AM
i want to create 4 column in my grid:
1.ID
2.Marks :i have divided marks into 3 sub-columns i.e. (Col1, Col2,Col3) please refer the below snapshot
3.other
4.col
and i want grouping in Marks field.

Condor
29 Nov 2010, 1:06 AM
var grid = new Ext.grid.GridPanel({
plugins: [new Ext.ux.grid.ColumnHeaderGroup({
rows: [
[
{},
{colspan: 3, header: 'Marks'},
{},
{}
]
]
})],
columns: [
{header: 'ID', dataIndex: '...'},
{header: 'Col1', dataIndex: '...'},
{header: 'Col2', dataIndex: '...'},
{header: 'Col3', dataIndex: '...'},
{header: 'other', dataIndex: '...'},
{header: 'col', dataIndex: '...'}
],
...
});

khushi
29 Nov 2010, 2:54 AM
thanks for reply

how should i store data into grid ? i am using data.push() function but it's not working

/*!
* Ext JS Library 3.3.0
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function() {

fields = [],
columns = [],
data = [],


/* arr = [['3m Co',71.72,0.02,0.03,'4/2 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'4/1 12:00am', 'Manufacturing']];
/* for(var i = 0; i < 34; ++i){
arr.push('hg');
}*/
arr=[600000,900000,300000,1100000,100000,500000];
data.push(arr);



/*
* Example method that generates:
* 1) The column configuration for the grid
* 2) The column grouping configuration
* 3) The data for the store
* 4) The fields for the store
*/
function generateConfig(){


}

// Run method to generate columns, fields, row grouping
//generateConfig();


/*
* continentGroupRow at this point is:
* [
* {header: 'Asia', colspan: 4, align: 'center'},
* {header: 'Europe', colspan: 6, align: 'center'}
* ]
*
* cityGroupRow at this point is:
* [
* {header: 'Beijing', colspan: 2, align: 'center'},
* {header: 'Tokyo', colspan: 2, align: 'center'},
* {header: 'Berlin', colspan: 2, align: 'center'},
* {header: 'London', colspan: 2, align: 'center'},
* {header: 'Paris', colspan: 2, align: 'center'}
* ]
*/

/*
* fields at this point is:
* [
* {type: 'int', name: 'BeijingProductX'},
* {type: 'int', name: 'BeijingProductY'},
* {type: 'int', name: 'TokyoProductX'},
* {type: 'int', name: 'TokyoProductY'},
* {type: 'int', name: 'BerlinProductX'},
* {type: 'int', name: 'BerlinProductY'},
* {type: 'int', name: 'LondonProductX'},
* {type: 'int', name: 'LondonProductY'},
* {type: 'int', name: 'ParisProductX'},
* {type: 'int', name: 'ParisProductY'}
* ]
*
* columns at this point is:
* [
* {dataIndex: 'BeijingProductX', header: 'ProductX'},
* {dataIndex: 'BeijingProductY', header: 'ProductY'},
* {dataIndex: 'TokyoProductX', header: 'ProductX'},
* {dataIndex: 'TokyoProductY', header: 'ProductY'},
* {dataIndex: 'BerlinProductX', header: 'ProductX'},
* {dataIndex: 'BerlinProductY', header: 'ProductY'},
* {dataIndex: 'LondonProductX', header: 'ProductX'},
* {dataIndex: 'LondonProductY', header: 'ProductY'},
* {dataIndex: 'ParisProductX', header: 'ProductX'},
* {dataIndex: 'ParisProductY', header: 'ProductY'}
* ]
*/
alert(data);
var grid = new Ext.grid.GridPanel({

plugins: [new Ext.ux.grid.ColumnHeaderGroup({
rows: [
[
{},
{colspan: 3, header: 'Marks'},
{},
{}
]
]
})],
fields:[{name:'Id'},
{name:'MarksCol1'},
{name:'MarksCol1'},
{name:'MarksCol2'},
{name:'other'},
{name:'col'}],
columns: [
{header: 'ID', dataIndex: 'id', sortable: true,},
{header: 'Col1', dataIndex: 'Marks' ,sortable: true,},
{header: 'Col2', dataIndex: 'Marks' ,sortable: true,},
{header: 'Col3', dataIndex: 'Marks' ,sortable: true,},
{header: 'other', dataIndex: 'other' ,sortable: true,},
{header: 'col', dataIndex: 'col', sortable: true,}
],


/* data:[
{ID:'d',
MarksCol1:'d',
MarksCol2:'d',
MarksCol3:'d',
other:'d',
col:'d'}
],*/
renderTo: 'column-group-grid',
title: 'Sales By Location',
width: 1000,
height: 400,
store: new Ext.data.ArrayStore({
fields: fields,
data: data
}),

viewConfig: {
forceFit: true
},

});
});

Condor
29 Nov 2010, 4:16 AM
var grid = new Ext.grid.GridPanel({
plugins: [new Ext.ux.grid.ColumnHeaderGroup({
rows: [
[
{},
{
colspan: 3,
header: 'Marks'
},
{},
{}
]
]
})],
columns: [{
header: 'ID',
dataIndex: 'id',
sortable: true
},
{
header: 'Col1',
dataIndex: 'MarksCol1',
sortable: true
},
{
header: 'Col2',
dataIndex: 'MarksCol2',
sortable: true
},
{
header: 'Col3',
dataIndex: 'MarksCol3',
sortable: true
},
{
header: 'other',
dataIndex: 'other',
sortable: true
},
{
header: 'col',
dataIndex: 'col',
sortable: true
}],
renderTo: 'column-group-grid',
title: 'Sales By Location',
width: 1000,
height: 400,
store: new Ext.data.ArrayStore({
fields: [{
name: 'Id'
},
{
name: 'MarksCol1'
},
{
name: 'MarksCol1'
},
{
name: 'MarksCol2'
},
{
name: 'other'
},
{
name: 'col'
}],
data: [
['d', 'd', 'd', 'd', 'd', 'd']
]
}),
viewConfig: {
forceFit: true
}
});

khushi
29 Nov 2010, 10:29 PM
thanks Condor,

Now i am trying to add paging & filtering feature to grid. i got some errors :

1. i have added paging toolbar on grid. paging toolbar is visible but it's not working, i got error Line 7 : b is null in ext-all.js.

2. Column HeaderGroup is working fine and filters are not giving expected result.
i got error : Line 7: this.proxy is undefined (ext-all.js)


please help me.

Condor
29 Nov 2010, 11:35 PM
1a. Your grid and pagingtoolbar are not using the same store (specifying store:data will create a new store each time). First create a store and then use it in both the grid and the pagingtoolbar.
1b. Ext only supports remote paging (the server is responsible for splitting the data into pages). If you want to use local paging I recommend using the PagingStore user extension.

2. You have to configure the GridFilters plugin with local:true to make it work on local data.

khushi
30 Nov 2010, 2:19 AM
hi Condor,

thanks for the reply

Now Grid filters are working fine.but still i am unable to create paging toolbar. i have used following code:

bbar: new Ext.PagingToolbar({
store: store,
pageSize: 2

})

still i got js error : b is null & this.proxy is undefined.

please help me.

Condor
30 Nov 2010, 2:24 AM
And how is your store defined now?

khushi
30 Nov 2010, 2:30 AM
store is :

var store=new Ext.data.ArrayStore({
fields: [{
name: 'id'
},
{
name: 'MarksCol1'
},
{
name: 'MarksCol2'
},
{
name: 'MarksCol3'
},
{
name: 'other'
},
{
name: 'col'
}],
data:
[ [ 'A1', 'a', 'a', 'a', 'a','a','a'],
[ 'b', 'ddsf', 'dsdf', 'dsdf', 'dsdf','ddf','ddsf'],
[ 'c', 'd', 'd', 'd', 'd','d','d'],
[ 'd', 'ddsf', 'dsdf', 'dsdf', 'dsdf','ddf','ddsf'],
[ 'e', 'd', 'd', 'd', 'd','d','d'],
[ 'f', 'ddsf', 'dsdf', 'dsdf', 'dsdf','ddf','ddsf'],
[ 'g', 'd', 'd', 'd', 'd','d','d'],
[ 'h', 'ddsf', 'dsdf', 'dsdf', 'dsdf','ddf','ddsf'],
[ 'i', 'd', 'd', 'd', 'd','d','d'],
[ 'ddsf', 'ddsf', 'dsdf', 'dsdf', 'dsdf','ddf','ddsf'],
[ 'd', 'd', 'd', 'd', 'd','d','d'],
[ 'ddsf', 'ddsf', 'dsdf', 'dsdf', 'dsdf','ddf','ddsf']


]

});

Condor
30 Nov 2010, 2:33 AM
I already said that if you want to use paging on local data, you will need to use a PagingArrayStore (download the PagingStore user extension).

khushi
30 Nov 2010, 2:41 AM
hi Condor,

Thank You.Now it's working fine.