3 * Copyright(c) 2006-2010 Sencha Inc.
5 * http://www.sencha.com/license
8 Ext.onReady(function(){
13 //=============================================================
14 // Layout grid toggle button
15 //=============================================================
23 // text: 'Toggle Layout Grid',
24 // handler: function(){
25 // Ext.getBody().toggleClass('x-layout-grid');
30 //=============================================================
32 //=============================================================
38 bodyStyle: {padding: '5px'},
48 title: 'Masked Panel',
50 bodyStyle: {padding: '5px'},
54 'render': function(p){
55 p.body.mask('Loading...');
65 title: 'Framed Panel',
76 bodyStyle: {padding: '5px'},
77 html: 'Click Submit for Confirmation Msg.',
91 iconCls: 'x-icon-btn-ok',
93 Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?');
98 //=============================================================
100 //=============================================================
101 var menu = new Ext.menu.Menu({
120 menu: new Ext.menu.Menu({
121 items: [{text: 'Item 1'},{text: 'Item 2'}]
129 title: 'Basic Panel With Toolbars',
131 tbar: ['Toolbar & Menus', ' ', '-', {
139 text: 'Split Button',
140 menu: new Ext.menu.Menu({
141 items: [{text: 'Item 1'},{text: 'Item 2'}]
147 text: 'Toggle Button'
154 //=============================================================
156 //=============================================================
160 title: 'Form Widgets',
166 {id:'toggle'},{id:'close'},{id:'minimize'},{id:'maximize'},{id:'restore'},{id:'gear'},{id:'pin'},
167 {id:'unpin'},{id:'right'},{id:'left'},{id:'up'},{id:'down'},{id:'refresh'},{id:'minus'},{id:'plus'},
168 {id:'help'},{id:'search'},{id:'save'},{id:'print'}
182 fieldLabel: 'TextField',
184 emptyText: 'Enter a value',
185 itemCls: 'x-form-required'
187 fieldLabel: 'ComboBox',
189 store: ['Foo', 'Bar'],
190 itemCls: 'x-form-required',
193 fieldLabel: 'DateField',
194 itemCls: 'x-form-required',
197 fieldLabel: 'TimeField',
198 itemCls: 'x-form-required',
201 fieldLabel: 'NumberField',
202 emptyText: '(This field is optional)',
206 fieldLabel: 'TextArea',
207 //msgTarget: 'under',
208 itemCls: 'x-form-required',
211 value: 'This field is hard-coded to have the "valid" style (it will require some code changes to add/remove this style dynamically)'
213 fieldLabel: 'Checkboxes',
214 xtype: 'checkboxgroup',
216 items: [{boxLabel: 'Foo', checked: true},{boxLabel: 'Bar'}]
218 fieldLabel: 'Radios',
221 items: [{boxLabel: 'Foo', checked: true, name: 'radios'},{boxLabel: 'Bar', name: 'radios'}]
225 value: 'Mouse over toolbar for tooltips.<br /><br />The HTMLEditor IFrame requires a refresh between a stylesheet switch to get accurate colors.',
228 Ext.get('styleswitcher').on('click', function(e){
229 Ext.getCmp('form-widgets').getForm().reset();
233 title: 'Plain Fieldset',
237 title: 'Collapsible Fieldset',
242 title: 'Checkbox Fieldset',
244 checkboxToggle: true,
248 text:'Toggle Enabled',
250 iconCls: 'x-icon-btn-toggle',
252 Ext.getCmp('form-widgets').getForm().items.each(function(ctl){
253 ctl.setDisabled(!ctl.disabled);
259 iconCls: 'x-icon-btn-reset',
261 Ext.getCmp('form-widgets').getForm().reset();
266 iconCls: 'x-icon-btn-ok',
268 Ext.getCmp('form-widgets').getForm().isValid();
273 //=============================================================
275 //=============================================================
280 title: 'BorderLayout Panel',
298 collapseMode: 'mini',
305 collapseMode: 'mini',
322 //=============================================================
324 //=============================================================
326 ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
327 ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
328 ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
329 ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
330 ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
331 ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
332 ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
333 ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
334 ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
335 ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am']
337 var store = new Ext.data.SimpleStore({
340 {name: 'price', type: 'float'},
341 {name: 'change', type: 'float'},
342 {name: 'pctChange', type: 'float'},
343 {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
346 field: 'company', direction: 'ASC'
349 var pagingBar = new Ext.PagingToolbar({
353 displayMsg: 'Displaying topics {0} - {1} of {2}'
355 store.loadData(myData);
361 {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
362 {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
363 {header: "Change", width: 75, sortable: true, dataIndex: 'change'},
364 {header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange'},
365 {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
368 autoExpandColumn: 'company',
376 { text: 'Toolbar' },'->',
377 new Ext.form.TwinTriggerField({
378 xtype: 'twintriggerfield',
379 trigger1Class: 'x-form-clear-trigger',
380 trigger2Class: 'x-form-search-trigger'
385 //=============================================================
387 //=============================================================
389 var listView = new Ext.list.ListView({
392 emptyText: 'No images to display',
393 reserveScrollOffset: true,
396 {id:'company',header: "Company", width: .5, sortable: true, dataIndex: 'company'},
397 {header: "Price", width: .25, sortable: true, tpl: '{price:usMoney}', dataIndex: 'price'},
398 {header: "Change", width: .25, sortable: true, dataIndex: 'change'}
410 title:'Simple ListView', // <i>(0 items selected)</i>
415 //=============================================================
417 //=============================================================
418 var tree = new Ext.tree.TreePanel({
424 var root = new Ext.tree.TreeNode({
428 tree.setRootNode(root);
430 root.appendChild(new Ext.tree.TreeNode({text: 'Item 1'}));
431 root.appendChild(new Ext.tree.TreeNode({text: 'Item 2'}));
432 var node = new Ext.tree.TreeNode({text: 'Folder'});
433 node.appendChild(new Ext.tree.TreeNode({text: 'Item 3'}));
434 root.appendChild(node);
437 title: 'Accordion and TreePanel',
443 'background-color': '#eee'
457 items.push(accConfig);
459 //=============================================================
461 //=============================================================
468 bodyStyle: 'padding:10px;'
472 html: 'Free-standing tab panel'
482 items.push(Ext.applyIf({
484 enableTabScroll: true,
487 html: 'Tab panel for display in a border layout'
506 }] // enable 4 through 7 to see tab scrolling
509 items.push(Ext.apply({
515 //=============================================================
517 //=============================================================
528 //=============================================================
530 //=============================================================
531 var rszEl = Ext.DomHelper.append(Ext.getBody(), {
532 style: 'background: transparent;', html: '<div style="padding:20px;">Resizable handles</div>'
534 rszEl.position('absolute', 1, 240, 1130);
535 rszEl.setSize(180, 180);
536 new Ext.Resizable(rszEl, {
541 //=============================================================
542 // ProgressBar / Slider
543 //=============================================================
546 title: 'ProgressBar / Slider',
550 bodyStyle: {padding: '15px'},
554 text: 'Progress text...'
567 //=============================================================
568 // Render everything!
569 //=============================================================
572 //cls: 'x-layout-grid',
577 Ext.getCmp('menu-btn').showMenu();
579 //=============================================================
580 // Stylesheet Switcher
581 //=============================================================
582 Ext.get('styleswitcher_select').on('change',function(e,select){
583 var name = select[select.selectedIndex].value;
584 setActiveStyleSheet(name);
587 var cookie = readCookie("style");
588 var title = cookie ? cookie : getPreferredStyleSheet();
589 Ext.get('styleswitcher_select').dom.value=title;