PDA

View Full Version : Ext.ux.grid.RowExpander expand issue



robertoroberto
21 Aug 2009, 11:25 PM
Hi
I try to use the Ext.ux.grid.RowExpander in order to have a grid with expandable rows.
But I have 2 grid in my layout.
The first one in the top of the screen and the second one buttom (fit the screen).
The issue is:
When I expand a row, the grid is "not" expanded too and so I cannot see the entire grid.

I believe It is necessary to implements at row Expand/collapse something similar when the user collapse/expand the gridpanel .
In fact, if I collapse and expand the Grid, I can read all (also the secondo row)

But I'm not able to do it...
I don't know if we can consider this as a bug.
Any help ?
Get a look to screenshots

Thanks



<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="lib/extjs/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="lib/extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="lib/extjs/ux/ux-all.js"></script>
<style>
.x-tool-float-left{float : left}
.noPadding{
padding:0;
}
</style>
<script>
var iABSMainPanel = null;
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', true],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am', true],
['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', false],
['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am', false],
['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', false],
['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', false],
['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', false],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']];
// create the data store
var store = new Ext.data.ArrayStore({
fields: [{
name: 'company'
},
{
name: 'price',
type: 'float'
},
{
name: 'change',
type: 'float'
},
{
name: 'pctChange',
type: 'float'
},
{
name: 'lastChange',
type: 'date',
dateFormat: 'n/j h:ia'
},
{
name: 'selected',
type: 'boolean'
}]
});
store.loadData(myData);
function buildWireframeAccordion() {
var vTitlePanel = new Ext.Panel({
id: 'ABS_main-panel',
region: 'center',
title: 'Test Row Expander Plugin',
margins: '2 5 5 0',
border: false,
items: [],
layout: 'border'
});
var vDataPanel = new Ext.Panel({
layout: 'fit',
region: 'center',
split: true,
items: []
});
var vInnerPanel = new Ext.Panel({
layout: 'border',
split: true,
items: []
});
var vCustomStore = new Array();
vCustomStore.push("code");
vCustomStore.push("msg");
vCustomStore.push("det");
var vStore = new Ext.data.JsonStore({
root: 'list',
fields: vCustomStore
});
var vErrors = eval('({"list":[{"code":"EABASGEN0017","msg":"Group with key xyz not found.","det":"Detailed error message<br>bla bla bla"},{"code":"EABASABS0003","msg":"Job Queue sdsdsd does not exist","det":"Another Detailed error message<br>bla bla bla<br>bla bla bla<br>bla bla blab"}]})');
// Loads data
vStore.loadData(vErrors);
var vExpander = new Ext.ux.grid.RowExpander({
tpl: new Ext.Template('<b>Code:</b> {code}<br>', '<b>Details:</b> {det}')
});
var vSM = new Ext.grid.RowSelectionModel({
singleSelect: true
});
var vCM = new Ext.grid.ColumnModel({
defaults: {
sortable: false
},
columns: [vExpander, {
id: 'msg',
dataIndex: 'msg'
}]
});
var vErrorPanel = new Ext.grid.GridPanel({
store: vStore,
cm: vCM,
viewConfig: {
forceFit: true
},
sm: vSM,
autoExpandColumn: 'msg',
enableColumnHide: false,
enableColumnMove: false,
enableColumnResize: true,
hideHeaders: true,
columnLines: true,
collapsible: true,
region: 'north',
autoHeight: true,
plugins: vExpander,
animCollapse: false,
title: 'Errors',
iconCls: 'icon-grid'
});
vInnerPanel.add(vErrorPanel);
var vGridPanel = new Ext.Container({
id: 'ABS_GridPanel',
layout: 'fit',
region: 'center',
split: true,
items: []
});
vInnerPanel.add(vGridPanel);
vDataPanel.add(vInnerPanel);
buildDataGrid(vGridPanel);
vTitlePanel.add(vDataPanel);
return vTitlePanel;
}
function buildDataGrid(aGridPanel) {
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [{
id: 'company',
header: "Company",
width: 160,
sortable: true,
dataIndex: 'company'
},
{
header: "Price",
width: 75,
sortable: true,
renderer: 'usMoney',
dataIndex: 'price'
},
{
header: "Change",
width: 75,
sortable: true,
dataIndex: 'change'
},
{
header: "% Change",
width: 75,
sortable: true,
dataIndex: 'pctChange'
},
{
header: "Last Updated",
width: 85,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
},
{
header: "Selected",
dataIndex: 'selected',
editable: true
}],
stripeRows: true,
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
aGridPanel.add(grid);
}
Ext.onReady(function () {
iABSMainPanel = buildWireframeAccordion();
var vView = new Ext.Viewport({
layout: 'border',
items: [iABSMainPanel]
});
})

</script>
</head>
</body>
</body>
</html>

Condor
22 Aug 2009, 2:35 AM
An autoHeight:true grid doesn't signal when it changes size. You will manually have to resize the grid container to fit the grid every time it changes size.

robertoroberto
22 Aug 2009, 5:05 AM
Can you give me an idea (what override) in order to do it pls?
ty

Condor
22 Aug 2009, 5:15 AM
Try (untested):

vExpander.on({
expand: vInnerPanel.doLayout,
collapse: vInnerPanel.doLayout,
scope: vInnerPanel
});

robertoroberto
22 Aug 2009, 5:33 AM
Ty Condor.
I do it in another way (but it very similar)



vExpander.on('expand', function(aRowExpander, aRecord, aBody, aRowIndex){
aRowExpander.grid.ownerCt.doLayout();
});
vExpander.on('collapse', function(aRowExpander, aRecord, aBody, aRowIndex){
aRowExpander.grid.ownerCt.doLayout();
});


Can I suggest to add a configurable feature in order execute doLayout function on the ownerCt as standard ?

e.g.

adding a config property doOwnerCtLayout to Ext.ux.grid.RowExpander
and change collapseRow and expandRow function adding the red lines.



expandRow : function(row){
if(typeof row == 'number'){
row = this.grid.view.getRow(row);
}
var record = this.grid.store.getAt(row.rowIndex);
var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
if(this.beforeExpand(record, body, row.rowIndex)){
this.state[record.id] = true;
Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
if(this.doOwnerCtLayout)
this.grid.ownerCt.doLayout();
this.fireEvent('expand', this, record, body, row.rowIndex);
}
},
collapseRow : function(row){
if(typeof row == 'number'){
row = this.grid.view.getRow(row);
}
var record = this.grid.store.getAt(row.rowIndex);
var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
if(this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false){
this.state[record.id] = false;
Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
if(this.doOwnerCtLayout)
this.grid.ownerCt.doLayout();
this.fireEvent('collapse', this, record, body, row.rowIndex);
}
}


Ty for your support