source: trunk/web/addons/job_monarch/lib/extjs-30/examples/desktop/sample.js @ 625

Last change on this file since 625 was 625, checked in by ramonb, 15 years ago

lib/extjs-30:

  • new ExtJS 3.0
File size: 14.9 KB
Line 
1/*!
2 * Ext JS Library 3.0.0
3 * Copyright(c) 2006-2009 Ext JS, LLC
4 * licensing@extjs.com
5 * http://www.extjs.com/license
6 */
7
8// Sample desktop configuration
9MyDesktop = 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 */
47MyDesktop.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
120MyDesktop.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
181MyDesktop.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
321var windowIndex = 0;
322
323MyDesktop.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
355MyDesktop.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
402Ext.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];
Note: See TracBrowser for help on using the repository browser.