examples/desktop/sample.js

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