Hi

I'm just begining in ExtJs since two weeks now and still have a lot of trouble making it work for me
so i need to use the portal example ( http://dev.sencha.com/deploy/ext-4.0...al/portal.html)
but i want it to look more like this :
http://examples.ext.net/Examples/Portal/Basic/Simple/
with tabs and treegrid in the left sidebar

but i dont know how to do this!!
should i modify the portal.js to include a tab in the portal instead of the portal panel ?? or mybe the other way around !!

please see here what im trying to do :

Code:
   initComponent: function(){

        var content = '<div class="portlet-content">' + Ext.example.bogusMarkup + '</div>';
        
        Ext.apply(this, {
            id: 'app-viewport',
            layout: {
                type: 'border',
                padding: '5 5 5 5' // pad the layout from the window edges
            },
            items: [{//item 1 of app-viewport
                id: 'app-header',
                xtype: 'box',
                region: 'north',
                height: 50,
                html: 'My Portal'
            }, {//item 2 of app-viewport
                xtype: 'container',
                region: 'center',
                layout: 'border',
                items: [{//item 1 of container
                    id: 'app-options',
                    title: 'Options',
                    region: 'west',
                    animCollapse: true,
                    width: 200,
                    minWidth: 150,
                    maxWidth: 400,
                    split: true,
                    collapsible: true,
                    layout: 'accordion',
                    layoutConfig:{
                        animate: true
                    },
                    items: [{//item 1 of app-options
                        html: '<div class="portlet-content">' + 'add a tree  here' + '</div>',
                        title:'Main',
                        autoScroll: true,
                        border: false,
                        iconCls: 'nav',$items : {}
                    }, {//item 2 of app-options
                        title:'Settings',
                        html: content,
                        border: false,
                        autoScroll: true,
                        iconCls: 'settings'
                    }]
                }, {//item 2 of container
                /*   //original code
                     id: 'app-portal', 
                    xtype: 'portalpanel', 
             
                    region: 'center',
                    */
                    
                    
                    id: 'tabpanel1', 
                    xtype: 'tabpanel',
                    renderTo: 'tabs1',
                   activeTab: 0,
                    region: 'center',
                    /items: [{
                        contentEl:'script', 
                        title: 'Short Text',
                        closable: true ,
                         }]
                    
                    
                    items: [{
                        id: 'col-1',
                        flex: 1,
                        items: [{
                            id: 'portlet-1',
                            title: 'Grid Portlet',
                            tools: this.getTools(),
                            items: new Ext.app.GridPortlet(),
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this)
                            }
                        },{
                            id: 'portlet-2',
                            title: 'Portlet 2',
                            tools: this.getTools(),
                            html: content,
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this)
                            }
                        }]
                    },{
                        id: 'col-2',
                        flex: 1,
                        items: [{
                            id: 'portlet-3',
                            title: 'Portlet 3',
                            tools: this.getTools(),
                            html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>',
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this)
                            }
                        }]
                    },{
                        id: 'col-3',
                        flex: 1,
                        margins: '0 26 0 0',
                        items: [{
                            id: 'portlet-4',
                            title: 'Stock Portlet',
                            tools: this.getTools(),
                            items: new Ext.app.ChartPortlet(),
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this)
                            }
                        }]
                    }]
                }] 
            
            }]
        });
        
        this.callParent(arguments);
    },
any ideas would help me as im stuck on this for over a week now with no progress

thank you