Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / tree / check-tree.js

diff --git a/examples/tree/check-tree.js b/examples/tree/check-tree.js
index 4a9f088..51bf5ab 100644 (file)
--- a/examples/tree/check-tree.js
+++ b/examples/tree/check-tree.js
@@ -1,62 +1,52 @@
-/*\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
-\r
-Ext.onReady(function(){\r
-    var tree = new Ext.tree.TreePanel({\r
-        renderTo:'tree-div',\r
-        title: 'My Task List',\r
-        height: 300,\r
-        width: 400,\r
-        useArrows:true,\r
-        autoScroll:true,\r
-        animate:true,\r
-        enableDD:true,\r
-        containerScroll: true,\r
-        rootVisible: false,\r
-        frame: true,\r
-        root: {\r
-            nodeType: 'async'\r
-        },\r
-        \r
-        // auto create TreeLoader\r
-        dataUrl: 'check-nodes.json',\r
-        \r
-        listeners: {\r
-            'checkchange': function(node, checked){\r
-                if(checked){\r
-                    node.getUI().addClass('complete');\r
-                }else{\r
-                    node.getUI().removeClass('complete');\r
-                }\r
-            }\r
-        },\r
-        \r
-        buttons: [{\r
-            text: 'Get Completed Tasks',\r
-            handler: function(){\r
-                var msg = '', selNodes = tree.getChecked();\r
-                Ext.each(selNodes, function(node){\r
-                    if(msg.length > 0){\r
-                        msg += ', ';\r
-                    }\r
-                    msg += node.text;\r
-                });\r
-                Ext.Msg.show({\r
-                    title: 'Completed Tasks', \r
-                    msg: msg.length > 0 ? msg : 'None',\r
-                    icon: Ext.Msg.INFO,\r
-                    minWidth: 200,\r
-                    buttons: Ext.Msg.OK\r
-                });\r
-            }\r
-        }]\r
-    });\r
-\r
-    tree.getRootNode().expand(true);\r
-});
\ No newline at end of file
+Ext.require([
+    'Ext.tree.*',
+    'Ext.data.*',
+    'Ext.window.MessageBox'
+]);
+
+Ext.onReady(function() {
+    var store = Ext.create('Ext.data.TreeStore', {
+        proxy: {
+            type: 'ajax',
+            url: 'check-nodes.json'
+        },
+        sorters: [{
+            property: 'leaf',
+            direction: 'ASC'
+        }, {
+            property: 'text',
+            direction: 'ASC'
+        }]
+    });
+
+    var tree = Ext.create('Ext.tree.Panel', {
+        store: store,
+        rootVisible: false,
+        useArrows: true,
+        frame: true,
+        title: 'Check Tree',
+        renderTo: 'tree-div',
+        width: 200,
+        height: 250,
+        dockedItems: [{
+            xtype: 'toolbar',
+            items: {
+                text: 'Get checked nodes',
+                handler: function(){
+                    var records = tree.getView().getChecked(),
+                        names = [];
+                    
+                    Ext.Array.each(records, function(rec){
+                        names.push(rec.get('text'));
+                    });
+                    
+                    Ext.MessageBox.show({
+                        title: 'Selected Nodes',
+                        msg: names.join('<br />'),
+                        icon: Ext.MessageBox.INFO
+                    });
+                }
+            }
+        }]
+    });
+});