PDA

View Full Version : Problem using RowExpander multiple times



sceilig
7 Jun 2008, 3:39 PM
I have two GridPanel instances in my script, and for each one I want to use the RowExpander plugin to display extra information about each row in the grid. An example of that plugin in use on the Ext JS website is here.
http://extjs.com/deploy/dev/examples/grid/grid3.html

I can setup one RowExpander to work fine for one grid, but the second time I try and use it, it doesnt work properly (the + icon doesnt expand any content). Here is my code:



var expander = new xg.RowExpander({
tp1 : new Ext.Template('Expanded Information for first grid goes here')
});

var expander2 = new xg.RowExpander({
tp1 : new Ext.Template('Expanded Information for second grid goes here')
});

grid = new Ext.grid.GridPanel(
{
store: ds, // use the datasource
cm: new xg.ColumnModel(
[
expander,
{header: "Name", width: 100, sortable: true, dataIndex: 'name'},
{header: "Company", width: 100, sortable: true, dataIndex: 'company'}
]
),
plugins: expander,
collapsible: true,
width:400,
height: 300,
stripeRows:true,
title:'First Grid',
iconCls:'icon-grid',
renderTo: "grid1"
});
}

grid2 = new Ext.grid.GridPanel(
{
store: ds2, // use the datasource
cm: new xg.ColumnModel(
[
expander2,
{header: "Name2", width: 100, sortable: true, dataIndex: 'name2'},
{header: "Company2", width: 100, sortable: true, dataIndex: 'company2'}
]
),
plugins: expander2,
collapsible: true,
width:400,
height: 300,
stripeRows:true,
title:'Second Grid',
iconCls:'icon-grid',
renderTo: "grid2"
});
}




I wonder if part of my problem is with the RowExpander js file, it seems there is a hardcoded call on line 39 to id: 'expander' so Im not sure how I could use 2 expander instances??
http://extjs.com/deploy/dev/examples/grid/RowExpander.js

Spirit
10 Jun 2008, 3:25 AM
You identified the problem correctly :)

You only need to give your 2 expanders unique ids and it should work:


var expander = new xg.RowExpander({
tp1 : new Ext.Template('Expanded Information for first grid goes here'),
id: 'expander'
});

var expander2 = new xg.RowExpander({
tp1 : new Ext.Template('Expanded Information for second grid goes here'),
id: 'expander2'
});


Spirit

sceilig
13 Jun 2008, 8:47 PM
Thanks Spirit - should have thought of including id's.

I tried it, but still having difficulty getting the 2 expanders to work ok together. Here is my code.


var expander = new xg.RowExpander({
id : 'expander1',
tp1 : new Ext.Template('Expanded Information for first grid goes here')
});

var expander2 = new xg.RowExpander({
id : 'expander2',
tp1 : new Ext.Template('Expanded Information for second grid goes here')
});

grid = new Ext.grid.GridPanel(
{
store: ds, // use the datasource
cm: new xg.ColumnModel(
[
expander,
{header: "Name", width: 100, sortable: true, dataIndex: 'name'},
{header: "Company", width: 100, sortable: true, dataIndex: 'company'}
]
),
plugins: expander,
collapsible: true,
width:400,
height: 300,
stripeRows:true,
title:'First Grid',
iconCls:'icon-grid',
renderTo: "grid1"
});
}

grid2 = new Ext.grid.GridPanel(
{
store: ds2, // use the datasource
cm: new xg.ColumnModel(
[
expander2,
{header: "Name2", width: 100, sortable: true, dataIndex: 'name2'},
{header: "Company2", width: 100, sortable: true, dataIndex: 'company2'}
]
),
plugins: expander2,
collapsible: true,
width:400,
height: 300,
stripeRows:true,
title:'Second Grid',
iconCls:'icon-grid',
renderTo: "grid2"
});
}



When I do the above, nothing happens when I click on the + for the expander in the second grid. Of course if I change "plugins: expander," for the second grid, the expander does work, but displays the html from my first expander.

Any ideas?

Spirit
15 Jun 2008, 11:52 PM
Here is a (tested) working example:



Ext.onReady(function(){

Ext.QuickTips.init();

var xg = Ext.grid;

// shared reader
var reader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'industry'},
{name: 'desc'}
]);

////////////////////////////////////////////////////////////////////////////////////////
// Grid 1
////////////////////////////////////////////////////////////////////////////////////////



var expander = new Ext.grid.RowExpander({
id:'test1',
tpl : new Ext.Template('Expanded Information for first grid goes here')
});



var expander2 = new Ext.grid.RowExpander({
id:'test',
tpl : new Ext.Template('Expanded Information for second grid goes here')
});

var grid1 = new xg.GridPanel({
store: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
cm: new xg.ColumnModel([
expander,
{id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},
{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 20, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]),
viewConfig: {
forceFit:true
},
width: 600,
height: 300,
plugins: expander,
collapsible: true,
animCollapse: false,
title: 'Expander Rows, Collapse and Force Fit',
iconCls: 'icon-grid',
renderTo: 'grid1'
});

var grid2 = new xg.GridPanel({
store: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
cm: new xg.ColumnModel([
expander2,
{id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},
{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 20, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]),
viewConfig: {
forceFit:true
},
width: 600,
height: 300,
plugins: expander2,
collapsible: true,
animCollapse: false,
title: 'Expander Rows, Collapse and Force Fit',
iconCls: 'icon-grid',
renderTo: 'grid2'
});

});



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


Hope it helps :)

Sang
17 Jun 2008, 1:23 AM
Spirit,
Is it possible to put the second row expander inside the first row expander?

Spirit
17 Jun 2008, 1:54 AM
No, it is not possible!

You will have to put a new grid in there which could have an expander again, but it is not so simple to put a grid in expander but there are some threads which are dealing with this problem ... ;)

sceilig
21 Jun 2008, 3:24 PM
Thanks Spirit - your example does work properly. I have taken a fine tooth comb to comparing your example to my implementation but I just dont see the difference that would cause my second expander not to display any information (and not produce any errors either).

But you have shown me that it is possible so I will restructure my code and build it up from scratch to see if that will help.

Thanks!

akrherz
24 Jun 2008, 2:21 PM
Thanks Spirit - your example does work properly. I have taken a fine tooth comb to comparing your example to my implementation but I just dont see the difference that would cause my second expander not to display any information (and not produce any errors either).

But you have shown me that it is possible so I will restructure my code and build it up from scratch to see if that will help.

Thanks!

Hi,

I had the exact same issue. For whatever reason, when I used an id other than 'expander' and 'expander2', it would work. Someday I will figure out why :)

daryl

alaska
23 Aug 2008, 6:25 AM
Hi!
- have you ever expect some problem collapsing with multiple grids?
- other problem ive is that when i expand child grid that has another child, the icon is (-) and not (+)

Thanks