Results 1 to 7 of 7

Thread: Tabs & Border Layout issue

  1. #1

    Default Tabs & Border Layout issue

    FireBug is throwing a 'this.addEvents is not a function 'statesave' error when I corrected this little piece of code.

    If I remove the tabs and put tree(region:'left') and editor(region:'center') into the viewport everything is fine. But once I move them to the TabPanel the error is generated.

    Is this an issue with tabs? nested border layouts?

    Code:
    var tabs = new Ext.TabPanel({
    	layout: 'border',
    	region:'center',
            activeTab: 0,
            plain:true,
            defaults:{autoScroll: true},
            items:[{
                    title: 'Help',
                    items: [tree, editor]
                }]
        });
        
    	var viewport = new Ext.Viewport({
    		layout:'border',
    		items: [menu, tabs]
        });

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    Each item you add to a container with layout:'border' has to have a region config. Is this the case? You may have to post more code? Also, if you're playing with the layout stuff, it's best to disable the StateProvider to avoid getting conflicting data from the cookies.

  3. #3

    Default

    Hi tryanDLS,

    Each section does have a region, I have never dealt with the StateProvider, I'll research how to disable it.

    Thanks!

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    If you're using code based on the examples and it has this, comment it out.
    Code:
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

  5. #5
    Ext User santosh.rajan's Avatar
    Join Date
    Sep 2007
    Location
    Kannur, Kerala, India
    Posts
    611

    Default

    How can tabpanel have layout: 'border'?

  6. #6

    Default

    TabPanel extends Panel and Panel has layout.

    If you view the TabPanel API 2.X you'll see that `layout` and `layoutConfig` are both there. In addition to those two config options there is also `layoutOnTabChange`

    I was able to locate and comment out that StateProvider but now I'm getting a new error in FireBug:
    this.layout.setContainer is not a function
    this.layout.setContainer(null);
    Here is the 5 main portions of the code, the rest of the code was remove to keep it simple. Aside from the TabPanel addition nothing else has been changed and everything worked previously.

    Code:
    var tree = new Ext.tree.TreePanel({
    	loader:loader,
    	animate:true,
    	enableDD:true,
    	containerScroll: true,
    	collapsible: true,
    	ddGroup: 'organizerDD',
    	rootVisible:false,
    	region:'west',
    	width:200,
    	split:true,
    	autoScroll:true,
    	tbar: treeControls,
    	margins: '5 0 5 5',
    	listeners: {
    		'click': function(node, e){
    			loadContent(node, e);
    		}
    	}
    });
    		
    var editor = {
    		xtype:'portal',
    		id:'editor',
    		region:'center',
    		margins:'5 5 5 0',
    		border:false,
    		tbar: documentControls,
    		items:[{
    			id:'column',
    			columnWidth:1,
    			style:'padding:10px 10px 10px 10px'
    		}]
    }
    
    var menu = {
    		id:'menu',
    		region:'north',
    		border:false,
    		contentEl:'menu0'
    }
    
    var tabs = new Ext.TabPanel({
    	layout: 'border',
    	region:'center',
    	activeTab: 0,
    	plain:true,
    	defaults:{autoScroll: true},
    	items:[{
    			title: 'Help',
    			items: [tree, editor]
    		}]
    });
    
    var viewport = new Ext.Viewport({
    	layout:'border',
    	items: [menu, tabs]
    });

  7. #7

    Default

    I got it working by changing the TabPanel around and putting a border panel inside it.

    Code:
    var tabs = new Ext.TabPanel({
    	region:'center',
            activeTab: 0,
            plain:true,
            defaults:{autoScroll: true},
            items:[{
            	title: 'Help',
    		    items: new Ext.Panel({
    		        layout:'border',
    		        items: [tree, editor]
    	        })
            }]
        });

Posting Permissions

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