1. #1
    Ext User sonic64's Avatar
    Join Date
    Apr 2007
    Location
    Casablanca, Morocco
    Posts
    112
    Vote Rating
    0
    sonic64 is on a distinguished road

      0  

    Default Tree in West layout

    Hello,

    I am constructing my tree from xml using a function. But that function requires that I create first a container for the tree in my html file. I want to put this tree in the west region of my layout. I am having a hard time making all this work.

    Here is what my code looks like:
    Code:
    //function that creates tree from xml
    function createXmlTree(el, url, callback) { 
            
        var tree = new Ext.tree.TreePanel(el);     
        var p = new Ext.data.HttpProxy({url:url});
        p.on("loadexception", function(o, response, e) {
            if (e) throw e;
        });
        p.load(null, {
            read: function(response) {
                var doc = response.responseXML;
                tree.setRootNode(treeNodeFromXml(doc.documentElement || doc));
            }
        }, callback || tree.render, tree);
        return tree;
        
    }
    
    //function  that defines layout  + call to the function that constructs the tree
    var TreeTest = function(){
        
        return {
            init : function(){
                Ext.QuickTips.init();
                var layout = new Ext.BorderLayout('layout', {
                    west: {
                        initialSize:200,
                        split:true,
                        titlebar:true
                    },
                    center: {
                        alwaysShowTabs:true,
                        tabPosition:'top'
                    }
                });
                
                var albums = layout.getEl().createChild({tag:'div', id:'albums'});
                
                var viewEl = albums.createChild({tag:'div', id:'folders'});
                
                var folders = layout.add('west', new Ext.ContentPanel(albums, {
                    title:'Lots et Ouvrages', 
                    fitToFrame:true,
                    autoScroll:true,
                    autoCreate:true,
                    //toolbar: tb,
                    resizeEl:viewEl
                }));
                
                var images = layout.add('center', new Ext.ContentPanel('images', {
                    title:'Detail des Ouvrages', 
                    fitToFrame:true,
                    autoScroll:true,
                    autoCreate:true
                }));
                var imgBody = images.getEl();
                
                
                var Tree = new createXmlTree('tree', 'tree.php');
        
                
               
                var rz = new Ext.Resizable('layout', {
                    wrap:true, 
                    pinned:true, 
                    adjustments:[-6,-6],
                    minWidth:300
                });
                rz.on('resize', function(){
                    layout.layout();
                });
                rz.resizeTo(650, 350);
            }
        };
    }();
    Ext.onReady(TreeTest.init, TreeTest, true);

    In my html:
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Organizing Images into Albums</title>
    <link rel="stylesheet" type="text/css" href="ext-1.0-beta2/resources/css/ext-all.css" />
    
        <!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="ext-1.0-beta2/adapter/yui/yui-utilities.js"></script>     <script type="text/javascript" src="ext-1.0-beta2/adapter/yui/ext-yui-adapter.js"></script>     <!-- ENDLIBS -->
        <script type="text/javascript" src="ext-1.0-beta2/ext-all.js"></script>
    
    <script type="text/javascript" src="organizer.js"></script>
    
    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="ext-1.0-beta2/examples/examples.css" />
    
    <link rel="stylesheet" type="text/css" href="organizer.css" />
    </head>
    <body>
    <div id="layout"></div>
    <br /><br /><br /><br /><br />
    </body>
    </html>

    What is missing is the <div id=tree></div> that I am having trouble finding the right place to place it.

    Any suggestion will be highly appreciated.

    Thanks

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,570
    Vote Rating
    53
    Animal will become famous soon enough Animal will become famous soon enough

      0  

    Default

    It doesn't matter where you put it. You are going to create a ContentPanel from it, and add that ContentPanel to the west Region, just like any other ContentPanel.

  3. #3
    Ext User sonic64's Avatar
    Join Date
    Apr 2007
    Location
    Casablanca, Morocco
    Posts
    112
    Vote Rating
    0
    sonic64 is on a distinguished road

      0  

    Default

    Thanks Animal...
    I do not see how to create a contentpanel from a div. Actualy I have a tree panel, and a contentpanel. I thought that was enough to put in the west region of the layout.
    Code:
    var albums = layout.getEl().createChild({tag:'div', id:'tree'});
                
                var viewEl = albums.createChild({tag:'div', id:'folders'});
                
                var folders = layout.add('west', new Ext.ContentPanel(albums, {
                    title:'Lots et Ouvrages', 
                    fitToFrame:true,
                    autoScroll:true,
                    autoCreate:true,
                    //toolbar: tb,
                    resizeEl:viewEl
                }));
    ...
    
     var Tree = new createXmlTree('tree', 'tree.php');
    Could you please precise what is wrong with my code?
    Thanks

  4. #4
    Ext User sonic64's Avatar
    Join Date
    Apr 2007
    Location
    Casablanca, Morocco
    Posts
    112
    Vote Rating
    0
    sonic64 is on a distinguished road

      0  

    Default

    Ok...I fixed it..I just had a line that did not make sense there:
    Code:
    resizeEl:viewEl

  5. #5
    Sencha User
    Join Date
    Oct 2014
    Posts
    1
    Vote Rating
    0
    corrievm01 is on a distinguished road

      0  

    Default

    I am using Sencha extjs 5. I am having trouble to load a tree menu in the west layout. I can't seem to display anything. Please assist.Here is my Main.js code:
    HTML Code:
    items: [    {        title: 'Navigation',        
    region:'west',       
     floatable: false,        
    margin: '5 0 0 0',        
    width: 200,        
    minWidth: 100,        
    maxWidth: 350,        
    html: '<script type="text/javascript" src="app/view/app.js"></script>'    }
    Here is my app.js code:
    HTML Code:
    Ext.create('Ext.tree.Panel', {
    renderTo: Ext.getBody('west'),
    title: 'Simple Tree',
    region:'west',
    width: 300,
    height: 250,
    root: {    text: 'Root',    
    expanded: true,    
    children: [{        text: 'Child 1',        leaf: true    }, 
    {        text: 'Child 2',        leaf: true    }, 
    {        text: 'Child 3',        expanded: true,        
    children: [{            text: 'Grandchild',            leaf: true        }]    }]}});
    Last edited by corrievm01; 22 Oct 2014 at 3:54 AM. Reason: Code not looking good

Thread Participants: 2