1. #1
    Sencha User
    Join Date
    Aug 2008
    Posts
    21
    Vote Rating
    0
    v.zen is on a distinguished road

      0  

    Default How to do this (with tabs)

    How to do this (with tabs)


    Hi,

    my goal is to do this panel layout:
    Code:
    | tab1 | tab2 | tab3 | ... | tab n |
    +-------------------------------------+
    |   a tree  |   leaf detail           |
    |   panel   |                         |
    | different |                         |
    | tree for  |                         |
    | different |                         |
    | tab id    |                         |
    +-------------------------------------+
    the tree nodes are loaded from json (no problem for this).
    My question is: what is the best pratices to do this layout?

    Thanks in advance.
    v

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    tabPanel,
    items has a panel with a border layout,
    tree panel in east
    details panel in center.

  3. #3
    Sencha User
    Join Date
    Aug 2008
    Posts
    21
    Vote Rating
    0
    v.zen is on a distinguished road

      0  

    Default


    Ok. But how to wrap tree json id with tab ?

    Here my code

    Code:
    var App = function () { 
    var tree = new Ext.tree.TreePanel({
        region: 'west',
        width: 200,
        animate: true,
        enableDD: false,
        loader: new Ext.tree.TreeLoader({dataUrl:'strutturaJson'}),
        });;
    var detail = new Ext.Panel ({
    region: 'center',
    title: 'Dettagli'
    });
    var main = new Ext.Panel ({
    items: [
    tree,
    detail
    ],
    height: 350,
    layout: 'border'
    });
    var tabPanel = new Ext.TabPanel ({
    resizeTabs: true,
    minTabWidth: 100,
    tabWidth: 150,
    activeTab: 0,
    enableTabScroll: true,
    defaults: { autoScroll: true },
    title: 'Riepilogo dal ',
    deferredRender: false,
    border: true,
    plain: true,
    margins: '5 5 5 5',
    autoScroll: true,
    items: [
    { title: 'Master universitario',
    body: main },
    { title: 'Master',
    body: main },
    { title: 'Corso di Specializzazione',
    body: main }
    ],
    scripts: true
    });
    return {
     init: function () { 
      tabPanel.render('tabPanel');
     } 
    
    }}();
    
    Ext.onReady(App.init, App);

  4. #4
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    I'm not too sure what you're asking.

  5. #5
    Sencha User
    Join Date
    Aug 2008
    Posts
    21
    Vote Rating
    0
    v.zen is on a distinguished road

      0  

    Default


    I not undestand how to binding tab id with tree. Every tabs act like a filter.
    So click to tab1 render tree from json with param id=1, click to tab2 render tree from json with param id=2 ...and so on.
    I suppose that my problem is like this: Referred to http://examples.extjs.eu/gridintab.html thinks another tab which load the same grid of tab2 but with some select filter.

    I have these database structure:

    table 1
    course 1
    course 2
    course n

    table 2
    tree of course 1
    tree of course 2
    tree of course n

    I want a tab panel with course 1,..n. When I active tab of course x is displayed tree of course x.

    Any ideas?

    Thanks in advance
    v.

  6. #6
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    setup an 'activate' listener for the panels that you need to monitor clicks for.

  7. #7
    Sencha User
    Join Date
    Aug 2008
    Posts
    21
    Vote Rating
    0
    v.zen is on a distinguished road

      0  

    Default


    Interesting. Draw tap panel, panel, tree, adn so on. And after popolate when events on tabs are fired?

    Thanks!
    v.

  8. #8
    Sencha User
    Join Date
    Aug 2008
    Posts
    21
    Vote Rating
    0
    v.zen is on a distinguished road

      0  

    Default


    I'm looking for a working example. Here my code.
    My questions is: how to set the url of tab, like autoLoad do?

    Code:
    new Ext.TabPanel ({
    resizeTabs: true,
    enableTabScroll: true,
    defaults: { autoScroll: true },
    id: 'tabPanel',
    title: 'Riepilogo dal 2008-08-01 al 2008-08-31 24:59',
    deferredRender: false,
    border: true,
    plain: true,
    items: [
    { title: 'Ambienti',
    id: 'tipoRisorsaId=1&dal=2008-08-01&al=2008-08-31 24:59' },
    { title: 'Strumenti',
    id: 'tipoRisorsaId=2&dal=2008-08-01&al=2008-08-31 24:59' }
    ],
    listeners: {tabchange: function(tp,newTab){
            newTab.setUrl('fe_dev.php/gantt/HTML');
       }}
    })
    ]
    }); }

  9. #9

  10. #10
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Michael,

    Ext is global in nature. Many folks simply don't know english that well - so they post simple 'how to?'.

    JS is like the universal language here