Results 1 to 4 of 4

Thread: Have Ext.TabPanel but which property points to the body of the tab

  1. #1
    Ext JS Premium Member
    Join Date
    Jul 2009
    Location
    Seattle, Washington USA
    Posts
    200

    Default Have Ext.TabPanel but which property points to the body of the tab

    In the question mark area, I need to add some elements to my text.

    PageTabs = new Ext.TabPanel
    (
    {
    renderTo: 'divPageTabs',
    activeTab: 0,
    height:500,
    defaults:{autoScroll: true},
    plain:true,
    items:
    [
    {
    title: 'Home',
    html: '<h2>Home Page</h2>'
    },{
    title: 'About',
    autoLoad:'Home.mvc/About'
    },{
    title: 'Forum',
    autoLoad: 'Home.mvc/ForumPage',
    listeners: {activate: ForumInit}
    }
    ]
    }


    function ForumInit()
    {
    if (!MyApp.Forum.Init)
    DirectRequest.GetForumList
    (
    function(result, response)
    {
    MyApp.Forum.Init = true;
    MyApp.Forum.ForumList = result;
    if (!MyApp.Forum.ForumList)
    {
    // no forum handler ..
    }
    PageTabs. ????? .addElement (:???)/
    }
    , this);
    }

    I can hack this by adding a specific element with an id when I fill the tab, but it would make more sense to me to just get the object directly if it is already a property of the tab.

  2. #2
    Ext JS Premium Member
    Join Date
    Jul 2009
    Location
    Seattle, Washington USA
    Posts
    200

    Default

    This is my hack so far. My tab body is loaded with a new element:
    Code:
    <h2>Forum Page</h2>
    <div id="divForumContent"></div>
    The code on the tab:
    Code:
    function ForumInit()
    {
       if (!MyApp.Forum.Init)
       {
       DirectRequest.GetForumList
       (
          function(result, response)
          {
             MyApp.Forum.Init = true;
             MyApp.Forum.ForumList = result;
          }
          , this);
          Page.WhenExists.Exec("divForumContent", LoadForum);
       }
    }
     
    function LoadForum(o)
    {
       if (!MyApp.Forum.ForumList)
       {
          o.innerHTML += "<p>This Portal has no Forums</p>"; 
       }
    }
    The new function I wrote:
    Code:
    function _WhenExists()
    {
       this.Exec = function(id, funct)
       {
          if (typeof(id) != "undefined")
          {
             this.funct = funct;
             this.id = id;
             this.timer = null;
             this.tries = 0;
          }
          var o = document.getElementById(this.id, true);
          if (o != null)
          {
             if (this.timer != null) self.clearTimeout(this.timer);
               closeTimeout(this.timer);
                this.funct(o);
            }
            else
            {
                this.tries++;
                if (this.tries < 20)
                {
                    this.timer = self.setTimeout("Page.WhenExists.Exec()", 50); 
                }
                else
                {
                       alert("Could not find: " + this.id);
                }
            }
        };
    }
    Page.WhenExists = new _WhenExists();

  3. #3
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    So you want:
    Code:
    PageTabs.getComponent(2).body.dom.innerHTML += '<p>This Portal has no Forums</p>';
    ps. I would give your tabs an itemId (e.g. itemId:'forum'), so you can use 'forum' instead of '2'.

  4. #4
    Ext JS Premium Member
    Join Date
    Jul 2009
    Location
    Seattle, Washington USA
    Posts
    200

    Default

    Thanks, I much prefer that to my hack.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •