PDA

View Full Version : ExtJS_Query



pitchaiah
30 Apr 2011, 5:22 AM
Hi,
I am new for the ExtJS, below code is working fine on ext2.1. As per our company requirement we need to use on 3.3.1(or latest version). When I run my application it is struck up on render part..
Can you assist me how to use “Render” in version Ext 3.3.1.

var Tree = Ext.tree;
var tree = new Tree.TreePanel({
el:'tree-div',
id:'tree-id',
lines:true,
autoScroll:true,
animate:true,
enableDD:true,
rootVisible: false,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:'filter.jsp'
})
});

var root = new Tree.AsyncTreeNode({
text: 'term',
draggable:false,
iconCls:'conthruAr',
id:'term'
});
tree.setRootNode(root);
confirm(":before render");
tree.render();
confirm(":AFTER render");
");
tree.on('click', function(node, event){
if(node.isLeaf())
getFilterDetails(node.text);
});

root.expand();
getFilterDetails("Default Filter");
});

jratcliff
30 Apr 2011, 7:54 AM
First, make sure to surround your code with code tags so we can read the code. Next, what error do you get?

Are you using Firebug to step through your code? I was able to get your code to work (after I made my own fake data for the loader and removed the extra line of erroneous code after your confirm after render message.

What does getFilterDetails do? Maybe that's where your error is?

In any case, we need more info to help you.

httpdotcom
30 Apr 2011, 9:59 AM
What are you rendering "tree" to?
http://dev.sencha.com/deploy/ext-3.3.1/docs/source/Component.html#method-Ext.Component-render

If you are rendering to the document body, or to a DOM element, you need to specify accordingly.

mitchellsimoens
30 Apr 2011, 10:41 AM
To add my 2 cents...

There are 3 ways to render the Tree


Have the tree as a child of another component. You do not need to do anything to render it, it's parent should handle that for you.
Place the renderTo config option to an element in the DOM
Use the render method and pass an element as a parameter


You seem to want to use the third option and use the render method. According to the docs, render method accepts the following:


Element/HTMLElement/String


tree.render(el);

Where el is an Ext.Element instance, HTMLElement, or a String which is the id of the element.

pitchaiah
2 May 2011, 8:00 PM
Hi,

I have change based on your suggestion but still I stuck up on tree.render ().

var Tree = Ext.tree;
var tree = new Tree.TreePanel({
el:'tree-div',
id:'tree-id',
lines:true,
autoScroll:true,
animate:true,
enableDD:true,
rootVisible: false,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:'filter.jsp'
})
});

var root = new Tree.AsyncTreeNode({
text: 'term',
draggable:false,
iconCls:'conthruAr',
id:'term'
});
tree.setRootNode(root);
confirm(":before render");
tree.render();
confirm(":AFTER render");
});
root.expand();
});

Regards,
BPC
9000776770

pitchaiah
2 May 2011, 8:02 PM
Hi,
I am new for the ExtJS, below code is working fine on ext2.1. As per our requirement we need to use on 3.3.1(or latest version). When I run my application it is struck up on render part.
Can you assist me how to use “Render” in version Ext 3.3.1.

var Tree = Ext.tree;
var tree = new Tree.TreePanel({
el:'tree-div',
id:'tree-id',
lines:true,
autoScroll:true,
animate:true,
enableDD:true,
rootVisible: false,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:'filter.jsp'
})
});

var root = new Tree.AsyncTreeNode({
text: 'term',
draggable:false,
iconCls:'conthruAr',
id:'term'
});
tree.setRootNode(root);
confirm(":before render");
tree.render(el);
confirm(":AFTER render");
});
root.expand();
});

Regards,
BPC
9000776770

mitchellsimoens
3 May 2011, 4:23 AM
Where are you specifying the variable 'el'?

httpdotcom
3 May 2011, 5:59 AM
"el" has to be an actual DOM element.
Whether it is a panel or viewport that you configure, a div element with an id, or the Document body, it still must exist.


tree.render( Ext.getBody ) ;

or


tree.render( "ext" ) ;
...
<body><div id="ext"></div>

mitchellsimoens
3 May 2011, 6:00 AM
And when you say


tree.render( Ext.getBody ) ;

You mean


tree.render( Ext.getBody() );

httpdotcom
3 May 2011, 6:00 AM
"el" has to be an actual DOM element.
Whether it is a panel or viewport that you configure, a div element with an id, or the Document body, it still must exist.


tree.render( Ext.getBody() ) ;

or


tree.render( "ext" ) ;
...
<body>
<div id="ext"></div>
</body>

Update: Was trying to edit and double posted. Thanks Mitchell.