PDA

View Full Version : Integration of ColumnHeaderGroup and LockingGridView



krishna62
25 Apr 2011, 12:42 AM
Hi,

we want to integrate ColumnHeaderGroup and LockingGridView together to the Gridpanel.
Any one please provide an example for the same.

also I want to add filterRow for only for the last row(in columngrouping). when i tried with the below example its not working. the filter row is getting add to the firstrow of the cloumn.

Ext.onReady(function() {

var grdMiddleHeader = [];
var grdTopHeader = [];
/// NOTE: colspan directly deals with the column Model definition of the grid.

grdTopHeader.push({ header: '', align: 'center', colspan:2 }); //
grdTopHeader.push({ header: 'Hardware', align: 'center', colspan: 6});
grdTopHeader.push({ header: 'Software', align: 'center', colspan: 10});

grdMiddleHeader.push({ header: ' ', align: 'center', colspan: 1 });
grdMiddleHeader.push({ header: ' Name', align: 'center', colspan: 1 });
grdMiddleHeader.push({ header: 'Param1', align: 'center', colspan: 1 });
grdMiddleHeader.push({ header: 'Param2', align: 'center', colspan: 1 });
grdMiddleHeader.push({ header: 'Param3', align: 'center', colspan: 1 });
grdMiddleHeader.push({ header: 'Param4', align: 'center', colspan: 1 });
grdMiddleHeader.push({ header: 'Param5', align: 'center', colspan: 1 });
grdMiddleHeader.push({ header: 'Param6', align: 'center', colspan: 1 });
grdMiddleHeader.push({ header: 'Param7', align: 'center', colspan: 2 });
grdMiddleHeader.push({ header: 'Param8', align: 'center', colspan: 2 });
grdMiddleHeader.push({ header: 'Param9', align: 'center', colspan: 2 });
grdMiddleHeader.push({ header: 'Param10', align: 'center', colspan: 2 });
grdMiddleHeader.push({ header: 'Param11', align: 'center', colspan: 2 });

var grdMiddleHeaderGroup = new Ext.ux.grid.ColumnHeaderGroup({
rows: [grdTopHeader, grdMiddleHeader]
});
var filterRow = new Ext.ux.grid.FilterRow({
// automatically refilter store when records are added
refilterOnStoreUpdate: true
});
var gridCM = new Ext.grid.ColumnModel({
defaults:{sortable: true}
, columns: [{ header: $.i18n._('Id') ,dataIndex :'Id' ,filter:{} ,width : 60 ,type:'integer' ,component:'textbox'}
,{ header: $.i18n._('Name') ,dataIndex :'Name' ,filter:{} ,width : 80 ,type:'string' ,component:'textbox' }
,{ header: $.i18n._('Param11') ,dataIndex :'Test1' ,filter:{} ,width : 50 ,type:'string' ,component:'textbox'}
,{ header: $.i18n._('Param12') ,dataIndex :'Test2' ,filter:{} ,width : 50 ,type:'string' ,component:'textbox'}
,{ header: $.i18n._('Param21') ,dataIndex :'Test3' ,filter:{} ,width : 50 ,type:'string' ,component:'textbox' }
,{ header: $.i18n._('Param22') ,dataIndex :'Test4' ,filter:{} ,width : 50 ,type:'string' ,component:'textbox'}
,{ header: $.i18n._('Param31') ,dataIndex :'Test5' ,filter:{} ,width : 50 ,type:'string' ,component:'textbox' }
,{ header: $.i18n._('Param32') ,dataIndex :'Test6' ,filter:{} ,width : 50 ,type:'string' ,component:'textbox'}
,{ header: $.i18n._('Param41') ,dataIndex :'Test7' ,filter:{} ,width : 50 ,type:'string' ,component:'textbox'}
,{ header: $.i18n._('Param42') ,dataIndex :'Test8' ,filter:{} ,width : 50 ,type:'string' ,component:'textbox'}
,{ header: $.i18n._('Param51') ,dataIndex :'Test9' ,filter:{} ,width : 50 ,type:'string' ,component:'textbox' }
,{ header: $.i18n._('Param52') ,dataIndex :'Test10' ,filter:{} ,width : 50 ,type:'string' ,component:'textbox'}
,{ header: $.i18n._('Param61') ,dataIndex :'Test11' ,filter:{} ,width : 50 ,type:'string' ,component:'textbox' }
,{ header: $.i18n._('Param62') ,dataIndex :'Test12' ,filter:{} ,width : 50 ,type:'string' ,component:'textbox' }
,{ header: $.i18n._('Param71') ,dataIndex :'Test13' ,filter:{} ,width : 50 ,type:'string' ,component:'textbox'}
,{ header: $.i18n._('Param72') ,dataIndex :'Test14' ,filter:{} ,width : 50 ,type:'string' ,component:'textbox'}
,{ header: $.i18n._('Param81') ,dataIndex :'Test15' ,filter:{} ,width : 50 ,type:'string' ,component:'textbox' }
,{ header: $.i18n._('Param82') ,dataIndex :'Test16' ,filter:{} ,width : 50 ,type:'string' ,component:'textbox' }
]
});

var gridStore = new Ext.data.ArrayStore({
fields :[]
, data: ['1', 'Node1', '1.2', '1.2', '1.2', '1.2', '1.2', '1.2', '1.2.3', '1.2.3', '1.2.3', '1.2.3', '1.2.3', '1.2.3', '1.2.3', '1.2.3', '1.2.3', '1.2.3']
});

var grid = new Ext.grid.GridPanel({
cm: gridCM
, store: gridStore
, title: 'Your grid'
, frame: true
, width: 1000
, height: 400
, renderTo: 'divgrid'
, stripeRows: true
, plugins: [grdMiddleHeaderGroup,filterRow]
});

});


Regards,
Krishna

krishna62
26 Apr 2011, 8:12 PM
can some one please help me on this?