PDA

View Full Version : Grid width 100% in TableLayout



JustinH
21 Jul 2009, 8:59 PM
So I have a table layout in the center region of a border layout. One of the panels of the table is a GridPanel with its width set to 100%. For whatever reason, the result is that the GridPanel's width is set to an absurd number (2757 px in the most recent case).

The layout code:



Application.layout.Dashboard = Ext.extend(Ext.Panel, {
margins: '35 5 5 0'
,id: 'dashboard'
,layout: 'table'
,title: 'Dashboard'
,width: '100%'
,layoutConfig: {columns: 5}
,initComponent : function(){
Ext.apply(this, {
items: [
this.monTrendPortlet()
,this.defaultPortlet()
,this.defaultPortlet()
,this.defaultPortlet()
,this.registerPortlet()
,this.defaultPortlet()
,this.defaultPortlet()


]
,defaults: {frame: true, width: '100%'}
});
Application.layout.Dashboard.superclass.initComponent.apply(this, arguments);
}

,defaultPortlet : function(width) {
colspan = width || 1;

var portlet = {
title: 'A panel'
,html: 'test'
,height: 150
,frame: true
};

return portlet;
}

,registerPortlet: function() {
grid = new Application.registers.GeneralLedger();

var portlet = {
colspan: 3
,id: 'register'
,height: 150
,items: [grid]
,frame: true

};

return portlet;
}


It ain't pretty but the defaultPortlets are just there for the sake of "filling" until I figure out the grid issue. Application.registers.GeneralLedger(); is nothing more than a very simple grid with "width: 100%" (in fact, it's a copy of one of Saki's examples for the sake of filler).



Application.registers.GeneralLedger = Ext.extend(Ext.grid.GridPanel, {
initComponent : function() {

var config = {
store: new Ext.data.SimpleStore({
id: 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'}
,{name: 'industry'}
,{name: 'desc'}
]

,data: [
['3m Co',71.72,0.02,0.03,'8/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,'10/1 12:00am', 'Manufacturing'],
['American Express Company',52.55,0.01,0.02,'9/1 10:00am', 'Finance'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 11: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']
]
})

,columns:[
{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'}
]

,width: '100%'

}; // eo config object

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

// call parent
Application.registers.GeneralLedger.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
});


(Off topic: for those wondering they are classes out of sheer laziness, so no, I don't intend on having multiple instances and yes I will fix that later :D).

I've poked around with Firebug and the problem starts with a ext generated div element:

<div id="ext-gen55" class="x-grid3" hidefocus="true" style="width: 2745px; height: 46px;">

Various sub-elements use this same massive width.

I discovered that:

#dashboard .x-table-layout-cell {width: 100%;}

Brings the grid within the view, but it messes up nearly every other cell along with it (one cell gets huge and the other 3 in the 4 column table shrink).

If I have to I will set a hard value, but that isn't ideal for this particular situation so I'm hoping someone can see where my mistake is.

JustinH
21 Jul 2009, 9:06 PM
Almost forgot running ExtJS 3.0 error persists in all browsers I've tested (Firefox 3.5, IE 8, Safari)

JustinH
22 Jul 2009, 12:21 AM
#dashboard .x-table-layout td

Somehow I missed the above. Oh well :P...

For the record setting the above to "width: 20%" does the trick.

mrusinak
9 Mar 2010, 2:27 PM
Hello, I'm having a similar issue that I have yet to figure out how to tweak correctly. The problem is the same - a GridPanel child in a TableLayout parent whose width is set to 100% isn't sized correctly.

A simple example that creates a TableLayout viewport with 3 columns, and five children:


<html>
<head>
<link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css" />
<script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./ext/ext-all.js"></script>

<style type="text/css">
.ux-dash-cell {
padding: 5px;
vertical-align: top;
}
</style>

<script type="text/javascript">
function MakeGridPanel()
{
return new Ext.grid.GridPanel({
colspan: 2,
title: 'GridPanel (Width 2)',
id: 'id-my-grid',
border: true,
store: new Ext.data.ArrayStore({
fields: [
{name: 'a' },{name: 'b' },{name: 'c' }
],
data: [
['Bigger field', 'Info #1', 'Info #2']
]
}),
columns: [
{
id: 'id-big-field',
sortable: false,
menuDisabled: true,
header: 'Something',
dataIndex: 'a',
width: 200
},
{
sortable: false,
menuDisabled: true,
header: 'Foo',
dataIndex: 'b',
width: 100,
fixed: true
},
{
sortable: false,
menuDisabled: true,
header: 'Bar',
dataIndex: 'c',
width: 100,
fixed: true
}
],
autoExpandColumn: 'id-big-field',
viewConfig: {
scrollOffset: 1,
forceFit: true
}
});
}

Ext.onReady(function(){
view = new Ext.Viewport({
id: 'id-my-view',
layout: 'table',
layoutConfig: {
columns: 3,
tableAttrs: {
style: {
// Commenting out this line will have the grid sized
// correctly, but the table won't fill the horizontal space
width: '100%'
}
}
},
defaults: {
cellCls: 'ux-dash-cell',
border: false
},
items: [
MakeGridPanel(),
new Ext.Panel({ title: 'Top-RightContainer',html: 'Some stuff' }),
new Ext.Panel({ title: 'Bottom-Left Container',html: 'More Stuff' }),
new Ext.Panel({ title: 'Bottom-Center Container',html: 'Generic Stuff' }),
new Ext.Panel({ title: 'Bottom-Right Container',html: 'Random Stuff' })
]
});
});
</script>
</head>
<body>
</body>
</html>


Note - I broke the GridPanel creation into a wrapper function just to make it easier to read.

When tableAttrs.style.width isn't commented out, the GridPanel takes up the full page width and pushes the 3rd column off the viewable area. When commented out, it behaves correctly, but then the table doesn't fill the space.

I'm new enough to Ext (and I'm still rather new to web development in general) that I can't figure how to get it to behave correctly.

Oh, and the desired behavior is that all 3 columns are visible on the page, span the full width of the page, and resize correctly when the browser is resized.

Any help is greatly appreciated, thanks!

Animal
9 Mar 2010, 2:33 PM
Oh no.

What UI effect do you want to achieve?

mrusinak
9 Mar 2010, 2:42 PM
Generally speaking, a page that has 5 subsections, each with their own header / title. One section will be display a small list (about 10 items) of information, which I thought a Grid would be perfect for, and would span 2 columns to make it the most prominent (and give it the most room):



+-----------------+
| | |
+----------+------+
| | | |
+----+-----+------+
I started playing around with using a just another Panel with another TableLayout instead of a GridPanel for the 'big' section, but I wanted to make sure it wasn't something I was doing incorrectly or missing.

Does that answer your question?

mrusinak
10 Mar 2010, 11:46 AM
Small followup -

I have it mostly working the way I want to by extending a normal panel and replacing the template:



Ext.namespace('Ext.ux');
Ext.ux.myGrid = Ext.extend(Ext.Panel, {
initComponent: function() {
var template = new Ext.XTemplate(
'<table style="width:100%;" cellpadding="0" cellspacing="0">',
'<thead class="x-grid3-header">',
'<tr class="x-grid3-hd-row">',
'<td><div class="x-grid3-hd-inner">',
'Something', // Header for Column 1
'</div></td>',
'<td><div class="x-grid3-hd-inner">',
'Foo', // Header for Column 2
'</div></td>',
'<td><div class="x-grid3-hd-inner">',
'Bar', // Header for Column 3
'</div></td>',
'</tr>',
'</thead>',
'<tbody>',
'<tpl for=".">',
'<tr class="x-grid3-row">',
'<td><div class="x-grid3-cell-inner">{a}</div></td>',
'<td><div class="x-grid3-cell-inner">{b}</div></td>',
'<td><div class="x-grid3-cell-inner">{c}</div></td>',
'</tr>',
'</tpl>',
'</tbody>',
'</table>'
);

var config = {
colspan: 2,
title: 'myGrid (Width 2)',
layout: 'table',
layoutConfig: {
columns: 3,
tableAttrs: {
style: {
width: '100%'
}
}
},
tpl: template,
data: [
{a: 'Bigger Field', b: 'Info #1', c: 'Info #2'}
]
};

Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
Ext.ux.myGrid.superclass.initComponent.call(this);
}
});
Ext.reg('mygrid', Ext.ux.myGrid);
In my previous example, adding this and replacing "MakeGridPanel()" with a new instance of the class has the behavior I desired. I may keep working on it and make it configurable as opposed to hard-coded, but this definitely seems to be the easiest / best way to accomplish this.

SachinJadhav
7 Apr 2011, 11:21 PM
Even I am trying to have table layout for panel, with one(or more) grid in the elements.

If width: 100% is disabled then grid behaves properly but table layout is not using all the available space in panel.
If this is disabled table layout uses all space but width of cells and grid is getting affected badly.

Any help towards this would be really appreciable.

Thanks and Regards,
SachinJadhav.