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

      0  

    Default 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 - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,965
    Vote Rating
    12
    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 - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,965
    Vote Rating
    12
    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 - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,965
    Vote Rating
    12
    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 - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,965
    Vote Rating
    12
    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 - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,965
    Vote Rating
    12
    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