examples/sandbox/sample.js

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