source: trunk/web/addons/job_monarch/lib/extjs-30/examples/layout-browser/layouts/combination.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: 7.4 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 * ================  TabPanel with nested layouts  =======================
9 */
10// fake grid data used below in the tabsNestedLayouts config
11var myData = [
12    ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
13    ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
14    ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
15    ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
16    ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
17    ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
18    ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
19    ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
20    ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
21    ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
22    ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
23    ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
24    ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
25    ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
26    ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
27    ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
28    ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
29    ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
30    ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
31    ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
32    ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
33    ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
34    ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
35    ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
36    ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
37    ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
38    ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
39    ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
40    ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
41];
42
43var tabsNestedLayouts = {
44        xtype: 'tabpanel',
45        id: 'tabs-nested-layouts-panel',
46        title: 'TabPanel with Nested Layouts',
47        activeTab: 0,
48        items:[{
49                title: 'Foo',
50                layout: 'border',
51                items: [{
52                        region: 'north',
53                        title: 'North',
54                        height: 75,
55                        maxSize: 150,
56                        margins: '5 5 0 5',
57                        bodyStyle: 'padding:10px;',
58                        split: true,
59                        html: 'Some content'
60                },{
61                        xtype: 'tabpanel',
62                        plain: true,
63                        region: 'center',
64                        margins: '0 5 5 5',
65                        activeTab: 0,
66                        items: [{
67                                title: 'Inner Tab 1',
68                                bodyStyle: 'padding:10px;',
69                                html: 'See Inner Tab 2 for another nested BorderLayout.'
70                        },{
71                                title: 'Inner Tab 2',
72                                cls: 'inner-tab-custom', // custom styles in layout-browser.css
73                                layout: 'border',
74                // Make sure IE can still calculate dimensions after a resize when the tab is not active.
75                // With display mode, if the tab is rendered but hidden, IE will mess up the layout on show:
76                hideMode: Ext.isIE ? 'offsets' : 'display',
77                                items: [{
78                                        title: 'West',
79                                        region: 'west',
80                                        collapsible: true,
81                                        width: 150,
82                                        minSize: 100,
83                                        maxSize: 350,
84                                        margins: '5 0 5 5',
85                                        cmargins: '5 5 5 5',
86                                        html: 'Hello',
87                                        bodyStyle:'padding:10px;',
88                                        split: true
89                                },{
90                                        xtype: 'tabpanel',
91                                        region: 'center',
92                                        margins: '5 5 5 0',
93                                        tabPosition: 'bottom',
94                                        activeTab: 0,
95                                        items: [{
96                                                // Panels that are used as tabs do not have title bars since the tab
97                                                // itself is the title container.  If you want to have a full title
98                                                // bar within a tab, you can easily nest another panel within the tab
99                                                // with layout:'fit' to acheive that:
100                                                title: 'Bottom Tab',
101                                                layout: 'fit',
102                                                items: {
103                                                        title: 'Interior Content',
104                                                        bodyStyle:'padding:10px;',
105                                                        border: false,
106                                                        html: 'See the next tab for a nested grid. The grid is not rendered until its tab is first accessed.'
107                                                }
108                                        },{
109                                                // A common mistake when adding grids to a layout is creating a panel first,
110                                                // then adding the grid to it.  GridPanel (xtype:'grid') is a Panel subclass,
111                                                // so you can add it directly as an item into a container.  Typically you will
112                                                // want to specify layout:'fit' on GridPanels so that they'll size along with
113                                                // their container and take up the available space.
114                                                title: 'Nested Grid',
115                                                xtype: 'grid',
116                                                layout: 'fit',
117                                        store: new Ext.data.ArrayStore({
118                                                fields: [
119                                                   {name: 'company'},
120                                                   {name: 'price', type: 'float'},
121                                                   {name: 'change', type: 'float'},
122                                                   {name: 'pctChange', type: 'float'},
123                                                   {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
124                                                ]
125                                            }),
126                                        columns: [
127                                            {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
128                                            {header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
129                                            {header: 'Change', width: 75, sortable: true, dataIndex: 'change'},
130                                            {header: '% Change', width: 75, sortable: true, dataIndex: 'pctChange'},
131                                            {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
132                                        ],
133                                        stripeRows: true,
134                                        autoExpandColumn: 'company',
135
136                                        // Add a listener to load the data only after the grid is rendered:
137                                        listeners: {
138                                                render: function(){
139                                                        this.store.loadData(myData);
140                                                }
141                                        }
142                                        }]
143                                }]
144                        }]
145                }]
146        },{
147                title: 'Bar',
148                bodyStyle: 'padding:10px;',
149                html: 'Nothing to see here.'
150        }]
151};
152
153/*
154 * ================  Absolute Layout Form  =======================
155 */
156var absform = new Ext.form.FormPanel({
157    baseCls: 'x-plain',
158    layout:'absolute',
159    url:'save-form.php',
160    border: true,
161    defaultType: 'textfield',
162
163    items: [{
164        x: 0,
165        y: 5,
166        xtype: 'label',
167        text: 'From:'
168    },{
169        x: 55,
170        y: 0,
171        name: 'from',
172        anchor:'100%'  // anchor width by %
173    },{
174        x: 0,
175        y: 32,
176        xtype: 'label',
177        text: 'To:'
178    },{
179        // The button is not a Field subclass, so it must be
180        // wrapped in a panel for proper positioning to work
181        xtype: 'panel',
182        x: 55,
183        y: 27,
184        items: {
185                xtype: 'button',
186                text: 'Contacts...'
187        }
188    },{
189        x: 135,
190        y: 27,
191        name: 'to',
192        anchor: '100%'  // anchor width by %
193    },{
194        x: 0,
195        y: 59,
196        xtype: 'label',
197        text: 'Subject:'
198    },{
199        x: 55,
200        y: 54,
201        name: 'subject',
202        anchor: '100%'  // anchor width by %
203    },{
204        x:0,
205        y: 81,
206        xtype: 'textarea',
207        name: 'msg',
208        anchor: '100% 100%'  // anchor width and height
209    }]
210});
211
212var absoluteForm = {
213    title: 'Absolute Layout Form',
214    id: 'abs-form-panel',
215    layout: 'fit',
216    bodyStyle: 'padding:15px;',
217    items: {
218        title: 'New Email',
219        cls: 'email-form',
220            layout: 'fit',
221            frame: true,
222            bodyStyle: 'padding:10px 5px 5px;',
223            items: absform,
224
225            tbar: [{
226                text: 'Send',
227                iconCls: 'icon-send'
228            },'-',{
229                text: 'Save',
230                iconCls: 'icon-save'
231            },{
232                text: 'Check Spelling',
233                iconCls: 'icon-spell'
234            },'-',{
235                text: 'Print',
236                iconCls: 'icon-print'
237            },'->',{
238                text: 'Attach a File',
239                iconCls: 'icon-attach'
240            }]
241    }
242};
Note: See TracBrowser for help on using the repository browser.