3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
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.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
20 'Ext.container.Viewport',
31 Ext.onReady(function() {
32 Ext.panel.Panel.prototype.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };
61 title: 'Collapsed Panel',
64 html : 'Some content',
80 title: 'Masked Panel',
83 html : 'Some content',
89 p.body.mask('Loading...');
106 title: 'Framed Panel',
129 html : 'Some content',
141 title: 'Collapsed Framed Panel',
145 html : 'Some content',
154 Ext.createWidget('window', {
166 html : 'Click Submit for Confirmation Msg.',
171 resizable: { handles: 's' },
181 handler: function() {
182 Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?');
189 * Toolbar with a menu
191 var menu = Ext.createWidget('menu', {
194 {text: 'Check 1', checked: true},
195 {text: 'Check 2', checked: false},
197 {text: 'Option 1', checked: true, group: 'opts'},
198 {text: 'Option 2', checked: false, group: 'opts'},
202 menu: Ext.createWidget('menu', {
220 title: 'Basic Panel With Toolbars',
225 xtype: 'buttongroup',
226 title: 'Button Group',
235 menu: [{text: 'Menu Button 1'}]
240 menu: [{text: 'Cut Menu Item'}]
246 'Toolbar & Menus',
256 xtype: 'splitbutton',
257 text : 'Split Button',
258 menu : Ext.createWidget('menu', {
269 text : 'Toggle Button'
281 * Form and form widgets
287 title: 'Form Widgets',
317 bodyPadding: '10 20',
331 fieldLabel: 'TextField',
334 emptyText : 'Enter a value'
337 fieldLabel: 'ComboBox',
339 store: ['Foo', 'Bar']
342 fieldLabel: 'DateField',
347 fieldLabel: 'TimeField',
352 fieldLabel: 'NumberField',
353 xtype : 'numberfield',
355 emptyText : '(This field is optional)',
359 fieldLabel: 'TextArea',
360 xtype : 'textareafield',
362 cls : 'x-form-valid',
363 value : 'This field is hard-coded to have the "valid" style (it will require some code changes to add/remove this style dynamically)'
366 fieldLabel: 'Checkboxes',
367 xtype: 'checkboxgroup',
370 {boxLabel: 'Foo', checked: true,id:'fooChk',inputId:'fooChkInput'},
375 fieldLabel: 'Radios',
378 items: [{boxLabel: 'Foo', checked: true, name: 'radios'},{boxLabel: 'Bar', name: 'radios'}]
383 xtype : 'htmleditor',
386 value : 'Mouse over toolbar for tooltips.<br /><br />The HTMLEditor IFrame requires a refresh between a stylesheet switch to get accurate colors.',
391 title : 'Plain Fieldset',
398 {boxLabel: 'Radio A', checked: true, name: 'radiogrp2'},
399 {boxLabel: 'Radio B', name: 'radiogrp2'}
406 title : 'Collapsible Fieldset',
409 { xtype: 'checkbox', boxLabel: 'Checkbox 1' },
410 { xtype: 'checkbox', boxLabel: 'Checkbox 2' }
415 title : 'Checkbox Fieldset',
416 checkboxToggle: true,
418 { xtype: 'radio', boxLabel: 'Radio 1', name: 'radiongrp1' },
419 { xtype: 'radio', boxLabel: 'Radio 2', name: 'radiongrp1' }
426 text :'Toggle Enabled',
427 handler: function() {
428 this.up('form').items.each(function(item) {
429 item.setDisabled(!item.disabled);
435 handler: function() {
436 Ext.getCmp('form-widgets').getForm().reset();
441 handler: function() {
442 Ext.getCmp('form-widgets').getForm().isValid();
459 title : 'BorderLayout Panel',
481 collapseMode: 'mini',
489 collapseMode: 'mini',
513 ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
514 ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
515 ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
516 ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
517 ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
518 ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
519 ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
520 ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
521 ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
522 ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am']
525 var store = Ext.create('Ext.data.ArrayStore', {
528 {name: 'price', type: 'float'},
529 {name: 'change', type: 'float'},
530 {name: 'pctChange', type: 'float'},
531 {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
534 property : 'company',
541 var pagingBar = Ext.createWidget('pagingtoolbar', {
544 displayMsg : 'Displaying topics {0} - {1} of {2}'
561 {header: "Company", flex: 1, sortable: true, dataIndex: 'company'},
562 {header: "Price", width: 75, sortable: true, dataIndex: 'price'},
563 {header: "Change", width: 75, sortable: true, dataIndex: 'change'},
564 {header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange'},
565 {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
578 xtype: 'triggerfield',
579 trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
580 trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger'
585 //=============================================================
587 //=============================================================
588 var tree = Ext.create('Ext.tree.Panel', {
610 title : 'Accordion and TreePanel',
620 'background-color': '#eee'
629 html : 'Some content'
634 items.push(accConfig);
648 bodyStyle: 'padding:10px;'
654 html : 'Free-standing tab panel'
667 items.push(Ext.applyIf({
670 enableTabScroll: true,
675 html : 'Tab panel 1 content'
679 html : 'Tab panel 2 content',
684 html : 'Tab panel 3 content',
689 html : 'Tab panel 4 content',
694 html : 'Tab panel 5 content',
699 html : 'Tab panel 6 content',
705 items.push(Ext.apply({
726 //=============================================================
728 //=============================================================
729 var rszEl = Ext.getBody().createChild({
730 style: 'background: transparent;',
731 html: '<div style="padding:20px;">Resizable handles</div>'
734 rszEl.position('absolute', 1, 240, 1130);
735 rszEl.setSize(180, 180);
736 Ext.create('Ext.resizer.Resizer', {
743 * ProgressBar / Slider
745 var progressbar = Ext.createWidget('progressbar', {
751 title: 'ProgressBar / Slider',
787 title: 'Framed Grid',
791 emptyText: 'No images to display',
793 enableColumnMove: false,
795 {header: "Company", flex: 1, sortable: true, dataIndex: 'company'},
796 {header: "Price", width: 75, sortable: true, dataIndex: 'price'},
797 {header: "Change", width: 75, sortable: true, dataIndex: 'change'}
804 Ext.createWidget('window', {
813 bodyPadding: '5 5 0 5',
818 resizable: { handles: 's' },
824 title : 'Plain Fieldset',
827 fieldLabel: 'TextField',
830 emptyText : 'Enter a value',
834 fieldLabel: 'ComboBox',
836 store : ['Foo', 'Bar'],
840 fieldLabel: 'DateField',
846 fieldLabel: 'TimeField',
852 fieldLabel: 'NumberField',
853 xtype : 'numberfield',
855 emptyText : '(This field is optional)',
860 fieldLabel: 'TextArea',
861 xtype : 'textareafield',
863 cls : 'x-form-valid',
864 value : 'This field is hard-coded to have the "valid" style (it will require some code changes to add/remove this style dynamically)',
868 fieldLabel: 'Checkboxes',
869 xtype: 'checkboxgroup',
872 {boxLabel: 'Foo', checked: true,id:'fooChk1',inputId:'fooChkInput1'},
879 fieldLabel: 'Radio Group',
881 {boxLabel: 'Radio A', checked: true, name: 'radiogrp2'},
882 {boxLabel: 'Radio B', name: 'radiogrp2'}
892 handler: function() {
893 Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?');
899 for (var i = 0; i < items.length; i++) {
903 var item = Ext.ComponentManager.create(items[i], 'panel');
904 item.render(document.body);
907 setTimeout(function() {
908 Ext.QuickTips.init();
910 text: 'Progress text...'
915 * Stylesheet Switcher
917 Ext.get('styleswitcher_select').on('change', function(e, select) {
918 var name = select[select.selectedIndex].value,
919 currentPath = window.location.pathname,
920 isCurrent = currentPath.match(name);
923 window.location = name;