1. #1
    Ext User
    Join Date
    Aug 2010
    Posts
    1
    Vote Rating
    0
    Julien.k is on a distinguished road

      0  

    Default TabPanel and AutoTabs: dynamically loading tabs is a problem for me...

    TabPanel and AutoTabs: dynamically loading tabs is a problem for me...


    Hello fellow Extjsers,

    I have some problems with the tabpanel; but let me first explain the background.

    I am currently integrating zend framework and extjs in such a way that:
    a) the global page layout - a border layout - is defined for once and for all in a zend layout
    b) each view is independant, so I can use html views without having to care about the global layout.

    The views are loaded in the center region of my global layout. This center region is a tabpanel.
    It is defined as follows:
    Code:
            innercontentPanel = new Ext.TabPanel({    
                defaults: {             
                    autoScroll:true,
                    autoHeight:true, 
                    autoWidth:true, 
                    layout:'fit',
                }
                border: false,
                id: 'innercontentPanel',
                activeTab: 0,
                applyTo:'innercontent',
                deferredRender: false,
                autoTabs: true
            });
    Now, you see I've set autoTabs to true so that everytime it see a x-tab class in my "innercontent" div, it turns it into a tab. Works perfectly.
    Now my problem. When I change the page (in ajax), in fact, I get a whole new html view through my ajax query and then I do this:
    Code:
                innercontentPanel.update(htmlresponse);
                innercontentPanel.readTabs(true);
                innercontentPanel.activate(0);
                innercontentPanel.doLayout();
    In this htmlreponse I get, I receive a series of divs with x-tab classes; so this makes new tabs in the end.

    Typically, I send things like this back in htmlresponse:
    Code:
    <div class="x-tab" title="Pure text tab">
    <p>This is just text, and if you see this, it's working alright.</p>
    </div>
    <div class="x-tab" title="Another tab">
        <div id="editor-grid"></div>
    </div>
    ...but as you can guess from this view, it is sometimes more than just html; sometimes too, there is a <script type="text/javascript"> inside the response with its own extjs object creation. In the example above, notice the second tab called "Another tab": it has an empty div inside (editor grid); well, the view is sent with the script for creating an editor grid in this case (didn't post it, would be too long, but you get the idea: html tabs are sent with some extjs object definition).

    Now to the problem:
    The object inside the tabs renders badly; let's continue with the example above; so I do readTabs, and it creates my tabs; then I do activate(0), it activates the second tab; then I check my tabs manually, and I click on the second tab; here is what I see:

    http://img210.imageshack.us/img210/2313/tabbadone.jpg

    The grid, which also has a tbar, renders badly; now, same example, but this time I do activate(1) after readTabs (so I activates the second tab directly); surprise, it work as intended:

    http://img827.imageshack.us/img827/3447/tabcorrect.jpg

    The grid and the tbar show correctly.

    My problem is thus that to render a tab correctly, I have to activate that particular tab. But I can't say in advance which tab will contain an extjs object; I want to always activate the first tab - seems logical - and when switching to the second, well its content shouldn't be messed up.

    It's really hard for me to explain the bug, but I went through this detailled description so that someone might be able to understand the problem.

    Hoping for some answers,
    Thanks in advance.


    Another - you guessed it - extjs beginner

  2. #2
    Sencha User
    Join Date
    Nov 2012
    Location
    India
    Posts
    2
    Vote Rating
    0
    vigneshwaranv is on a distinguished road

      0  

    Default Ext.tab.Panel --> autoTabs is not working while migrating 3.4 to 4.0.7

    Ext.tab.Panel --> autoTabs is not working while migrating 3.4 to 4.0.7


    Hi Sencha,

    I am migrating 3.4 to 4.0.7 Here what should i replace for autoTabs config(extjs 3) in extjs 4.

    Ext.create('Ext.tab.Panel',{ autoTabs: true, // In Extjs 4 ??
    activeTab: 0,
    deferredRender: false,
    border: false,
    html: helpText});
    If i placed question in wrong place kindly tell me where i have to place this...
    Thanks..

Similar Threads

  1. Howto Add/Remove (dynamically) Tabs from TabPanel
    By Markj in forum Ext 2.x: Help & Discussion
    Replies: 11
    Last Post: 9 Dec 2009, 10:42 PM
  2. How to dynamically add tabs to TabPanel example by Saki
    By jsakalos in forum Community Discussion
    Replies: 0
    Last Post: 13 Mar 2009, 4:58 AM
  3. Problems with dynamically loading tabPanel
    By randomuser01 in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 21 Oct 2008, 7:32 AM
  4. Dynamically adding tabs to TabPanel
    By OriginalCopy in forum Ext 2.x: Help & Discussion
    Replies: 16
    Last Post: 30 Apr 2008, 12:39 PM
  5. Dynamically loading tabs from database records
    By cindiv30 in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 10 Mar 2008, 5:46 AM

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."