Ext2.0b1: Add tree to accordion

Posted in xn--kfs74mzzid01b.com edit by jack on January 7th, 2009

  • Hi All,

    I have spent hour on this and can't get it right.

    I have:


    region:'west'
    ,el:'west'
    ,id:'west'
    ,title:'Classification'
    ,layout:'accordion'
    ,split:true
    ,width:175
    ,minSize:175
    ,maxSize:400
    ,collapsible:true
    ,collapsed:false
    ,items: [{
    title:'Tree must go here'
    ,id:'tree'
    ,border:false
    }]


    And:



    var tree = new Ext.tree.TreePanel({
    id:'treeUF',
    renderTo: 'tree',....


    How do I render the tree to the first item in the accordion panel?:((


  • You need to goive it an xtype so that if and when it needs to be rendered, Ext knows that you want a TreePanel!

    This:


    {
    title:'Tree must go here'
    ,id:'tree'
    ,border:false
    }


    Doesn't include enough information!


  • Hey guys,

    I just wanted to show how I add Trees to Accordions and hope it may be of use to you.

    I create the Tree and the Accordion separately

    Firstly, I create the Tree data:

    menuExamples = {};

    menuExamples.classData = {
    "id":"pkg-examples",
    "iconCls":"icon-grd",
    "text":"Examples",
    "singleClickExpand":true,
    "children":[{ "id":"pkg-examples-grid",
    "text":"Grids",
    "iconCls":"icon-folder",
    "cls":"package",
    "singleClickExpand":true,
    "children":[{"href":"extjs/examples/grid/xml-grid.html","text":"XML Grid","id":"menu.ex.dd.template","isClass":true,"iconCls":"icon-example","cls":"cls","leaf":true}
    ],
    "pcount":0},
    { "id":"pkg-examples-dd",
    "text":"Drag & Drop",
    "iconCls":"icon-folder",
    "cls":"package",
    "singleClickExpand":true,
    "children":[{"href":"examples/dd/dd.html","text":"Drag & Drop","id":"menu.ex.dd.dd","isClass":true,"iconCls":"icon-example","cls":"cls","leaf":true}
    ],
    "pcount":0}
    ],
    "pcount":1};


    Then I create the TreePanel:

    //******************************************//
    //** treeHelp
    //******************************************//
    var treeHelp = new Ext.tree.TreePanel({
    id:'tree-Help',
    title: 'Help Documentation',
    loader: new Ext.tree.TreeLoader(),
    rootVisible:false,
    lines:false,
    singleClickExpand: true,
    autoScroll:true,
    tools:[{
    id:'refresh',
    on:{
    click: function(){
    var tree = Ext.getCmp('tree-Help');
    tree.body.mask('Loading', 'x-mask-loading');
    tree.root.reload();
    tree.root.collapse(true, false);
    setTimeout(function(){ // mimic a server call
    tree.body.unmask();
    tree.root.expand(true, true);
    }, 1000);
    }
    }
    }],
    root: new Ext.tree.AsyncTreeNode({
    text:'Help',
    children:[menuExamples.classData]
    })
    });

    Notice the 'children' of the TreePanel is/are the menuExamples as defined earlier.

    A panel is then created which is to be added to the Viewport :

    var vWest = new Ext.Panel({
    region:'west',
    id:'west-panel',
    title:'Menu',
    split:true,
    width: 262,
    minSize: 262,
    maxSize: 262,
    collapsible: true,
    collapsed: false,
    margins:'0 0 0 5',
    layout:'accordion',
    layoutConfig:{ animate:true },
    items: [ treeHelp,
    {
    title: 'Even More Stuff',
    html : '

    Something useful would be in here.

    '
    },{
    title: 'My Stuff',
    html : '

    Something useful would be in here.

    '
    }, treeUsers
    ]
    });

    Notice 'treeHelp' is an item of the Accordion and uses the heading of the tree defined.

    Then that is added to the Viewport along with the other defined panels:

    var viewport = new Ext.Viewport({ layout:'border', items:[ vHeader, vSouth, vEast, vWest, mainPanel]});


    Hope this helps

    :)


  • WHy contentEl? contentEl USES existing content. Then why nest your tree inoside that Panel anyway? WHy not just use the tree as an item?


  • Thanks DJ,

    I had looked at that. My understanding is that the TreePanel is being added at window creation time via the items config. I am not trying to do this but want to add it later after the accordion has been created.

    Current samples.js code:
    items: [
    new Ext.tree.TreePanel({
    id:'im-tree',
    title: 'Online Users',
    loader: new Ext.tree.TreeLoader(),
    rootVisible:false,
    lines:false,
    autoScroll:true,
    tools:[{
    id:'refresh',
    on:{
    click: function(){
    var tree = Ext.getCmp('im-tree');
    tree.body.mask('Loading', 'x-mask-loading');
    tree.root.reload();
    tree.root.collapse(true, false);
    setTimeout(function(){ // mimic a server call
    tree.body.unmask();
    tree.root.expand(true, true);
    }, 1000);
    }
    }
    }],


  • If I want to put an iframe in the panel, and when click on the leaf in the tree, a html file opened in the iframe. How can i do it?

    I can't find any codes on iframe in the examples. This problem has confused me a few days. who can help me?


  • You post code ?

    Thank´s.


  • Hi Animal and Tryan,

    Thanks for replying but I still don't get it. I understand xtype now BUT if I add an xtype to the region as follows:


    items: [{
    title:'Tree title'
    ,id:'mytree'
    ,border:false
    ,xtype: 'treepanel'
    }


    It errors out as there is no tree to render i.e. this.root has no properties. How do I defer the 'creation' of the tree until later?


  • Did you look at the Desktop example?


  • have you tried accordionpanel.add(tree);?


  • Did you look at the Desktop example?

    I feel that this is always the first place to look for learning. The desktop example is rather complex for lots of folks though. :)


  • Try this: be sure that tree is declared before you do the region layout

    region:'west'
    ,el:'west'
    ,id:'west'
    ,title:'Classification'
    ,layout:'accordion'
    ,split:true
    ,width:175
    ,minSize:175
    ,maxSize:400
    ,collapsible:true
    ,collapsed:false
    ,items: [ tree ]


  • Hey dj,

    I have looked at the desktop example but must be missing something. It doesn't appear to create an accordion and then add a tree to the panel at a later stage.:-/


  • Thanks djliquidice for the simple explanation. Some of us are braindead newbies and your explanation helped.


  • I have a similar problem when trying to add a tree to an accordeon.
    Here's the code:


    var Tree = Ext.tree;

    var tree = new Tree.TreePanel({
    el:'tree',
    animate:true,
    autoScroll:true,
    loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}),
    enableDD:true,
    containerScroll: true,
    dropConfig: {appendOnly:true}
    })

    // add a tree sorter in folder mode
    new Tree.TreeSorter(tree, {folderSort:true});

    // set the root node
    var root = new Tree.AsyncTreeNode({
    text: 'Ext JS',
    draggable:false, // disable root node dragging
    id:'source'
    });
    tree.setRootNode(root);

    // render the tree
    //tree.render();

    root.expand(false, /*no anim*/ false);



    var viewport = new Ext.Viewport({
    layout:'border',
    items:[{
    region:'west',
    id:'west-panel',
    title:'Meniu',
    split:true,
    width: 200,
    minSize: 175,
    maxSize: 400,
    collapsible: true,
    margins:'0 0 0 5',
    layout:'accordion',
    layoutConfig:{
    animate:true
    },
    items: [{
    contentEl: 'west',
    title:'Operatori',
    border:false,
    iconCls:'nav',
    items: [tree]
    },{
    title:'Campanii',
    iconCls:'',
    html:'

    Some settings in here.

    ',
    border:false,
    iconCls:'settings'
    }]
    },

    I'm trying to add the tree to the west region which has an accorden layout.
    I want to add two items (panels?) to the layout , both containing a tree (one for usernames and another one for campaigns).
    Still the code does not return an error but it does not show the tree also :(
    Any toughts?
    Thanks


  • WHy contentEl? contentEl USES existing content. Then why nest your tree inoside that Panel anyway? WHy not just use the tree as an item?
    Thanks Animal,
    You opened my mind:P
    Here's the currenty working code:


    var Tree = Ext.tree;

    var tree = new Tree.TreePanel({
    // el:'tree',
    title: 'Operatori',
    animate:true,
    autoScroll:true,
    loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}),
    enableDD:true,
    containerScroll: true,
    dropConfig: {appendOnly:true}
    })

    // add a tree sorter in folder mode
    new Tree.TreeSorter(tree, {folderSort:true});

    // set the root node
    var root = new Tree.AsyncTreeNode({
    text: 'Ext JS',
    draggable:false, // disable root node dragging
    id:'source'
    });
    tree.setRootNode(root);

    // render the tree
    //tree.render();

    root.expand(false, /*no anim*/ false);

    region:'west',
    id:'west-panel',
    title:'Meniu',
    split:true,
    width: 200,
    minSize: 175,
    maxSize: 400,
    collapsible: true,
    margins:'0 0 0 5',
    layout:'accordion',
    layoutConfig:{
    animate:true
    },
    items: [
    tree
    ,{
    title:'Campanii',
    iconCls:'',
    html:'

    Some settings in here.

    ',
    border:false,
    iconCls:'settings',
    }]


  • Have you tried the code i posted above?


    http://extjs.com/deploy/dev/examples/desktop/sample.js

    search for: MyDesktop.AccordionWindow = Ext.extend(Ext.app.Module, {


    Again, it's pretty complex.







    • #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 Ext2.0b1: Add tree to accordion , Please add it free.
    Protect Your Computer from Viruses-Using Anti Virus
    IBM Rational IDE tops survey