Results 1 to 8 of 8

Thread: Creating Layout Inside Tab Panel with Grids and Images in Regions of Layout

  1. #1

    Default Creating Layout Inside Tab Panel with Grids and Images in Regions of Layout

    I am working with the Desktop.js demo

    I would like to have one of the windows (Modules) that can be loaded be a Tab Panel, but each panel needs to have a layout, so that i can have a grid in the upper 3/4 and then across the bottom, i would like to have a 3 graphs that represent data in the grids.

    I can easily get the grid inside a TabPanel, but how do i get a layout(if that is what i need) and place the grid inside a region of the layout and then place some graphs/images inside other regions of the "layout"?

    I have attached a simple paint drawing of what i'm talking about.
    Attached Images Attached Images

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,253

    Default

    So, inside your TabPanel, you should insert a panel. This panel should have a border layout, with a center region (your grid) and a south region (just a div, where you can fill in your charts).

  3. #3

    Default Funny Stuff going on with tabs.

    I got that working, but the tabs get resized and i am not sure why. Any Thoughts?

    Below is my Code and attached is an image of what is happening.
    *Note this code is loaded as a basic module in from you Desktop demo.

    Code:
    MyDesktop.TabWindow = Ext.extend(Ext.app.Module, {
        id:'tab-win',
        init : function(){
            this.launcher = {
                text: 'Tab Window',
                iconCls:'tabs',
                handler : this.createWindow,
                scope: this
            }
        },
    
        createWindow : function(){
            var desktop = this.app.getDesktop();
            var win = desktop.getWindow('tab-win');
            if(!win){
                win = desktop.createWindow({
                    id: 'tab-win',
                    title:'Provile View',
                    width:740,
                    height:480,
                    iconCls: 'tabs',
                    shim:false,
                    animCollapse:false,
                    border:false,
                    constrainHeader:true,
    
                    layout: 'fit',
                    items:
                        new Ext.TabPanel({
    	                    id:'profileWindow',
                            activeTab:0,
    					
                            items: [
                            	new Ext.Panel(
                            			{
                            			layout:'border',
                            			
    	                        		items:[
                            	
    			                        	new Ext.grid.GridPanel(
    			                        	{
    				                        	id:'myProfiles',
    				                        	region: 'center',
    				                        	
    				                        	store: new Ext.data.Store({
    										        
    										        
    										    }),
    				                        	columns:[
    				                        		{id:'company', header:"Company", width:25, sortable:true},
    				                        		{header:"Price", width:120, sortable:true},
    				                        		{header:"Game", width:25, sortable:true}
    				                        	],
    				                        	viewConfig:{forceFit:true},
    				                        	width:600,
    				                        	height:600,
    				                        	frame:true,
    				                        	title:"TESTING PROFILE"
    				                        })
    				                        ,{
    					                     	region:'south',
    					                     	html:'I love you',
    					                     	height:'100'   
    					                        
    					                     }
    				                       ]
    	                        
                            })
    	                        ]
                        })
                });
            }
            win.show();
        }
    });
    Attached Images Attached Images

  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,253

    Default

    You give your tab panel a height of 480, but your grid 600. Try playing around with heights.

  5. #5

    Default Just a quick question:

    *I will play with the heights: so far i have not gotten that to work. But is there a reason i had to add a panel to a tabPanel. Why can't i do everything in the tab panel?

    Also interestingly when i try it(As seen below), i get his error message:
    this.layout.setContainer is not a function


    Code:
    createWindow : function(){
            var desktop = this.app.getDesktop();
            var win = desktop.getWindow('tab-win');
            if(!win){
                win = desktop.createWindow({
                    id: 'tab-win',
                    title:'Provile View',
                    width:740,
                    height:600,
                    iconCls: 'tabs',
                    shim:false,
                    animCollapse:false,
                    border:false,
                    constrainHeader:true,
    
                    layout: 'fit',
                    items:
                        new Ext.TabPanel({
    	                    id:'profileWindow',
                            activeTab:0,
    						layout:'border',
                            items:[
    	                        	new Ext.grid.GridPanel(
    	                        	{
    		                        	id:'myProfiles',
    		                        	region: 'center',
    		                        	
    		                        	store: new Ext.data.Store({
    								        
    								    }),
    		                        	columns:[
    		                        		{id:'company', header:"Company", width:25, sortable:true},
    		                        		{header:"Price", width:20, sortable:true},
    		                        		{header:"Game", width:25, sortable:true}
    		                        	],
    		                        	viewConfig:{forceFit:true},
    		                        	width:600,
    		                        	
    		                        	frame:true,
    		                        	title:"TESTING PROFILE"
    		                        })
    		                        ,{
    			                     	region:'south',
    			                     	html:'I love you',
    			                     	height:'100'   
    			                        
    			                     }
    		                       ],
    		                height:400
                        })
                });
            }
            win.show();
        }
    So my questions are:
    1) Why not just use a TabPanel, why is there a need for an extra panel?
    2) The tabPanel supports layout:border, so why do i get this error message?

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

    Default

    TabPanel does not support any layouts. Think about it. It has its own layout scheme where all its children are layed out as seperate tabs.

  7. #7

    Default Misunderstanding

    I guess i miss understood what i read from the TabPanel using the API.

    It has a layout:property just as a Panel does, and its primary description is:
    "A basic tab container. Tab panels can be used exactly like a standard Ext.Panel for layout purposes, but also have special support for containing child Panels that get automatically converted into tabs."

    I just thought that meant i could use it like a Panel.

    What did i miss when i read that, or what should i have caught so i don't make a similar assumption again?

  8. #8
    Sencha User
    Join Date
    Sep 2008
    Posts
    63

    Default

    Quote Originally Posted by mrkevans View Post
    I guess i miss understood what i read from the TabPanel using the API.

    It has a layout:property just as a Panel does, and its primary description is:
    "A basic tab container. Tab panels can be used exactly like a standard Ext.Panel for layout purposes, but also have special support for containing child Panels that get automatically converted into tabs."

    I just thought that meant i could use it like a Panel.

    What did i miss when i read that, or what should i have caught so i don't make a similar assumption again?
    I made the same assumption when reading the documentation, so maybe it should be changed.

Posting Permissions

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