You can even enable dragging and dropping between lists. In this example, the
control enables elements to be dragged between firstlist and secondlist.
ExtJS
ExtJS (http://extjs.com) is a widget library, but it surpasses all others mentioned here in its
elegance and flexibility. It used to go under the name YUI.Ext because it was specifically an
add-on to the YUI library (just as Script.aculo.us is for Prototype). However, as the extension
neared its 1.0 release, the add-on got reworked to enable ExtJS to work with YUI, jQuery, or
Prototype. Now in its 1.1 release, ExtJS includes a stand-alone version, removing the need for
other libraries.
The documentation for the library even uses its own components, including the Tree and
Layout widgets, as seen in Figure 4-5.
Figure 4-5. ExtJS documentation using ExtJS widgets
ExtJS is fantastic for application prototyping because of the ease in which many of the
features can be implemented. The file browser??“style navigation on the left side seen in
Figure 4-5 is easily created using a few lines of code:
Ext.onReady(function(){
// shorthand
var Tree = Ext.tree;
CHAPTER 4 n LIBRARIES 94
var tree = new Tree.TreePanel('tree-div', {
animate:true,
loader: new Tree.TreeLoader({
dataUrl:'get-nodes.php'
}),
enableDD:true,
containerScroll: true
});
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false,
id:'source'
});
tree.
Pages:
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158