1. #1
    Ext User
    Join Date
    May 2009
    Location
    Canada
    Posts
    21
    Vote Rating
    0
    wallacer is on a distinguished road

      0  

    Default Pre-configured TreePanel class issue

    Pre-configured TreePanel class issue


    I'm trying to write a pre-configured treepanel. I followed the directions in the "Writing a big app" tutorial by saki. Any time I try to use my pre-configured tree panel, the application simply loads a blank screen.

    Code:
    ProjectRocket.fTree = Ext.extend(Ext.tree.TreePanel, {
            initComponent: function(){
                //set proxy
                var treeLoader = new Ext.tree.TreeLoader({
                    dataUrl:'proxy/dir_tree_json.php'
                });
                //set root node
                var rootNode = new Ext.tree.AsyncTreeNode({
                    text: 'Project Folders'
                });
                // add proxy and root node to config                        
                var config = {
                    loader: treeLoader,
                    root: rootNode,
                    renderTo: Ext.get('container')
                };
                Ext.apply(this, config);
                
                ProjectRocket.fTree.superclass.initComponent.apply(this, arguments);
            }, //eo initComponent
            
            onRender:function() {
                ProjectRocket.fTree.superclass.onRender.apply(this, arguments);
            } //eo onRender      
                                         
    });
    
    Ext.reg('ftree', ProjectRocket.fTree);
    That should create the preconfigured class. It's saved in a file called ProjectRocket.fTree.js

    This is application.js:

    Code:
    Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
    
    Ext.onReady(function() {
     
        Ext.QuickTips.init();
        var panel = new Ext.Panel({
                                  
            width: 200,
            height: 600,
            renderTo: Ext.get('container'),
            items: {xtype: ftree}
        });
    });
    That should render my ProjectRocket.fTree into the panel which is rendered into my container div should it not? Do I ever need to render my fTree component, or is that just handeled by the panel I am putting it into? I'm very new to Ext, which should be obvious by now. Any help would be greatly appreciated

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    DO NOT RENDER IF YOU ARE USING IT AS A COMPONENT! WHy don't yoiu read the docs a bit?

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Hundreds of man hours have been spent trying to get you to understand this, but you just ignore it

    http://extjs.com/deploy/ext-3.0-rc1....=Ext.Container

    READ, and then follow all the links from there. And read them. And follow the links from each page linked to, and read them. ALL the information you need is there.

  4. #4
    Ext User
    Join Date
    May 2009
    Location
    Canada
    Posts
    21
    Vote Rating
    0
    wallacer is on a distinguished road

      0  

    Default


    A little oops on that first post. I wasn't rendering my component, I added the renderTo: to my component at one point just to see what happened, and forgot to remove it before posting.

    Code:
    ProjectRocket.fTree = Ext.extend(Ext.tree.TreePanel, {
            initComponent: function(){
                //set proxy
                var treeLoader = new Ext.tree.TreeLoader({
                    dataUrl:'proxy/dir_tree_json.php'
                });
                //set root node
                var rootNode = new Ext.tree.AsyncTreeNode({
                    text: 'Project Folders'
                });
                // add proxy and root node to config                        
                var config = {
                    loader: treeLoader,
                    root: rootNode
                };
            Ext.apply(this, config);
                
                ProjectRocket.fTree.superclass.initComponent.apply(this, arguments);
            }, //eo initComponent
            
            onRender:function() {
                ProjectRocket.fTree.superclass.onRender.apply(this, arguments);
            } //eo onRender
                                        
    });
    
    Ext.reg('ftree', ProjectRocket.fTree);
    From the docs:

    A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.
    I worded my initial post poorly. I rendered the PANEL (parent) that I wanted my ProjectRocket.fTree (child) to appear inside of.

    When I create my parent panel without using an "items" config option, it renders just fine. If I want to add items to the panel, I simply add "items: [...]" to the config, and I can add the items. The problem is that my pre-configured class doesn't seem to be correct. When I add the line "items: {xtype: 'ftree'}" to add one of my pre-configured tree components, everything seems to fall apart.

    here is application.js again.

    Code:
    Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
    
    Ext.onReady(function() {
     
        Ext.QuickTips.init();
    
        var panel = new Ext.Panel({
                                  
            width: 200,
            height: 600,
            renderTo: 'container',
            title: 'pr',
            items: {xtype: 'ftree'}
        });
    });
    I have and do read the docs. You'll notice this was my first post here, and its not regarding some totally trivial topic, nor am I asking anyone to write code for me or anything. I don't think "hundreds of man hours" have been spent trying to make ME understand any of this, nor have I ignored anyone. I was just hoping someone with a little more experience with ext than myself could have a quick browse of my code to see if there's anything obvious I've missed. Is that not what forums are for?

    I will continue scouring the docs and attempting to solve this on my own. I only post questions on forums as a last resort AFTER I've spent several hours or more scouring the docs / tutorials attempting to solve my own problems...

    Thanks for the response.

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    WHy wrap the TreePanel in a redundant, no-layout Panel?

    If you are going to use manual rendering into existing DOM elements, just create the TreePanel and render it into the DOM element.

  6. #6
    Ext User
    Join Date
    May 2009
    Location
    Canada
    Posts
    21
    Vote Rating
    0
    wallacer is on a distinguished road

      0  

    Default


    I changed the panel to a no layout simple panel for this post, and just to get the preconfigured class working before I put it in my border layout. This is just supposed to be the file browser "navigator" bar on the "west"/left side of my border layout panel. This was merely a test to try to get the pre-configured class working correctly in a simple example.

    I already know how to create a treePanel and render it into a DOM element directly. That works fine. I also know how to create a treePanel and put it in the correct region of my border layout. My problem is that as soon as I create a custom pre-configured treePanel class, it doesn't work anymore.

    Maybe for this example I need to use Ext.namespace('ProjectRocket'); ? or change the name of the class to fTree instead of ProjectRocket.fTree?

    Also, is there another option than "manual rendering into existing DOM elements"?

    Again, thanks for the responses Animal.

Thread Participants: 1