examples/desktop/sample.js

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