PDA

View Full Version : Hierarchal grid with check boxes



m4mallu
20 Mar 2012, 10:57 PM
Hi,

I am trying to create a hierarchal grid using Ext.grid.Panel and its plugins.

My requirement is like below.

32958


But when I click on the child grid itís throwing an error

32959

I am adding my code here




Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.ux.RowExpander',
'Ext.selection.CheckboxModel'
]);

Ext.onReady(function() {

var mydata = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', false],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am', false],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am', false],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am', false],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am', false],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am', false],
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am', false],
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am', false],
['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am', false],
['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am', false],
['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am', true],
['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am', true],
['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am', false],
['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am', false],
['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am', false],
['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am', false],
['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am', false],
['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am', false],
['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am', true],
['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am', false],
['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am', false],
['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am', false],
['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am', false],
['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am', true],
['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am', false],
['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am', false],
['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am', false],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am', true],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am', false]
];

var store = Ext.create('Ext.data.ArrayStore', {
idIndex: 0,
fields: [
{ name: 'company' },
{ name: 'price', type: 'float' },
{ name: 'change', type: 'float' },
{ name: 'pctChange', type: 'float' },
{ name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' }

],
data: mydata
});

var storeSub = Ext.create('Ext.data.ArrayStore', {
idIndex: 0,
fields: [
{ name: 'testcolumn', type: 'bool' },
{ name: 'company' },
{ name: 'price', type: 'float' },
{ name: 'change', type: 'float' }
],
data: mydata
});

var smCheckBox = new Ext.selection.CheckboxModel({
singleSelect: false
});

var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{
text: 'Company',
sortable: false,
dataIndex: 'company'
},
{
text: 'Price',
width: 75,
sortable: true,
dataIndex: 'price'
},
{
text: 'Change',
width: 75,
sortable: true,
dataIndex: 'change'
},
{
text: '% Change',
width: 75,
sortable: true,
dataIndex: 'pctChange'
},
{
text: 'Last Updated',
width: 85,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}
],
selModel: smCheckBox,
plugins: [{ ptype: 'rowexpander', rowBodyTpl: ['<div class="sub-of-nested-example"></div>']}],
columnLines: true,
height: 350,
width: 450,
iconCls: 'icon-grid',
title: 'Nested Grids',
renderTo: 'nested-example'
});

grid.view.on('expandbody', function(rowNode, record, expandRow) {

var smSubCheckBox = new Ext.selection.CheckboxModel({
singleSelect: false
});

var subgrid = Ext.get(rowNode).down('.sub-of-nested-example');
var grid2 = Ext.create('Ext.grid.Panel', {
store: storeSub,
columns: [
{
text: 'Company',
dataIndex: 'company',
width: 100
},
{
text: 'Price',
width: 75,
dataIndex: 'price'
},
{
text: 'Change',
width: 75,
dataIndex: 'change'
}
],
selModel: smSubCheckBox,
columnLines: true,
height: 350,
width: 275,
iconCls: 'icon-grid',
renderTo: subgrid,
injectCheckbox:true
});

});
grid.view.on('collapsebody', function(rowNode, record, expandRow) {
Ext.get(expandRow).down('.sub-of-nested-example').down('div').destroy();
});

});

Please help

mitchellsimoens
21 Mar 2012, 8:53 AM
This is probably due to that the outer grid is capturing the click also.

m4mallu
22 Mar 2012, 5:03 AM
user must be able select child grid rows.
can u give me some ideas with code . Because i am a beginner only.

mitchellsimoens
22 Mar 2012, 5:09 AM
The way I did it in Ux.grid.plugin.AssociationRowExpander was to return false in the beforeselect event of the outer grid:


outerGrid.on('beforeselect', function(selModel, rec) {
return !!rec;
});

https://github.com/mitchellsimoens/Ux.grid.plugin.AssociationRowExpander/