Tab Panel - inject dynamic HTML & vertical scrollbars

January 6th, 2009
  • Hello, I've search the boards, experimented with different .doLayout calls, and can't get this to work.
    I have a Viewport, with a TabPanel inside.


    var viewport = new Ext.Viewport({
    layout:'border',
    id:'mainViewPort',
    items:[
    new Ext.TabPanel({
    id:'center-tab-panel',
    region: 'center',
    deferredRender:false,
    enableTabScroll:true,
    activeTab:0,
    defaults: {autoScroll:true},
    plugins: new Ext.ux.TabCloseMenu(),
    items: [{
    title: 'Main',
    id:'tabHomepage',
    el: 'divDefaultTab',
    closable:false,
    autoScroll:true
    }]
    })
    ] //end items
    }) //end Viewport


    the main tab loads 'divDefaultTab' onLoad of the page.
    Inside the outer Div, I have a div called divSavedViews.






  • I have the exact same problem. When I load the grid directly into the viewport, the vertical scrollbars are showed, but when I use the tabbed panel, the scroll bars disappear and the grid doesnt expand to the specified height, It only show the existing few records and block the rest of the recors...

    It just doesnt scroll. How can go around this problem ?

    doLayout(); doesnt seem to solve the problem...

    Any help would be highty appreciated!

    Rafal.


  • I have solved my problem by calling grid.syncSize(); for each grid in the active tab.

    I call the syncSize() in the "tabchange" event of my TabPanel object.

    I works like a charm!

    Adds some overhead, but is working.

    Hope it helps.

    Rafal.


  • I do something similar as Rafal,

    I have a form layout as a tabpanel, and in the second panel I have got a grid-panel as a field.

    Sounds a little complicated, but it comes down to having a (extensive) list in a form on one of the tab-panels.

    This grid in the tabpanel had problems with showing its scrollbars as well, and I noticed this got solved as soon as I loaded or added items to the grid, when it was in screen. Further research showed that calling syncSize solved the issue, as long as it was called when the grid was on screen (so its tab was the active tab).

    However I don't want to use the activeTab event to make this grid sync its size, so I found a way to use the 'afterlayout' event of my tab-form to call the grid.syncSize(). Since afterLayout is also fired when the tab-panel is being constructed I added an if to check for the form-width like this:


    // a little dirty trick to make the columns in the grid show up correctly
    this.on('afterlayout', function() {
    if (this.el.getWidth() > 0) this.etaList.syncSize();
    }, this);



    The complete code can be found at:
    http://tejohnston.dynora.eu/js/Ext.ux.VoyageEtaPanel.js (see line 50)

    A demo can be checked at
    http://tejohnston.dynora.eu/voyage/edit/voyage_id/1 (admin:admin) (refresh page after login to get at the page I mention (a voyage-edit-page with two tabs, tab2 contains the ETA-list in a form)


  • autoScroll and doLayout() only work if the content you are manipulating is actually part of a layout (a div within a tab is not part of the layout). you would have better luck adding the entire tab dynamically and passing in your markup as its html property.


  • I had a feeling it was something along those lines, that a Div is not part of the layout and therefore the doLayout() doesn't do the trick.

    I will most likely put a Ext Panel onto the page, and have it auto load an HTML fragment that I will generate on the server side. Plenty ways around this one.

    I'll post my code once I get it working in case anyone else wants to use it as reference.
    Thanks!







    • #If you have any other info about this subject , Please add it free.#
    Your name:
    E-mail:
    Telphone:

    Your comments:


    If you have any other info about Tab Panel - inject dynamic HTML & vertical scrollbars , Please add it free.

    Posted in weletomylife.com | edit

    Reversible Roof Ventilators for Building Ventilation
    Cable & Wireless plays host to Nintendo