PDA

View Full Version : How reliable is Ext.onReady?



MrSparks
6 Sep 2010, 5:39 AM
I would like to call an external JS function to populate a TreePanel node on load.

Iíve tried a few method, such as ď<body onload="javascript: somefunction();Ē and also played around with having autoload, onrender and onload inside the TreePanel. The body method fires too early and the other methods donít seem to work.

I was thinking I might be able to used the Ext.onReady as a place to call the external JS function, however have read on the forum that Ext.onReady doesnít always fire correctly?

Can anyone suggest an alternate way of calling an external JS function from within a TreePanel on load?

Many thanks
Mr Sparks

Condor
6 Sep 2010, 5:59 AM
No, you don't have to wait until the document is ready. You have to wait until the TreeNode is rendered.

The node is rendered when the expandnode event is fired for the node parent.

MrSparks
6 Sep 2010, 6:31 AM
Thanks (again) Condor! I've used event listeners for keyup/down events but thatís about it.



I'll do a bit of research and see if I can get expandnode event listeners work also :)

MrSparks
7 Sep 2010, 8:51 AM
No, you don't have to wait until the document is ready. You have to wait until the TreeNode is rendered.

The node is rendered when the expandnode event is fired for the node parent.

@Condor

Ok, I crashed and burnt on this one. The closest I can get is, listening to a click event but I can't figure out how to listen to the expandnode event?

This works

listeners:
{"click":
{fn: myfunction, scope: this
}
},
This doesn't


listeners:
{"expandnode":
{fn: myfunction, scope: this
}
},

Condor
7 Sep 2010, 8:57 AM
To which component did you attach this listener?

MrSparks
7 Sep 2010, 9:07 AM
To which component did you attach this listener?

To the treepanel



id:'westtree',
xtype:'treepanel',
autoScroll:true,
enableDD: false,
rootVisible:true,
autoScroll:true,
children:[
{
text: 'Node1',
leaf: true,
listeners:
{"expandnode":
{fn: myfunction, scope: this
}
},


},
{
text: 'Node2',
leaf: true
}
]

Animal
7 Sep 2010, 9:14 AM
is "children" a valid config?

Condor
7 Sep 2010, 9:14 AM
The treepanel fires an 'expandnode' event and a node fires an 'expand' event (which you could also use).

Condor
7 Sep 2010, 9:16 AM
is "children" a valid config?

Not for a tree. But it is valid for a node.

(I assume the OP posted an incomplete config)

MrSparks
7 Sep 2010, 9:59 AM
The treepanel fires an 'expandnode' event and a node fires an 'expand' event (which you could also use).

Using expand on the node, my funciton is still not firing. Do I need to enable something else the Treepanel code? i.e. for key events I added "enableKeyEvents: true"

Here is a complete config.




title: 'West Menu',
region: 'west',
id: 'westmenu',
width: 200,
minSize: 200,
maxSize: 500,
collapsible: true,
animCollapse: false,
collapseMode: 'mini',
split: true,
padding: '0 0 0 0',
border: true,
margins: '0 -4 0 2',
cmargins: '0 0 0 5',
layout: 'anchor',
items: [{
border: false,
width: 500,
tbar: [
{
xtype: 'textfield',
itemId : 'searchq',
id: 'searchq',
emptyText: 'Search for',
enableKeyEvents: true,
listeners: {
scope: this,
keyup: this.myfunction
},
loadingText: 'Searching...',
width: 128,
style: 'margin: 2 0 0 0'
}

]

},
{

id:'westtree',
xtype:'treepanel',
baseCls : 'x-plain',
autoScroll:true,
enableDD: false,
rootVisible:true,
autoScroll:true,
singleExpand : false,
root: new Ext.tree.AsyncTreeNode({
text:'Root',
expanded:true,
children: [{
text: 'Leaf1',
expanded:true,
leaf: false,
children: [{
text: '<a id="results"></a>',
leaf: true
}]
}, {
text: 'Leaf2',
expanded:true,
leaf: false,
children: [{
text: 'Node2',
leaf: true,
listeners:
{"expand":
{fn: myfunction, scope: this
}
},
}, {
text: 'Node3',
leaf: true
}, {
text: 'Node4',
leaf: true
}]
}
]

})


},

]

Condor
7 Sep 2010, 10:57 PM
No, attach the expand handler to Leaf2 if you want to make sure Node2 is rendered.

MrSparks
7 Sep 2010, 11:48 PM
No, attach the expand handler to Leaf2 if you want to make sure Node2 is rendered.

Just did a little test and that works perfectly. Will bolt it into the main app this evening :)



Thank you so much Guys!