air/samples/tasks/js/ListTree.js

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