Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / ListTree.html
1 <html>\r
2 <head>\r
3   <title>The source code</title>\r
4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
6 </head>\r
7 <body  onload="prettyPrint();">\r
8     <pre class="prettyprint lang-js">ListTree = function(config){\r
9         ListTree.superclass.constructor.call(this, Ext.apply({\r
10                 id:'list-tree',\r
11                 animate:false,\r
12                 //rootVisible:false,\r
13                 region:'west',\r
14                 width:200,\r
15                 split:true,\r
16                 title:'My Lists',\r
17                 autoScroll:true,\r
18                 margins: '3 0 3 3',\r
19                 cmargins: '3 3 3 3',\r
20                 useArrows:true,\r
21                 collapsible:true,\r
22                 minWidth:120\r
23         }, config));\r
24         \r
25         this.on('contextmenu', this.onContextMenu, this);\r
26 }\r
27 Ext.extend(ListTree, Ext.tree.TreePanel, {\r
28         \r
29         initComponent : function(){\r
30                 this.bbar = [\r
31                         tx.actions.newList, \r
32                         tx.actions.deleteList, \r
33                         '-', \r
34                         tx.actions.newFolder,\r
35                         tx.actions.deleteFolder\r
36                 ];\r
37                 \r
38                 this.loader = new ListLoader({\r
39                         store: tx.data.lists\r
40                 });\r
41                 ListTree.superclass.initComponent.call(this);\r
42                 \r
43                 var root = new Ext.tree.AsyncTreeNode({\r
44                 text: 'All Lists',\r
45                         id: 'root',\r
46                         leaf: false,\r
47                         iconCls: 'icon-folder',\r
48                         expanded: true,\r
49                         isFolder: true,\r
50                         editable: false\r
51             });\r
52             this.setRootNode(root);\r
53                                 \r
54                 this.editor = new Ext.tree.TreeEditor(this, {\r
55                 allowBlank:false,\r
56                 blankText:'A name is required',\r
57                 selectOnFocus:true\r
58             });\r
59         this.editor.shadow = false;\r
60 \r
61         this.editor.on('beforecomplete', function(ed, value, startValue){\r
62                         var node = ed.editNode;\r
63                         value = Ext.util.Format.htmlEncode(value);\r
64                         var r = this.store.getById(node.id);\r
65                         r.set('listName', value);\r
66                         //ed.editing = false;\r
67             //ed.hide();\r
68                         //return false;\r
69                 }, this);\r
70                 \r
71                 this.sorter = new Ext.tree.TreeSorter(this, {\r
72                         folderSort: true\r
73                 });\r
74         },\r
75         \r
76         getActiveFolderId : function(){\r
77                 var sm = this.selModel;\r
78                 var n = sm.getSelectedNode();\r
79                 if(n){\r
80                         return n.attributes.isFolder ? n.id : n.attributes.parentId;\r
81                 }\r
82                 return 'root';\r
83         },\r
84         \r
85         onContextMenu : function(node, e){\r
86         if(!this.menu){ // create context menu on first right click\r
87             this.menu = new Ext.menu.Menu({\r
88                 id:'lists-ctx',\r
89                                 listWidth: 200,\r
90                 items: [{\r
91                     iconCls:'icon-edit',\r
92                     text:'New Task',\r
93                     scope: this,\r
94                     handler:function(){\r
95                                                 this.ctxNode.select();\r
96                                                 tx.actions.newTask.execute();\r
97                     }\r
98                 },{\r
99                     iconCls:'icon-list-new',\r
100                     text:'New List',\r
101                     scope: this,\r
102                     handler:function(){\r
103                                                 this.ctxNode.select();\r
104                                                 tx.actions.newList.execute();\r
105                     }\r
106                 },{\r
107                     iconCls:'icon-folder-new',\r
108                     text:'New Folder',\r
109                     scope: this,\r
110                     handler:function(){\r
111                                                 this.ctxNode.select();\r
112                                                 tx.actions.newFolder.execute();\r
113                     }\r
114                 },'-',{\r
115                                         text:'Delete',\r
116                     iconCls:'icon-list-delete',\r
117                     scope: this,\r
118                     handler:function(){\r
119                         this.removeList(this.ctxNode);\r
120                     }\r
121                 }]\r
122             });\r
123             this.menu.on('hide', this.onContextHide, this);\r
124         }\r
125         if(this.ctxNode){\r
126             this.ctxNode.ui.removeClass('x-node-ctx');\r
127             this.ctxNode = null;\r
128         }\r
129         this.ctxNode = node;\r
130         this.ctxNode.ui.addClass('x-node-ctx');\r
131                 \r
132                 this.menu.items.get(1).setVisible(!!node.attributes.isFolder);\r
133                 this.menu.items.get(2).setVisible(!!node.attributes.isFolder);\r
134                 this.menu.items.get(0).setVisible(!node.attributes.isFolder);\r
135                 \r
136                 this.menu.showAt(e.getXY());\r
137     },\r
138 \r
139     onContextHide : function(){\r
140         if(this.ctxNode){\r
141             this.ctxNode.ui.removeClass('x-node-ctx');\r
142             this.ctxNode = null;\r
143         }\r
144     },\r
145         \r
146         startEdit : function(node, select){\r
147                 if(typeof node == 'string'){\r
148                         node = this.getNodeById(node);\r
149                 }\r
150                 if(select === true){\r
151                         node.select();\r
152                 }\r
153                 var ed = this.editor;\r
154                 setTimeout(function(){\r
155                         ed.editNode = node;\r
156                         ed.startEdit(node.ui.textNode);\r
157                 }, 10);\r
158         },\r
159         \r
160         removeList : function(s){\r
161                 if (s && s.attributes.editable) {\r
162                         Ext.Msg.confirm('Confirm', 'Are you sure you want to delete "' + Ext.util.Format.htmlEncode(s.text) + '"?', function(btn){\r
163                                 if (btn == 'yes') {\r
164                                         if (s.nextSibling) {\r
165                                                 s.nextSibling.select();\r
166                                         }\r
167                                         else \r
168                                                 if (s.previousSibling) {\r
169                                                         s.previousSibling.select();\r
170                                                 }\r
171                                         s.parentNode.removeChild(s);\r
172                                         tx.data.lists.remove(this.store.getById(s.id));\r
173                                         tx.data.tasks.removeList(s.id);\r
174                                 }\r
175                         }, this);\r
176                 }\r
177         }\r
178 });\r
179 \r
180 </pre>    \r
181 </body>\r
182 </html>