1. #1
    Ext User
    Join Date
    Mar 2008
    Posts
    5
    Vote Rating
    0
    Drsunno is on a distinguished road

      0  

    Default Show Hide Panels within a Viewport

    Show Hide Panels within a Viewport


    Hi all,

    I dont really seem to get it... I want to have 2 Panels on a site and a header using the viewport. The 2 Panels both have 2 Tabs and I want to be able to have 3 different views, one with Panel 1 only, one with panel 2, and one with both panels shown.

    Here you can see what I mean:
    http://87.253.160.185/examples/portal/portal.html
    it works a little bit but it's not correct...
    on function show panel 1 panel 1 gets resized to high, there ist no bottem margin.
    And the function show panel 2, the panel 2 doesn't get resized to a fullscreen modus
    like on show panel 1...
    and on resizing the screen, panel 2 returns to its original position...

    has anybody an idea?

    here the code

    Code:
    var viewport,southPanel,centerPanel;
    Ext.onReady(function(){
     centerPanel = new Ext.TabPanel({
                         region:'center',
                         activeTab:0,
                         margins:'0 15 0 15',
                         height: 400,
                         minWidth: 0,
                         items:[{title: 'Panel1: Tab 1',
                          layout:'fit',
         listeners: {
             'resize': function() {
          PanelResized();
              }
         }                    
                          
                          },{
                             contentEl:'center2',
                             title: 'Tab 2',
                             closable: false,                        
                             autoScroll:true
                         }]
                     });
     southPanel = new Ext.TabPanel({
                         region:'south',
                         activeTab:0,
                         
           title: 'Panel3: Tab 3',
           split:true,
           height: 400,
           minWidth: 0,
           margins:'0 15 10 15',   
                         items:[{title: 'Panel3: Tab 3',
                           layout:'fit',
                           contentEl:'south1'
     
                          },{
                             contentEl:'south2',
                             title: 'Tab 4',
                             closable: false,                        
                       
                       autoScroll:true
                         }]
                     });
          viewport = new Ext.Viewport({
                 layout:'border',
                 items:[
                     new Ext.BoxComponent({
                         region:'north',
                         el: 'north',
                         height:65,
                         margins:'0 15 0 15'
                     }),{
                         region:'south',
                         contentEl: 'south',
        listeners: {
            'resize': function() {
         PanelResized();
             }
        }                    
                     },
                     centerPanel,southPanel
                                    
                     
                     
                     
                  ]
            });
    });
    function ShowPanel1()
    {
     southPanel.hide();
     centerPanel.show();
     centerPanel.setPagePosition(15,65);
     centerPanel.expand(true);
     viewport.render();
    }
    function ShowPanel2()
    {
     southPanel.show();
     southPanel.setPagePosition(15,65);
     centerPanel.hide();
     southPanel.expand(true);
     
    }
    function ShowBoth()
    {
     southPanel.show();
     centerPanel.show();
     viewport.render();
    }
    function PanelResized(){}
     
     
     
     
    HTML:
     
     <div id="north">
      <a href="javascript:ShowPanel1();">Show Panel 1</a>
      <a href="javascript:ShowPanel2();">Show Panel 2</a>
      <a href="javascript:ShowBoth();">show both</a>
     </div>
     <div id="center">
      <div id="center1"></div>
      <div id="center2"></div>
     </div>
     <div id="south">
      <div id="south1"></div>
      <div id="south2"></div>
     </div>
    Last edited by evant; 5 Jun 2008 at 3:51 AM. Reason: Use [code][/code] tags

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar