PDA

View Full Version : Pre-configured TreePanel class issue



wallacer
28 May 2009, 1:03 PM
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.



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:



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 :)

Animal
28 May 2009, 1:10 PM
DO NOT RENDER IF YOU ARE USING IT AS A COMPONENT! WHy don't yoiu read the docs a bit?

Animal
28 May 2009, 1:11 PM
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.1/docs/?class=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.

wallacer
28 May 2009, 3:04 PM
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.



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 (http://extjs.com/forum/../deploy/ext-3.0-rc1.1/docs/output/Ext.Container.html#Ext.Container-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.



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.

Animal
28 May 2009, 11:33 PM
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.

wallacer
29 May 2009, 1:06 PM
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.