-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-Ext.onReady(function(){\r
- // shorthand\r
- var Tree = Ext.tree;\r
- \r
- var tree = new Tree.TreePanel({\r
- el:'tree-div',\r
- useArrows:true,\r
- autoScroll:true,\r
- animate:true,\r
- enableDD:true,\r
- containerScroll: true,\r
-\r
- // auto create TreeLoader\r
- dataUrl: 'get-nodes.php',\r
-\r
- root: {\r
- nodeType: 'async',\r
- text: 'Ext JS',\r
- draggable:false,\r
- id:'source'\r
- }\r
- });\r
-\r
- // render the tree\r
- tree.render();\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();
+ }
+ }]
+ }]
+ });
+});