examples/desktop/sample.js

   1 /*\r
   2  * Ext JS Library 2.2.1\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 \r
  10 // Sample desktop configuration\r
  11 MyDesktop = new Ext.app.App({\r
  12         init :function(){\r
  13                 Ext.QuickTips.init();\r
  14         },\r
  15 \r
  16         getModules : function(){\r
  17                 return [\r
  18                         new MyDesktop.GridWindow(),\r
  19             new MyDesktop.TabWindow(),\r
  20             new MyDesktop.AccordionWindow(),\r
  21             new MyDesktop.BogusMenuModule(),\r
  22             new MyDesktop.BogusModule()\r
  23                 ];\r
  24         },\r
  25 \r
  26     // config for the start menu\r
  27     getStartConfig : function(){\r
  28         return {\r
  29             title: 'Jack Slocum',\r
  30             iconCls: 'user',\r
  31             toolItems: [{\r
  32                 text:'Settings',\r
  33                 iconCls:'settings',\r
  34                 scope:this\r
  35             },'-',{\r
  36                 text:'Logout',\r
  37                 iconCls:'logout',\r
  38                 scope:this\r
  39             }]\r
  40         };\r
  41     }\r
  42 });\r
  43 \r
  44 \r
  45 \r
  46 /*\r
  47  * Example windows\r
  48  */\r
  49 MyDesktop.GridWindow = Ext.extend(Ext.app.Module, {\r
  50     id:'grid-win',\r
  51     init : function(){\r
  52         this.launcher = {\r
  53             text: 'Grid Window',\r
  54             iconCls:'icon-grid',\r
  55             handler : this.createWindow,\r
  56             scope: this\r
  57         }\r
  58     },\r
  59 \r
  60     createWindow : function(){\r
  61         var desktop = this.app.getDesktop();\r
  62         var win = desktop.getWindow('grid-win');\r
  63         if(!win){\r
  64             win = desktop.createWindow({\r
  65                 id: 'grid-win',\r
  66                 title:'Grid Window',\r
  67                 width:740,\r
  68                 height:480,\r
  69                 iconCls: 'icon-grid',\r
  70                 shim:false,\r
  71                 animCollapse:false,\r
  72                 constrainHeader:true,\r
  73 \r
  74                 layout: 'fit',\r
  75                 items:\r
  76                     new Ext.grid.GridPanel({\r
  77                         border:false,\r
  78                         ds: new Ext.data.Store({\r
  79                             reader: new Ext.data.ArrayReader({}, [\r
  80                                {name: 'company'},\r
  81                                {name: 'price', type: 'float'},\r
  82                                {name: 'change', type: 'float'},\r
  83                                {name: 'pctChange', type: 'float'}\r
  84                             ]),\r
  85                             data: Ext.grid.dummyData\r
  86                         }),\r
  87                         cm: new Ext.grid.ColumnModel([\r
  88                             new Ext.grid.RowNumberer(),\r
  89                             {header: "Company", width: 120, sortable: true, dataIndex: 'company'},\r
  90                             {header: "Price", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},\r
  91                             {header: "Change", width: 70, sortable: true, dataIndex: 'change'},\r
  92                             {header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'}\r
  93                         ]),\r
  94 \r
  95                         viewConfig: {\r
  96                             forceFit:true\r
  97                         },\r
  98                         //autoExpandColumn:'company',\r
  99 \r
 100                         tbar:[{\r
 101                             text:'Add Something',\r
 102                             tooltip:'Add a new row',\r
 103                             iconCls:'add'\r
 104                         }, '-', {\r
 105                             text:'Options',\r
 106                             tooltip:'Blah blah blah blaht',\r
 107                             iconCls:'option'\r
 108                         },'-',{\r
 109                             text:'Remove Something',\r
 110                             tooltip:'Remove the selected item',\r
 111                             iconCls:'remove'\r
 112                         }]\r
 113                     })\r
 114             });\r
 115         }\r
 116         win.show();\r
 117     }\r
 118 });\r
 119 \r
 120 \r
 121 \r
 122 MyDesktop.TabWindow = Ext.extend(Ext.app.Module, {\r
 123     id:'tab-win',\r
 124     init : function(){\r
 125         this.launcher = {\r
 126             text: 'Tab Window',\r
 127             iconCls:'tabs',\r
 128             handler : this.createWindow,\r
 129             scope: this\r
 130         }\r
 131     },\r
 132 \r
 133     createWindow : function(){\r
 134         var desktop = this.app.getDesktop();\r
 135         var win = desktop.getWindow('tab-win');\r
 136         if(!win){\r
 137             win = desktop.createWindow({\r
 138                 id: 'tab-win',\r
 139                 title:'Tab Window',\r
 140                 width:740,\r
 141                 height:480,\r
 142                 iconCls: 'tabs',\r
 143                 shim:false,\r
 144                 animCollapse:false,\r
 145                 border:false,\r
 146                 constrainHeader:true,\r
 147 \r
 148                 layout: 'fit',\r
 149                 items:\r
 150                     new Ext.TabPanel({\r
 151                         activeTab:0,\r
 152 \r
 153                         items: [{\r
 154                             title: 'Tab Text 1',\r
 155                             header:false,\r
 156                             html : '<p>Something useful would be in here.</p>',\r
 157                             border:false\r
 158                         },{\r
 159                             title: 'Tab Text 2',\r
 160                             header:false,\r
 161                             html : '<p>Something useful would be in here.</p>',\r
 162                             border:false\r
 163                         },{\r
 164                             title: 'Tab Text 3',\r
 165                             header:false,\r
 166                             html : '<p>Something useful would be in here.</p>',\r
 167                             border:false\r
 168                         },{\r
 169                             title: 'Tab Text 4',\r
 170                             header:false,\r
 171                             html : '<p>Something useful would be in here.</p>',\r
 172                             border:false\r
 173                         }]\r
 174                     })\r
 175             });\r
 176         }\r
 177         win.show();\r
 178     }\r
 179 });\r
 180 \r
 181 \r
 182 \r
 183 MyDesktop.AccordionWindow = Ext.extend(Ext.app.Module, {\r
 184     id:'acc-win',\r
 185     init : function(){\r
 186         this.launcher = {\r
 187             text: 'Accordion Window',\r
 188             iconCls:'accordion',\r
 189             handler : this.createWindow,\r
 190             scope: this\r
 191         }\r
 192     },\r
 193 \r
 194     createWindow : function(){\r
 195         var desktop = this.app.getDesktop();\r
 196         var win = desktop.getWindow('acc-win');\r
 197         if(!win){\r
 198             win = desktop.createWindow({\r
 199                 id: 'acc-win',\r
 200                 title: 'Accordion Window',\r
 201                 width:250,\r
 202                 height:400,\r
 203                 iconCls: 'accordion',\r
 204                 shim:false,\r
 205                 animCollapse:false,\r
 206                 constrainHeader:true,\r
 207 \r
 208                 tbar:[{\r
 209                     tooltip:{title:'Rich Tooltips', text:'Let your users know what they can do!'},\r
 210                     iconCls:'connect'\r
 211                 },'-',{\r
 212                     tooltip:'Add a new user',\r
 213                     iconCls:'user-add'\r
 214                 },' ',{\r
 215                     tooltip:'Remove the selected user',\r
 216                     iconCls:'user-delete'\r
 217                 }],\r
 218 \r
 219                 layout:'accordion',\r
 220                 border:false,\r
 221                 layoutConfig: {\r
 222                     animate:false\r
 223                 },\r
 224 \r
 225                 items: [\r
 226                     new Ext.tree.TreePanel({\r
 227                         id:'im-tree',\r
 228                         title: 'Online Users',\r
 229                         loader: new Ext.tree.TreeLoader(),\r
 230                         rootVisible:false,\r
 231                         lines:false,\r
 232                         autoScroll:true,\r
 233                         tools:[{\r
 234                             id:'refresh',\r
 235                             on:{\r
 236                                 click: function(){\r
 237                                     var tree = Ext.getCmp('im-tree');\r
 238                                     tree.body.mask('Loading', 'x-mask-loading');\r
 239                                     tree.root.reload();\r
 240                                     tree.root.collapse(true, false);\r
 241                                     setTimeout(function(){ // mimic a server call\r
 242                                         tree.body.unmask();\r
 243                                         tree.root.expand(true, true);\r
 244                                     }, 1000);\r
 245                                 }\r
 246                             }\r
 247                         }],\r
 248                         root: new Ext.tree.AsyncTreeNode({\r
 249                             text:'Online',\r
 250                             children:[{\r
 251                                 text:'Friends',\r
 252                                 expanded:true,\r
 253                                 children:[{\r
 254                                     text:'Jack',\r
 255                                     iconCls:'user',\r
 256                                     leaf:true\r
 257                                 },{\r
 258                                     text:'Brian',\r
 259                                     iconCls:'user',\r
 260                                     leaf:true\r
 261                                 },{\r
 262                                     text:'Jon',\r
 263                                     iconCls:'user',\r
 264                                     leaf:true\r
 265                                 },{\r
 266                                     text:'Tim',\r
 267                                     iconCls:'user',\r
 268                                     leaf:true\r
 269                                 },{\r
 270                                     text:'Nige',\r
 271                                     iconCls:'user',\r
 272                                     leaf:true\r
 273                                 },{\r
 274                                     text:'Fred',\r
 275                                     iconCls:'user',\r
 276                                     leaf:true\r
 277                                 },{\r
 278                                     text:'Bob',\r
 279                                     iconCls:'user',\r
 280                                     leaf:true\r
 281                                 }]\r
 282                             },{\r
 283                                 text:'Family',\r
 284                                 expanded:true,\r
 285                                 children:[{\r
 286                                     text:'Kelly',\r
 287                                     iconCls:'user-girl',\r
 288                                     leaf:true\r
 289                                 },{\r
 290                                     text:'Sara',\r
 291                                     iconCls:'user-girl',\r
 292                                     leaf:true\r
 293                                 },{\r
 294                                     text:'Zack',\r
 295                                     iconCls:'user-kid',\r
 296                                     leaf:true\r
 297                                 },{\r
 298                                     text:'John',\r
 299                                     iconCls:'user-kid',\r
 300                                     leaf:true\r
 301                                 }]\r
 302                             }]\r
 303                         })\r
 304                     }), {\r
 305                         title: 'Settings',\r
 306                         html:'<p>Something useful would be in here.</p>',\r
 307                         autoScroll:true\r
 308                     },{\r
 309                         title: 'Even More Stuff',\r
 310                         html : '<p>Something useful would be in here.</p>'\r
 311                     },{\r
 312                         title: 'My Stuff',\r
 313                         html : '<p>Something useful would be in here.</p>'\r
 314                     }\r
 315                 ]\r
 316             });\r
 317         }\r
 318         win.show();\r
 319     }\r
 320 });\r
 321 \r
 322 // for example purposes\r
 323 var windowIndex = 0;\r
 324 \r
 325 MyDesktop.BogusModule = Ext.extend(Ext.app.Module, {\r
 326     init : function(){\r
 327         this.launcher = {\r
 328             text: 'Window '+(++windowIndex),\r
 329             iconCls:'bogus',\r
 330             handler : this.createWindow,\r
 331             scope: this,\r
 332             windowId:windowIndex\r
 333         }\r
 334     },\r
 335 \r
 336     createWindow : function(src){\r
 337         var desktop = this.app.getDesktop();\r
 338         var win = desktop.getWindow('bogus'+src.windowId);\r
 339         if(!win){\r
 340             win = desktop.createWindow({\r
 341                 id: 'bogus'+src.windowId,\r
 342                 title:src.text,\r
 343                 width:640,\r
 344                 height:480,\r
 345                 html : '<p>Something useful would be in here.</p>',\r
 346                 iconCls: 'bogus',\r
 347                 shim:false,\r
 348                 animCollapse:false,\r
 349                 constrainHeader:true\r
 350             });\r
 351         }\r
 352         win.show();\r
 353     }\r
 354 });\r
 355 \r
 356 \r
 357 MyDesktop.BogusMenuModule = Ext.extend(MyDesktop.BogusModule, {\r
 358     init : function(){\r
 359         this.launcher = {\r
 360             text: 'Bogus Submenu',\r
 361             iconCls: 'bogus',\r
 362             handler: function() {\r
 363                                 return false;\r
 364                         },\r
 365             menu: {\r
 366                 items:[{\r
 367                     text: 'Bogus Window '+(++windowIndex),\r
 368                     iconCls:'bogus',\r
 369                     handler : this.createWindow,\r
 370                     scope: this,\r
 371                     windowId: windowIndex\r
 372                     },{\r
 373                     text: 'Bogus Window '+(++windowIndex),\r
 374                     iconCls:'bogus',\r
 375                     handler : this.createWindow,\r
 376                     scope: this,\r
 377                     windowId: windowIndex\r
 378                     },{\r
 379                     text: 'Bogus Window '+(++windowIndex),\r
 380                     iconCls:'bogus',\r
 381                     handler : this.createWindow,\r
 382                     scope: this,\r
 383                     windowId: windowIndex\r
 384                     },{\r
 385                     text: 'Bogus Window '+(++windowIndex),\r
 386                     iconCls:'bogus',\r
 387                     handler : this.createWindow,\r
 388                     scope: this,\r
 389                     windowId: windowIndex\r
 390                     },{\r
 391                     text: 'Bogus Window '+(++windowIndex),\r
 392                     iconCls:'bogus',\r
 393                     handler : this.createWindow,\r
 394                     scope: this,\r
 395                     windowId: windowIndex\r
 396                 }]\r
 397             }\r
 398         }\r
 399     }\r
 400 });\r
 401 \r
 402 \r
 403 // Array data for the grid\r
 404 Ext.grid.dummyData = [\r
 405     ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],\r
 406     ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],\r
 407     ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],\r
 408     ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],\r
 409     ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],\r
 410     ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],\r
 411     ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],\r
 412     ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],\r
 413     ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],\r
 414     ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],\r
 415     ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],\r
 416     ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],\r
 417     ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],\r
 418     ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],\r
 419     ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],\r
 420     ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],\r
 421     ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],\r
 422     ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],\r
 423     ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],\r
 424     ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']\r
 425 ];