1. #1
    Ext User
    Join Date
    Nov 2007
    Posts
    22
    Vote Rating
    0
    Silent79 is on a distinguished road

      0  

    Default activate event

    activate event


    How would I go about leaving the src attribute off your markup and setting it in a handler for the tab's activate event. How would you do it in a render handler.

    I have tabs and need loaded when tab is clicked.

  2. #2
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    Code:
     vat tp=new Ext.Panel({
          ......
         ,listeners:{render:function( panel) {
                Ext.get('someElement').dom.src= ???
           }
           ,activate: function(panel){
                Ext.get('someElement').dom.src= ???
           }
        });
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  3. #3
    Ext User
    Join Date
    Nov 2007
    Posts
    22
    Vote Rating
    0
    Silent79 is on a distinguished road

      0  

    Default


    thanks , I am going to give this a shot, do I need to call anything from the item.

    Code:
     contentEl:'5',
               title: 'Administration',
    	   layout:'fit',
              autoScroll:true
                        }
    like handler: or activate:


    thanks for the reply.

  4. #4
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    If you want all the TP panels to do that, then just add the listeners to the tabPanels defaults for items:

    Code:
    var tp = new Ext.TabPanel({
        ..........
       deferredRender:false,
       defaults:{listeners:{render:function( panel) {
                                      Ext.get('someElement').dom.src= ???
                                },activate: function(panel){
                                      Ext.get('someElement').dom.src= ???
                                 }},
      items:[panel1, panel2  ]
    
    });
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  5. #5
    Ext User
    Join Date
    Nov 2007
    Posts
    22
    Vote Rating
    0
    Silent79 is on a distinguished road

      0  

    Default


    I have been going crazy for some days now trying to get this to work, all though I have learned a lot I can not pin down how to make my code work.

    Is there a working example out there of tabs that load the page when clicked. i know the snipits of code to put in, but I am having problems on piecing it together. I learn off examples better.


    I think I need to see a working example so I can change the code around, that is my best way of learning, then I can mess with that code,
    Thanks

  6. #6
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    What are putting in those panels that requires a src=??

    Post some code! It's dark in here.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  7. #7
    Ext User
    Join Date
    Nov 2007
    Posts
    22
    Vote Rating
    0
    Silent79 is on a distinguished road

      0  

    Default


    I am putting IFrames in the tab panel, for that is the only way I have successfully loaded data to the full page within the tab, I even used your ux example, but I know my tabs are loading once the site is active cause the third tab loads a page that requires a password and that password notification is loading before the first tab loads. I can post my code but it is just a normal tab lay out with divs and iframes. I would like to see some new code to learn a new correct way to go about this. but i will post mine if necessary.

  8. #8
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    Post one of your panel configs with an iframe in it, and we'll go from there (using the ux.ManagedIframe, it's really simple)
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  9. #9
    Ext User
    Join Date
    Nov 2007
    Posts
    22
    Vote Rating
    0
    Silent79 is on a distinguished road

      0  

    Default


    HTML Code:
    <html>
    <body>
    
           <div id="msn" class="x-hide-display">
            <iframe  src="msn.com" height="100%" width="100%" scrolling="auto"></iframe>
            </div>
            <div id="yahoo" class="x-hide-display">
               <iframe  src="yahoo.com" height="100%" width="100%" scrolling="auto"></iframe>
            </div>
    		<div id="google"  class="x-hide-display">
             <iframe src="google.com" height="100%" width="100%" scrolling="auto"></iframe>
            </div>
    	</body>
    </html>
    js.
    Code:
     Ext.onReady(function(){
    
            Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
            
           var viewport = new Ext.Viewport({
                layout:'border',
                items:[
                    new Ext.BoxComponent({ // raw
                        region:'north',
                        el: 'north',
                        height:106
                    }),{
                        region:'south',
                        contentEl: 'south',
                        split:true,
                        height: 20,
                        minSize: 20,
                        maxSize: 20,
                        
                        margins:'0 0 0 0'
                    },
                   
                    new Ext.TabPanel({
                        region:'center',
                        deferredRender:true,
                        activeTab:0,
                        items:[{
                            contentEl:'msn',
                            title: 'msn',
    			layout:'fit',
    			autoScroll:true
                        },
    					{
                            contentEl:'yahoo',
                            title: 'yahoo',
    			layout:'fit',
                            autoScroll:true,
                        },{
                            contentEl:'google',
                            title: 'google',
    			layout:'fit',
                            autoScroll:true
                        }]
                    })
                 ]
            });
    		
        });
    and i need each tab to load once clicked

  10. #10
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    What you have will work just fine, but leave off the src="msn.com" in the markup, it won't load anything until you set it later (on activate):

    And, contentEl element gets written to the Panels body during rendering. So for an Iframe (as contentEl), DO NOT use panel.body.update('sometext') or you'll wipe out your iframe.
    Code:
     new Ext.TabPanel({
                        region:'center',
                        deferredRender:false,
                        activeTab:0,
                        defaults:{listeners:{
                                activate: function(panel){
                                      panel.body.child('iframe').dom.src= panel.panelUrl;
                                 }
                                ,beforedestroy:function(panel){
                                      panel.body.child('iframe').dom.src= '';  //IE Iframe Mem cleanup
                               }                             
                            }},
                        items:[{
                            contentEl:'msn',
                            title: 'msn',
                            layout:'fit',
                             panelUrl:'http://www.msn.com",  //give each panel a src target for use later 
                autoScroll:true
                        },
                        {
                            contentEl:'yahoo',
                            title: 'yahoo',
                layout:'fit',
                            autoScroll:true,
                        },{
                            contentEl:'google',
                            title: 'google',
                layout:'fit',
                            autoScroll:true
                        }]
                    })
    ux.managedIFrame allows the panel.body to become a writable body and allows:
    Code:
    panel.body.dom.src = 'http://www.msn.com'; 
    or
    panel.body.update('<h1>Please Stand By.<\/h1>');
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


Thread Participants: 2