setRootNode(root);
// render the tree
tree.render();
root.expand();
});
Ext.js has an onReady() function that runs a piece of code as soon as the DOM is ready,
which normally occurs well before the window.onload event fires. jQuery has a similar function,
as does Prototype via Dan Webb??™s LowPro plug-in available at http://www.danwebb.net/
lowpro.
The tree structure is handled via a number of objects in the Ext.tree namespace:
TreePanel, TreeLoader, and AsyncTreeNode. The TreePanel takes two parameters: the first is
the ID in which the panel should be embedded, and the second is an object literal for options.
One of those options is loader, which uses the TreeLoader object to load in objects from the
server. In this example, the data is to be loaded as a JSON object from a PHP script.
A new node is created and set as the root node of the tree panel. The node is rendered and
then set to expand. By expanding the node, it will load in the child nodes using the TreeLoader
object. Once the data is loaded, it is cached on the client side so that further collapse/expands
don??™t continually make calls to the server.
The tree nodes are very extensible and enable additional attributes to be attached to
them. The look of the nodes can also be completely customized, as demonstrated in
Figure 4-6.
The ExtJS library includes widgets for custom dialogs (instead of using alerts or pop-up
windows), tabbed interfaces, data grids, layouts, and a whole lot more.
Pages:
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159