Newbie: help with Grid inside Tab
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
Second Grid that wont load in the tabPanelCode: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] } ); });
HTML CodeCode: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(); });
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.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>
Originally Posted by Animal
