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