PDA

View Full Version : GridPanel Height



sjm133
1 Dec 2010, 10:46 AM
Hi,
I'm new to this library and doing some testing with the samples included with the 3.3.1 download. I'm working with "grouping.html". As it sits with no modifications, the sample loads fine and does all it's suppose to do, but the width and height are what I'm trying to modify. I commented the width line and the panel then expands to fit the page width, which is what I want. I also want the height to simply expand to fit all items in the grid. I don't want a scroll bar within the panel. If the panel extends beyond the visible size I want the browser to handle the scrolling.

Any help would be appreciated. Thanks in advance.

jratcliff
1 Dec 2010, 2:01 PM
try setting autoHeight to true in the config for the GridPanel.

sjm133
6 Dec 2010, 5:57 AM
Thanks. That worked. Another item popped up. I'm still using the "grouping.html" sample. I have both the width and height set to "auto..." so that the panel fills the width and stretches to include all items for height. Works good and looks good.

Now, the sample includes the button at the bottom of the panel "Clear Grouping". If I click this, the standard grouping as defined in the javascript file clears but the width now extends off the right side of the page. The headers are still where they should be but the panel content scrolls off to the right. If I remove autowidth and explicitly define a width this behavior doesn't exist. I have to have the panel extend to the page margin so I cannot set a width. Any ideas to fix this?

Condor
6 Dec 2010, 6:01 AM
Don't set the width and height to auto.

You either make the grid autoHeight:true or you give it a fixed height and width.

This fixed width and height can either be directly specified or be set by an Ext container layout (e.g. Ext.Viewport with layout:'fit') or by the FitToParent plugin.

Ext layouts are very powerful for this kind of requirements. I suggest you read up on it.

sjm133
6 Dec 2010, 6:24 AM
Below is the grid configuration I'm using. The "autoWidth: true" correctly set the width to what I need but messes up when clearing the grouping. So I commented and tried it. It again correctly sets the width to the browser page size but shows the same issues when clearing the grouping. I don't want to specify a width. I need the grid contents to extend to the width of the container. If it is not in a container then it should extend to the width of the page size. I don't want to get overly complicated with this. What is the easiest, most direct, solution?



view: new Ext.grid.GroupingView({
forceFit:true,
hideGroupedColumn: true,
//showGroupName: true,
// custom grouping text template to display the number of items per group
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
frame:true,
//autoWidth: true,
width: 800,
autoHeight: true,
collapsible: false,
animCollapse: false,
title: 'Grouping Example',
stateEvents: ['columnmove', 'columnresize', 'sortchange', 'groupchange'],
iconCls: 'icon-grid',
enableColumnMove: true,
fbar : ['->', {
text:'Clear Grouping',
iconCls: 'icon-clear-group',
handler : function(){
store.clearGrouping();
}
}],
stripeRows: true,
// config options for stateful behavior
stateful: true,
renderTo: document.body
});

Condor
6 Dec 2010, 6:38 AM
1. Never (well, almost never) use autoWidth:true.
2. Do you really want to render to the document body? Try removing width, autoHeight and renderTo and add:

new Ext.Viewport({layout: 'fit', items: mygrid});

sjm133
6 Dec 2010, 6:49 AM
I've commented the width, height, and renderTo items.

Now,
1) where does this new code go?
2) what is "mygrid"? I don't see any element referenced by that name or id.

Condor
6 Dec 2010, 6:58 AM
mygrid is the variable to which you assign the new gridpanel (your code snippet is missing the first few lines, so I don't know the variable name).

sjm133
6 Dec 2010, 7:08 AM
Sorry about that. Here is the entire script. I'm not sure where the "viewport" declaration should go. Where it is in the below example renders nothing to the screen.



/*!
* Ext JS Library 3.3.1
* Copyright(c) 2006-2010 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
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'}
]);
var store = new Ext.data.GroupingStore({
reader: reader,
data: xg.dummyData,
sortInfo:{field: 'company', direction: "ASC"},
groupField:'industry'
});
var grid = new xg.GridPanel({
store: store,
columns: [
{id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
{header: "Price", width: 20, sortable: true, groupable: false, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 20, sortable: true, groupable: false, dataIndex: 'change', renderer: Ext.util.Format.usMoney},
{header: "Pct Change", width: 20, sortable: false, groupable: false, dataIndex: 'pctChange'},
{header: "Industry", width: 20, sortable: true, dataIndex: 'industry'},
{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
view: new Ext.grid.GroupingView({
forceFit:true,
hideGroupedColumn: true,
//showGroupName: true,
// custom grouping text template to display the number of items per group
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
frame:true,
//autoWidth: true,
width: 800,
//autoHeight: true,
//collapsible: false,
animCollapse: false,
title: 'Grouping Example',
stateEvents: ['columnmove', 'columnresize', 'sortchange', 'groupchange'],
iconCls: 'icon-grid',
enableColumnMove: true,
fbar : ['->', {
text:'Clear Grouping',
iconCls: 'icon-clear-group',
handler : function(){
store.clearGrouping();
}
}],
stripeRows: true,
// config options for stateful behavior
stateful: true
//renderTo: document.body
});
});
new Ext.Viewport({layout: 'fit', items: grid});
// Array data for the grids
Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'4/2 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'4/1 12:00am', 'Manufacturing'],
['Altria Group Inc',83.81,0.28,0.34,'4/3 12:00am', 'Manufacturing'],
['American Express Company',52.55,0.01,0.02,'4/8 12:00am', 'Finance'],
['American International Group, Inc.',64.13,0.31,0.49,'4/1 12:00am', 'Services'],
['AT&T Inc.',31.61,-0.48,-1.54,'4/8 12:00am', 'Services'],
['Boeing Co.',75.43,0.53,0.71,'4/8 12:00am', 'Manufacturing'],
['Caterpillar Inc.',67.27,0.92,1.39,'4/1 12:00am', 'Services'],
['Citigroup, Inc.',49.37,0.02,0.04,'4/4 12:00am', 'Finance'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'4/1 12:00am', 'Manufacturing'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'4/3 12:00am', 'Manufacturing'],
['General Electric Company',34.14,-0.08,-0.23,'4/3 12:00am', 'Manufacturing'],
['General Motors Corporation',30.27,1.09,3.74,'4/3 12:00am', 'Automotive'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'4/3 12:00am', 'Computer'],
['Honeywell Intl Inc',38.77,0.05,0.13,'4/3 12:00am', 'Manufacturing'],
['Intel Corporation',19.88,0.31,1.58,'4/2 12:00am', 'Computer'],
['International Business Machines',81.41,0.44,0.54,'4/1 12:00am', 'Computer'],
['Johnson & Johnson',64.72,0.06,0.09,'4/2 12:00am', 'Medical'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'4/2 12:00am', 'Finance'],
['McDonald\'s Corporation',36.76,0.86,2.40,'4/2 12:00am', 'Food'],
['Merck & Co., Inc.',40.96,0.41,1.01,'4/2 12:00am', 'Medical'],
['Microsoft Corporation',25.84,0.14,0.54,'4/2 12:00am', 'Computer'],
['Pfizer Inc',27.96,0.4,1.45,'4/8 12:00am', 'Services', 'Medical'],
['The Coca-Cola Company',45.07,0.26,0.58,'4/1 12:00am', 'Food'],
['The Home Depot, Inc.',34.64,0.35,1.02,'4/8 12:00am', 'Retail'],
['The Procter & Gamble Company',61.91,0.01,0.02,'4/1 12:00am', 'Manufacturing'],
['United Technologies Corporation',63.26,0.55,0.88,'4/1 12:00am', 'Computer'],
['Verizon Communications',35.57,0.39,1.11,'4/3 12:00am', 'Services'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'4/3 12:00am', 'Retail'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'4/1 12:00am', 'Services']
];
// add in some dummy descriptions
//for(var i = 0; i < Ext.grid.dummyData.length; i++){
// Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.');
//}

Condor
6 Dec 2010, 7:17 AM
Correct, but the new Ext.Viewport line needs to be inside Ext.onReady (actually, it's the only line that needs to be inside Ext.onReady).

sjm133
6 Dec 2010, 7:42 AM
Ok. I've gotten that to work, but, you knew there was going to be one.... This is not really the functionality I was looking for. I have an existing page that renders a standard html table of financial data that I'm looking to enhance so I need to be able to place the grouping grid panel into my layout and simply replace my existing table. The viewport seems to take over the entire page. What's the next alternative? How do I get my gridpanel to render into an existing HTML location?

Condor
6 Dec 2010, 7:43 AM
Yes, keep the renderTo config option and add the FitToParent plugin (see User Extensions forum).

sjm133
6 Dec 2010, 8:00 AM
I've been reading some on that. Do you have any samples of implementation you could share?

Condor
6 Dec 2010, 10:49 AM
Aren't the samples in the original post (http://www.sencha.com/forum/showthread.php?28318-Fit-to-parent) enough?