-/*!
- * Ext JS Library 3.1.0
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-Ext.onReady(function(){\r
- // shorthand\r
- var Tree = Ext.tree;\r
-\r
- var tree = new Tree.TreePanel({\r
- useArrows: true,\r
- autoScroll: true,\r
- animate: true,\r
- enableDD: true,\r
- containerScroll: true,\r
- border: false,\r
- // auto create TreeLoader\r
- dataUrl: 'get-nodes.php',\r
-\r
- root: {\r
- nodeType: 'async',\r
- text: 'Ext JS',\r
- draggable: false,\r
- id: 'src'\r
- }\r
- });\r
-\r
- // render the tree\r
- tree.render('tree-div');\r
- tree.getRootNode().expand();\r
-});
\ No newline at end of file
+Ext.require([
+ 'Ext.tree.*',
+ 'Ext.data.*',
+ 'Ext.tip.*'
+]);
+
+Ext.onReady(function() {
+ Ext.QuickTips.init();
+
+ var store = Ext.create('Ext.data.TreeStore', {
+ proxy: {
+ type: 'ajax',
+ url: 'get-nodes.php'
+ },
+ root: {
+ text: 'Ext JS',
+ id: 'src',
+ expanded: true
+ },
+ folderSort: true,
+ sorters: [{
+ property: 'text',
+ direction: 'ASC'
+ }]
+ });
+
+ var tree = Ext.create('Ext.tree.Panel', {
+ store: store,
+ viewConfig: {
+ plugins: {
+ ptype: 'treeviewdragdrop'
+ }
+ },
+ renderTo: 'tree-div',
+ height: 300,
+ width: 250,
+ title: 'Files',
+ useArrows: true,
+ dockedItems: [{
+ xtype: 'toolbar',
+ items: [{
+ text: 'Expand All',
+ handler: function(){
+ tree.expandAll();
+ }
+ }, {
+ text: 'Collapse All',
+ handler: function(){
+ tree.collapseAll();
+ }
+ }]
+ }]
+ });
+});