1. #1
    Ext User
    Join Date
    Mar 2007
    Location
    Boston
    Posts
    349
    Vote Rating
    0
    sjivan is on a distinguished road

      0  

    Default BasicDialog autoTabs with dynamic content

    BasicDialog autoTabs with dynamic content


    I want to create a BasicDialog that gets content via the dialog.body's UpdateManager using a remote URL. The BasicDialog is created off a new empty genereted div id. (autoCreate)

    The remote content has divs for tabs but the problem is that the BasicDialog seems to be trying to build the tabs only in the constructor so as a result the tabs are not created when I fetch dialog contents remotely.

    I tried building the tabs myself by code in the UpdateManager's callback silimar to the yui example

    Code:
    var tabs = new YAHOO.ext.TabPanel('tabs1');
    tabs.addTab('script', "View Script");
    tabs.addTab('markup', "View Markup");
    tabs.activate('script');
    however I notice that the height of each tab is only that of the content it holds and not the entire height of the dialog. Adding a 'height' style of 100% on each tab results in vertical scrollbars appearing.

    Has anyone created tabs in an autoCreated dialog which gets content remotely via the dialog.body's UpdateManager?

    Thanks,
    Sanjiv

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    16
    jack.slocum will become famous soon enough

      0  

    Default


    You could try this, untested but should work:

    First turn off autoTabs. This is only used in the constructor.

    Code:
    var dialog = ...;
    
    var loadTabs = function(){
         var tabs = dialog.getTabs();// will create tabs bound to the correct element
         tabs.add('element-id'...
         tabs.add('element-id2'...
         tabs.activate('some-id');
    };
    
    dialog.body.load({url:'foo.php', params: 'foo=1&bar=2', callback: loadTabs});
    Let me know if that works.

  3. #3
    Ext User
    Join Date
    Mar 2007
    Location
    Boston
    Posts
    349
    Vote Rating
    0
    sjivan is on a distinguished road

      0  

    Default


    I tried your suggestion but each tab is still only sized based on its content.

    Sanjiv

  4. #4
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    16
    jack.slocum will become famous soon enough

      0  

    Default


    Try this:

    Code:
    var loadTabs = function(){
         var tabs = dialog.getTabs();// will create tabs bound to the correct element
         tabs.add('element-id'...
         tabs.add('element-id2'...
         tabs.activate('some-id');
         dialog.syncBodyHeight();  <-- add that
    };

  5. #5
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    16
    jack.slocum will become famous soon enough

      0  

    Default


    Or this would be even faster since it bypasses dialog body size calculations:

    tabs.syncHeight();

  6. #6
    Ext User
    Join Date
    Mar 2007
    Location
    Boston
    Posts
    349
    Vote Rating
    0
    sjivan is on a distinguished road

      0  

    Default


    cool, dialog.syncBodyHeight() does the trick.

    tabs.syncHeight() almost does the job but the dialog botton size isn't factored for and the button displays a little off.

    Is there anyway you can support autotabs with remote dialog contents in a simpler way. The current approach works but is not very intuitive.

    Thanks,
    Sanjiv

  7. #7
    Ext User
    Join Date
    Mar 2007
    Posts
    122
    Vote Rating
    0
    moraes is on a distinguished road

      0  

    Default


    This thread was the perfect answer to my same question.

  8. #8
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    16
    jack.slocum will become famous soon enough

      0  

    Default


    There's a great update in SVN for you.

    I removed the tab initialization from the dialog's constructor and created an "initTabs()" method. initTabs() reuses the existing tabs component or creates a new one if one doesn't already exist. It removes any existing tabs and reads for new ones.

    It will have a problem if you overwrite the dialogs body (and the tab dom elements). So the solution may be to:

    dialog.getTabs().bodyEl.load({url:...});
    dialog.initTabs();

    Give it a try and let me know if it works. What you load goes directly into the tabs body element, so it should only be ydlg-tab elements.

  9. #9
    Ext User
    Join Date
    Mar 2007
    Posts
    122
    Vote Rating
    0
    moraes is on a distinguished road

      0  

    Default


    I'm not sure if I'm using the SVN version correctly. I could get it working with:

    Code:
    var renderContent = function(){
        dialog.initTabs();
    };
    
    dialog.body.load({url:'...', callback: renderContent});
    The content loaded is:

    Code:
    <div id="tab1" class="ydlg-tab" title="Tab 1">
    Test
    </div>
    <div id="tab2" class="ydlg-tab" title="tab 2">
    Test2
    </div>
    I tried this instead of setting the callback but it didn't work:

    Code:
    dialog.getTabs().bodyEl.load({url:...});
    dialog.initTabs();
    So it seems that callback is necessary, right? Anyway, yes, this change helps *A LOT*. Now tabs can be automatic for dynamic content as well. Good, and thanks!

    PS: no problem at all to use the callback. I have to initialize other things after the content is loaded, so it would be needed anyway.

Similar Threads

  1. Open content dynamic
    By reang in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 8 Mar 2007, 10:18 AM
  2. How to use dynamic content within my new layout?
    By rics in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 7 Mar 2007, 11:24 AM
  3. multiple dialogs because of dynamic content
    By PurpleNurple in forum Ext 1.x: Help & Discussion
    Replies: 19
    Last Post: 6 Feb 2007, 5:11 AM
  4. dynamic content in layout
    By rehman_922 in forum Ext 1.x: Help & Discussion
    Replies: 6
    Last Post: 5 Feb 2007, 6:11 AM
  5. BasicDialog with "autoTabs
    By Alidad in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 23 Dec 2006, 4:45 AM

Thread Participants: 2

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