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

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