View Full Version : Grid in Simple Viewport

11 Feb 2010, 11:34 AM
I'm new to ExtJS, sort of evaluating, and I'm trying to do what I believe is a simple operation but I cannot seem to get it to work. I've seen dozens of posts here to this same issue but I cannot seem to get them to work. Using the download samples, I've built my grid and tinkered with the various properties, etc. Now this grid, if used, will go on an existing web page in a specific location. The grid works and looks fine but as the browser is scaled the grid does not scale automatically to stay completely visible and have read that a Viewport is really the only way to accomplish this. If so I just need a single region to house the grid. My code is below and would like some help in identifying the problem.

* Ext JS Library 3.1.1
* Copyright(c) 2006-2010 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
//Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
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"},
groupOnSort: false
var grid = new xg.GridPanel({
store: store,
//height: 500,
autoHeight : true,
columns: [
{id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
{header: "Prices", width: 20, sortable: true, groupable: false, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 20, sortable: false, dataIndex: 'change', renderer: Ext.util.Format.usMoney},
{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({
hideGroupedColumn: true,
showGroupName: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
stripeRows: true,
collapsible: false,
animCollapse: false,
title: 'Grouping Example',
iconCls: 'icon-grid'
//,renderTo: document.body

// Array data for the grids
Ext.grid.dummyData = [
['<a href="http://www.cnn.com (http://www.cnn.com/)" target="_blank">3m Co</a>',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'],
['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']

var viewport = new Ext.Viewport({
layout : 'border',
items : [{
region : 'center',
border : false,
layout: 'fit',
items : grid

11 Feb 2010, 12:49 PM
A Viewport is a Container. Why not contain the GridPanel in it instead of a Panel containing the GridPanel?

new Ext.Viewport({
layout: 'fit',
items: grid

Check your Store is loading using Firebug.

11 Feb 2010, 12:52 PM
Read your code.

When does the Viewport get created? When the DOM is ready?

11 Feb 2010, 1:16 PM
I see that the close to the function "Ext.onReady" was out of place. I've replaced my viewport call with your example and moved the onReady closing after it and now the grid renders full width and scales as the browser size is adjusted however, now it contains no data. Can you provide an example of how this should look?