Results 1 to 7 of 7

Thread: Newbie: help with Grid inside Tab

  1. #1

    Default 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
    Code:
    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
    Code:
    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
    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.

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    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?

  3. #3

    Default

    Quote Originally Posted by Animal View Post
    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.

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    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.

  5. #5

    Default

    Quote Originally Posted by Animal View Post
    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.

  6. #6

    Question

    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,

  7. #7

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •