1. #1
    Sencha User
    Join Date
    Dec 2008
    Posts
    4
    Vote Rating
    0
    Shahid Javed is on a distinguished road

      0  

    Default

    I'm trying to create a page using a border layout, and then adding three panels to the border layout's north panel, west and a tabPanel in center. I want to create new tabs at run time by clicking in right panel and from drop down menus. I am succeeded to create tabs from right panel. My drop down menus is on top(north) panel. Top menu is not visible outside the north menu. please anybody help me to solve this problem. here is the link for demo. http://202.163.69.61/javascript/ext-...tabs/tptut.php. When you mouse over menu items they are only visible inside that Panel not outside that panel.
    Please help. This is really bogging me down.

    here is the complete code.

    [CODE]Ext.onReady(function(){



    // Menu containing actions
    var PanelMainMenu = new Ext.Panel(
    {
    region:'north',
    contentEl:'north',
    border: false,
    height:70,
    layout:'accordion',
    layoutConfig:{
    animate:false
    }
    });

    // Parent Panel to hold right menu
    var actionPanel = new Ext.Panel(
    {
    region:'east',
    id:'west-panel',
    title:'My Tasks and Reminders',
    contentEl:'west',
    //split:true,
    width: 200,
    minSize: 175,
    collapsible: true,
    margins:'0 0 0 3',
    layout:'accordion',
    layoutConfig:{
    animate:true
    }
    });

    // Main (Tabbed) Panel
    var tabPanel = new Ext.TabPanel({
    region:'center',
    deferredRender:false,
    autoScroll: true,
    enableTabScroll:true,
    margins:'0 0 0 0',
    activeTab:0,
    items:[{
    id:'tab1',
    contentEl:'tabs',
    title: ' Home ',
    closable:false,
    autoScroll:true
    }]
    });

    // Configure viewport
    viewport = new Ext.Viewport({
    layout:'border',
    items:[
    PanelMainMenu,
    tabPanel,
    actionPanel
    ]
    });

    // Adds tab to center panel
    function addTab(tabTitle, targetUrl){
    tabPanel.add({
    title: tabTitle,
    iconCls: 'tabs',
    autoLoad: {url: targetUrl, callback: this.initSearch, scope: this},
    closable:true
    }).show();
    }

    // Update the contents of a tab if it exists, otherwise create a new one
    function updateTab(tabId,title, url) {
    var tab = tabPanel.getItem(tabId);
    if(tab){
    tab.getUpdater().update(url);
    tab.setTitle(title);
    }else{
    tab = addTab(title,url);
    }
    tabPanel.setActiveTab(tab);
    }

    // Map link ids to functions
    var count = 0;
    var actions = {
    'create' : function(){
    count ;
    addTab(
    Last edited by Condor; 18 Feb 2009 at 6:03 AM. Reason: Please post using [ CODE ] tags!

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    104
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default

    Why are you using a layout AND a contentEl (these don't work together)?

    The CSS for Panel is causing your menu to be clipped. Why are you even using a Panel?

    Simply use:
    Code:
    var PanelMainMenu = new Ext.BoxComponent({
    	region:'north',
    	el:'north',
    	height:70
    });

  3. #3
    Sencha User
    Join Date
    Dec 2008
    Posts
    4
    Vote Rating
    0
    Shahid Javed is on a distinguished road

      0  

    Default

    but if i use this code it can not create tab as now its doing. that's why i am using panel ...

  4. #4
    Sencha User
    Join Date
    Dec 2008
    Posts
    4
    Vote Rating
    0
    Shahid Javed is on a distinguished road

      0  

    Default

    If i use this code instead of panel

    var PanelMainMenu = new Ext.BoxComponent({
    region:'north',
    el:'north',
    height:70
    });

    then i cant call this function
    actionPanel.body.on('mousedown', doAction, null, {delegate:'a'});
    ........................................................................................................
    this function is creating new tabs in tab panel.
    can you plz guide me that how i can use this line of code if i create the layout using view port... actionPanel.body.on('mousedown', doAction, null, {delegate:'a'});..

    sorry i am new in extJs.

    Thanks

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    104
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default

    If you are not using a Panel then there won't be a body element.

    Use:
    Code:
    PanelMainMenu.el.on('mousedown', doAction, null, {delegate:'a'});

  6. #6
    Sencha User
    Join Date
    Dec 2008
    Posts
    4
    Vote Rating
    0
    Shahid Javed is on a distinguished road

      0  

    Default

    its working now....
    Thanks... very very Thanks for you kind help.......

Thread Participants: 1