Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / ListTree.html
diff --git a/docs/source/ListTree.html b/docs/source/ListTree.html
new file mode 100644 (file)
index 0000000..a24bfd5
--- /dev/null
@@ -0,0 +1,182 @@
+<html>\r
+<head>\r
+  <title>The source code</title>\r
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body  onload="prettyPrint();">\r
+    <pre class="prettyprint lang-js">ListTree = function(config){\r
+       ListTree.superclass.constructor.call(this, Ext.apply({\r
+               id:'list-tree',\r
+               animate:false,\r
+               //rootVisible:false,\r
+               region:'west',\r
+               width:200,\r
+               split:true,\r
+               title:'My Lists',\r
+               autoScroll:true,\r
+               margins: '3 0 3 3',\r
+               cmargins: '3 3 3 3',\r
+               useArrows:true,\r
+               collapsible:true,\r
+               minWidth:120\r
+       }, config));\r
+       \r
+       this.on('contextmenu', this.onContextMenu, this);\r
+}\r
+Ext.extend(ListTree, Ext.tree.TreePanel, {\r
+       \r
+       initComponent : function(){\r
+               this.bbar = [\r
+                       tx.actions.newList, \r
+                       tx.actions.deleteList, \r
+                       '-', \r
+                       tx.actions.newFolder,\r
+                       tx.actions.deleteFolder\r
+               ];\r
+               \r
+               this.loader = new ListLoader({\r
+                       store: tx.data.lists\r
+               });\r
+               ListTree.superclass.initComponent.call(this);\r
+               \r
+               var root = new Ext.tree.AsyncTreeNode({\r
+               text: 'All Lists',\r
+                       id: 'root',\r
+                       leaf: false,\r
+                       iconCls: 'icon-folder',\r
+                       expanded: true,\r
+                       isFolder: true,\r
+                       editable: false\r
+           });\r
+           this.setRootNode(root);\r
+                               \r
+               this.editor = new Ext.tree.TreeEditor(this, {\r
+               allowBlank:false,\r
+               blankText:'A name is required',\r
+               selectOnFocus:true\r
+           });\r
+        this.editor.shadow = false;\r
+\r
+        this.editor.on('beforecomplete', function(ed, value, startValue){\r
+                       var node = ed.editNode;\r
+                       value = Ext.util.Format.htmlEncode(value);\r
+                       var r = this.store.getById(node.id);\r
+                       r.set('listName', value);\r
+                       //ed.editing = false;\r
+            //ed.hide();\r
+                       //return false;\r
+               }, this);\r
+               \r
+               this.sorter = new Ext.tree.TreeSorter(this, {\r
+                       folderSort: true\r
+               });\r
+       },\r
+       \r
+       getActiveFolderId : function(){\r
+               var sm = this.selModel;\r
+               var n = sm.getSelectedNode();\r
+               if(n){\r
+                       return n.attributes.isFolder ? n.id : n.attributes.parentId;\r
+               }\r
+               return 'root';\r
+       },\r
+       \r
+       onContextMenu : function(node, e){\r
+        if(!this.menu){ // create context menu on first right click\r
+            this.menu = new Ext.menu.Menu({\r
+                id:'lists-ctx',\r
+                               listWidth: 200,\r
+                items: [{\r
+                    iconCls:'icon-edit',\r
+                    text:'New Task',\r
+                    scope: this,\r
+                    handler:function(){\r
+                                               this.ctxNode.select();\r
+                                               tx.actions.newTask.execute();\r
+                    }\r
+                },{\r
+                    iconCls:'icon-list-new',\r
+                    text:'New List',\r
+                    scope: this,\r
+                    handler:function(){\r
+                                               this.ctxNode.select();\r
+                                               tx.actions.newList.execute();\r
+                    }\r
+                },{\r
+                    iconCls:'icon-folder-new',\r
+                    text:'New Folder',\r
+                    scope: this,\r
+                    handler:function(){\r
+                                               this.ctxNode.select();\r
+                                               tx.actions.newFolder.execute();\r
+                    }\r
+                },'-',{\r
+                                       text:'Delete',\r
+                    iconCls:'icon-list-delete',\r
+                    scope: this,\r
+                    handler:function(){\r
+                        this.removeList(this.ctxNode);\r
+                    }\r
+                }]\r
+            });\r
+            this.menu.on('hide', this.onContextHide, this);\r
+        }\r
+        if(this.ctxNode){\r
+            this.ctxNode.ui.removeClass('x-node-ctx');\r
+            this.ctxNode = null;\r
+        }\r
+        this.ctxNode = node;\r
+        this.ctxNode.ui.addClass('x-node-ctx');\r
+               \r
+               this.menu.items.get(1).setVisible(!!node.attributes.isFolder);\r
+               this.menu.items.get(2).setVisible(!!node.attributes.isFolder);\r
+               this.menu.items.get(0).setVisible(!node.attributes.isFolder);\r
+               \r
+               this.menu.showAt(e.getXY());\r
+    },\r
+\r
+    onContextHide : function(){\r
+        if(this.ctxNode){\r
+            this.ctxNode.ui.removeClass('x-node-ctx');\r
+            this.ctxNode = null;\r
+        }\r
+    },\r
+       \r
+       startEdit : function(node, select){\r
+               if(typeof node == 'string'){\r
+                       node = this.getNodeById(node);\r
+               }\r
+               if(select === true){\r
+                       node.select();\r
+               }\r
+               var ed = this.editor;\r
+               setTimeout(function(){\r
+                       ed.editNode = node;\r
+                       ed.startEdit(node.ui.textNode);\r
+               }, 10);\r
+       },\r
+       \r
+       removeList : function(s){\r
+               if (s && s.attributes.editable) {\r
+                       Ext.Msg.confirm('Confirm', 'Are you sure you want to delete "' + Ext.util.Format.htmlEncode(s.text) + '"?', function(btn){\r
+                               if (btn == 'yes') {\r
+                                       if (s.nextSibling) {\r
+                                               s.nextSibling.select();\r
+                                       }\r
+                                       else \r
+                                               if (s.previousSibling) {\r
+                                                       s.previousSibling.select();\r
+                                               }\r
+                                       s.parentNode.removeChild(s);\r
+                                       tx.data.lists.remove(this.store.getById(s.id));\r
+                                       tx.data.tasks.removeList(s.id);\r
+                               }\r
+                       }, this);\r
+               }\r
+       }\r
+});\r
+\r
+</pre>    \r
+</body>\r
+</html>
\ No newline at end of file