PDA

View Full Version : Newbie: help with Grid inside Tab



zendguru
4 Apr 2008, 6:13 PM
I have a viewport with north(panel), west(panel) and center (tabPanel) regions. I am able to load content into all the regions and put a grid into the center region. However I want to be able to add a second tab that doesnt load until clicked that has another grid inside it, only I want to be able to add html around the grid as apposed to having it take up the whole window. I dont seem to be able to get another tab panel with a grid loaded inside it to display.

Main Layout

Ext.onReady(function(){
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am']
];
// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);

var myGridPanel = 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, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
viewConfig: {
forceFit: true
},
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
width:600,
height:300,
frame:true,
title:'My Leads',
iconCls:'icon-cmp'
});
// Menu containing actions
var westPanel = new Ext.Panel(
{
frame:true,
title: 'Actions',
region:'west',
split:true,
collapsible: true,
border: false,
width:200,
minWidth: 150,
maxWidth: 400,
margins:'0 0 0 0',
autoLoad: {url: '/index/sample',callback: this.initSearch, scope: this},
contentEl:'actions',
titleCollapse: true
}
);
var northPanel = new Ext.Panel(
{
frame:true,
region:'north',
border: false,
height: 70,
margins:'0 0 0 0',
autoLoad: {url: '/index/header',callback: this.initSearch, scope: this},
contentEl:'header',
titleCollapse: true
}
);
// Main (Tabbed) Panel
var tabPanel = new Ext.TabPanel(
{
region:'center',
deferredRender:true,
autoScroll: true,
margins:'0 0 0 0',
resizeTabs: true,
tabWidth: 125,
activeTab:0,
items: [
myGridPanel,
{
title: 'My Contacts',
//second tab with grid of contacts
autoLoad: {url: '/index/contacts', callback: this.initSearch, scope: this},
}
]
}
);

// Configure viewport
viewport = new Ext.Viewport(
{
layout:'border',
items:[northPanel,westPanel,tabPanel]
}
);

});

Second Grid that wont load in the tabPanel


Ext.onReady(function(){

var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am']
];

// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);

// 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, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
autoExpandColumn: 'company',
height:350,
width:600,
title:'Array Grid'
});

grid.render('grid-example');
grid.getSelectionModel().selectFirstRow();
});

HTML Code

<?php
echo '<?xml version="1.0" encoding="UTF-8" ?>';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><? echo $this->escape($this->pageTitle); ?></title>
<link rel="stylesheet" type="text/css" href="../js/extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../js/extjs/resources/css/xtheme-gray.css" />
<link rel="stylesheet" type="text/css" href="../css/styles.css" />
<script src="../js/extjs/adapter/ext/ext-base.js"></script>
<script src="../js/extjs/ext-all-debug.js"></script>
<script src="../js/layout.js"></script>
</head>
<body>

<div id="header"></div>
<div id="actions" class="x-hidden"></div>
<div id="center"></div>
<div id="grid-example"></div>

</body>
</html>

Ive looked at a ton of examples, forum posts and the API but am still confused on how to get this done. Any help would be much appreciated. Also Im not generating any errors in firebug.

Animal
5 Apr 2008, 12:04 AM
So that script which is embedded in that HTML is hardcoded?

Why not just have that code in the main page and run it? Why bother pulling in a load of files through the net?

zendguru
5 Apr 2008, 7:30 AM
So that script which is embedded in that HTML is hardcoded?

Why not just have that code in the main page and run it? Why bother pulling in a load of files through the net?

I am calling layout.js which sets up the regions and the tabs. I only want to load the first tab (My Leads) initially then have the others (My Contacts etc..) load after the tab is clicked or they are dynamically added. All that works fine except when I load the grid into a tab it loads the whole width and height of the window. I would like to add html around the grid inside the tabPanel containing instructions and other stuff.

Animal
5 Apr 2008, 9:35 AM
Do not use HTML as nothing but a vehicle for some hardcoded script.

If you want to create a GridPanel, create a GridPanel.

If you want extra stuff above it, use eg a border layout Panel with instructions in 'north', and the GridPanel as the 'center' Panel, and add that border layout Panel to the TabPanel.

zendguru
5 Apr 2008, 9:50 AM
Do not use HTML as nothing but a vehicle for some hardcoded script.

If you want to create a GridPanel, create a GridPanel.

If you want extra stuff above it, use eg a border layout Panel with instructions in 'north', and the GridPanel as the 'center' Panel, and add that border layout Panel to the TabPanel.

Ok I gotcha that makes sense now that you say it. Thanks for the feed back, much appreciated.

litumishra
29 Sep 2008, 1:51 AM
Hi Zendguru,

Can you please post your updated working code. I am also facing similar problem. I want to load the grid at runtime when the TAb is clicked.

Please share some sample code if possible.

Thanks,

mjlecomte
29 Sep 2008, 5:31 AM
http://extjs.com/learn/Ext_FAQ_Grid#Grids_inside_Tab_Panels