X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/f5240829880f87e0cf581c6a296e436fdef0ef80..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/examples/themes/themes.js
diff --git a/examples/themes/themes.js b/examples/themes/themes.js
index dbcd4913..5b14e4df 100644
--- a/examples/themes/themes.js
+++ b/examples/themes/themes.js
@@ -1,340 +1,528 @@
-/*!
- * Ext JS Library 3.3.0
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-
-Ext.onReady(function(){
+/*
+
+This file is part of Ext JS 4
+
+Copyright (c) 2011 Sencha Inc
+
+Contact: http://www.sencha.com/contact
+
+GNU General Public License Usage
+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.
+
+If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
+
+*/
+Ext.require([
+ 'Ext.window.Window',
+ 'Ext.panel.Panel',
+ 'Ext.toolbar.*',
+ 'Ext.tree.Panel',
+ 'Ext.container.Viewport',
+ 'Ext.form.*',
+ 'Ext.tab.*',
+ 'Ext.slider.*',
+ 'Ext.layout.*',
+ 'Ext.button.*',
+ 'Ext.grid.*',
+ 'Ext.data.*',
+ 'EXt.util.*'
+]);
+
+Ext.onReady(function() {
+ Ext.panel.Panel.prototype.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };
+
var items = [];
-
- Ext.QuickTips.init();
-
- //=============================================================
- // Layout grid toggle button
- //=============================================================
-// items.push({
-// xtype: 'panel',
-// border: false,
-// width: 120,
-// x: 50, y: 20,
-// items: {
-// xtype: 'button',
-// text: 'Toggle Layout Grid',
-// handler: function(){
-// Ext.getBody().toggleClass('x-layout-grid');
-// }
-// }
-// });
-
- //=============================================================
- // Panel / Window
- //=============================================================
+
+ /**
+ * Basic panel
+ */
items.push({
xtype: 'panel',
- width: 150,
- height: 150,
+
+ x: 50, y: 80,
+
+ width : 150,
+ height: 90,
+
title: 'Basic Panel',
- bodyStyle: {padding: '5px'},
- html: 'Some content',
+ animCollapse: true,
+ bodyPadding: 5,
+ html : 'Some content'
+ });
+
+ items.push({
+ xtype: 'panel',
+
+ x: 50, y: 180,
+
+ width : 150,
+ height: 70,
+
+ title: 'Collapsed Panel',
+ animCollapse: true,
+ bodyPadding: 5,
+ html : 'Some content',
collapsible: true,
- x: 50, y: 100
+ collapsed: true
});
-
+
+ /**
+ * Masked Panel
+ */
items.push({
xtype: 'panel',
- width: 150,
- height: 150,
+
+ x: 210, y: 80,
+
+ width : 130,
+ height: 170,
+
title: 'Masked Panel',
- x: 210, y: 100,
- bodyStyle: {padding: '5px'},
- html: 'Some content',
+
+ bodyPadding: 5,
+ html : 'Some content',
+ animCollapse: true,
collapsible: true,
+
listeners: {
- 'render': function(p){
+ render: function(p) {
p.body.mask('Loading...');
},
- delay: 50
+ delay: 2000
}
});
-
+
+ /**
+ * Framed Panel
+ */
items.push({
xtype: 'panel',
- width: 150,
- height: 150,
+
+ x: 350, y: 80,
+
+ width : 170,
+ height: 100,
+
title: 'Framed Panel',
- html: 'Some content',
- frame: true,
+ animCollapse: true,
+
+ dockedItems: [{
+ dock: 'top',
+ xtype: 'toolbar',
+ items: [{
+ text: 'test'
+ }]
+ }, {
+ dock: 'right',
+ xtype: 'toolbar',
+ items: [{
+ text: 'test'
+ }]
+ }, {
+ dock: 'left',
+ xtype: 'toolbar',
+ items: [{
+ text: 'test'
+ }]
+ }],
+
+ html : 'Some content',
+ frame : true
+ });
+
+ items.push({
+ xtype: 'panel',
+
+ x: 350, y: 190,
+
+ width : 170,
+ height: 60,
+
+ title: 'Collapsed Framed Panel',
+ animCollapse: true,
+ bodyPadding: 5,
+ bodyBorder: true,
+ html : 'Some content',
+ frame : true,
collapsible: true,
- x: 370, y: 100
+ collapsed: true
});
-
- new Ext.Window({
- width: 150,
- height: 150,
+
+ /**
+ * Basic Window
+ */
+ Ext.createWidget('window', {
+ x: 530, y: 80,
+
+ width : 150,
+ height : 170,
+ minWidth: 150,
+ minHeight: 150,
+ maxHeight: 170,
+
title: 'Window',
- bodyStyle: {padding: '5px'},
- html: 'Click Submit for Confirmation Msg.',
+
+ bodyPadding: 5,
+ html : 'Click Submit for Confirmation Msg.',
+
collapsible: true,
- closable: false,
- draggable: false,
- shadow: false,
- resizable: false,
- x: 530, y: 100,
- tbar: [{
- text: 'Toolbar'
- }],
- buttons: [{
- text: 'Submit',
- id: 'message_box',
- cls: 'x-icon-btn',
- iconCls: 'x-icon-btn-ok',
- handler: function(){
- Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?');
+ closable : false,
+ draggable : false,
+ resizable: { handles: 's' },
+ animCollapse: true,
+
+ tbar: [
+ {text: 'Toolbar'}
+ ],
+ buttons: [
+ {
+ text : 'Submit',
+ id : 'message_box',
+ handler: function() {
+ Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?');
+ }
}
- }]
+ ]
}).show();
-
- //=============================================================
- // Toolbar / Menu
- //=============================================================
- var menu = new Ext.menu.Menu({
- items: [{
- text: 'Menu item'
- },{
- text: 'Check 1',
- checked: true
- },{
- text: 'Check 2',
- checked: false
- }, '-', {
- text: 'Option 1',
- checked: true,
- group: 'opts'
- },{
- text: 'Option 2',
- checked: false,
- group: 'opts'
- }, '-', {
- text: 'Sub-items',
- menu: new Ext.menu.Menu({
- items: [{text: 'Item 1'},{text: 'Item 2'}]
- })
- }]
+
+ /**
+ * Toolbar with a menu
+ */
+ var menu = Ext.createWidget('menu', {
+ items: [
+ {text: 'Menu item'},
+ {text: 'Check 1', checked: true},
+ {text: 'Check 2', checked: false},
+ '-',
+ {text: 'Option 1', checked: true, group: 'opts'},
+ {text: 'Option 2', checked: false, group: 'opts'},
+ '-',
+ {
+ text: 'Sub-items',
+ menu: Ext.createWidget('menu', {
+ items: [
+ {text: 'Item 1'},
+ {text: 'Item 2'}
+ ]
+ })
+ }
+ ]
});
+
items.push({
xtype: 'panel',
- width: 450,
- height: 150,
+
+ x: 690, y: 80,
+
+ width : 450,
+ height: 170,
+
title: 'Basic Panel With Toolbars',
- x: 690, y: 100,
- tbar: ['Toolbar & Menus', ' ', '-', {
- text: 'Button'
- },{
- text: 'Menu Button',
- id: 'menu-btn',
- menu: menu
- },{
- xtype: 'tbsplit',
- text: 'Split Button',
- menu: new Ext.menu.Menu({
- items: [{text: 'Item 1'},{text: 'Item 2'}]
- })
- },{
- xtype: 'button',
- enableToggle: true,
- pressed: true,
- text: 'Toggle Button'
- }],
- bbar: [{
- text: 'Bottom Bar'
- }]
+ collapsible: true,
+
+ tbar: [
+ {
+ xtype: 'buttongroup',
+ title: 'Button Group',
+ columns: 2,
+ defaults: {
+ scale: 'small'
+ },
+ items: [{
+ xtype:'splitbutton',
+ text: 'Menu Button',
+ iconCls: 'add16',
+ menu: [{text: 'Menu Button 1'}]
+ },{
+ xtype:'splitbutton',
+ text: 'Cut',
+ iconCls: 'add16',
+ menu: [{text: 'Cut Menu Item'}]
+ }]
+ }
+ ],
+ bbar: [
+
+ 'Toolbar & Menus',
+ ' ',
+ '-',
+ {text: 'Button'},
+ {
+ text: 'Menu Button',
+ id : 'menu-btn',
+ menu: menu
+ },
+ {
+ xtype: 'splitbutton',
+ text : 'Split Button',
+ menu : Ext.createWidget('menu', {
+ items: [
+ {text: 'Item 1'},
+ {text: 'Item 2'}
+ ]
+ })
+ },
+ {
+ xtype : 'button',
+ enableToggle: true,
+ pressed : true,
+ text : 'Toggle Button'
+ }
+ ],
+ lbar:[
+ { text: 'Left' }
+ ],
+ rbar: [
+ { text: 'Right' }
+ ]
});
-
- //=============================================================
- // Form widgets
- //=============================================================
+
+ /**
+ * Form and form widgets
+ */
items.push({
xtype: 'form',
- id: 'form-widgets',
+
+ id : 'form-widgets',
title: 'Form Widgets',
- width: 630,
+
+ x: 50, y: 260,
+
+ width : 630,
height: 700,
frame: true,
- x: 50, y: 260,
+ collapsible: true,
+
tools: [
- {id:'toggle'},{id:'close'},{id:'minimize'},{id:'maximize'},{id:'restore'},{id:'gear'},{id:'pin'},
- {id:'unpin'},{id:'right'},{id:'left'},{id:'up'},{id:'down'},{id:'refresh'},{id:'minus'},{id:'plus'},
- {id:'help'},{id:'search'},{id:'save'},{id:'print'}
+ {type:'toggle'},
+ {type:'close'},
+ {type:'minimize'},
+ {type:'maximize'},
+ {type:'restore'},
+ {type:'gear'},
+ {type:'pin'},
+ {type:'unpin'},
+ {type:'right'},
+ {type:'left'},
+ {type:'down'},
+ {type:'refresh'},
+ {type:'minus'},
+ {type:'plus'},
+ {type:'help'},
+ {type:'search'},
+ {type:'save'},
+ {type:'print'}
],
- bodyStyle: {
- padding: '10px 20px'
- },
+
+ bodyPadding: '10 20',
+
defaults: {
- anchor: '98%',
- msgTarget: 'side',
+ anchor : '98%',
+ msgTarget : 'side',
allowBlank: false
},
- items: [{
- xtype: 'label',
- text: 'Plain Label'
- },{
- fieldLabel: 'TextField',
- xtype: 'textfield',
- emptyText: 'Enter a value',
- itemCls: 'x-form-required'
- },{
- fieldLabel: 'ComboBox',
- xtype: 'combo',
- store: ['Foo', 'Bar'],
- itemCls: 'x-form-required',
- resizable: true
- },{
- fieldLabel: 'DateField',
- itemCls: 'x-form-required',
- xtype: 'datefield'
- },{
- fieldLabel: 'TimeField',
- itemCls: 'x-form-required',
- xtype: 'timefield'
- },{
- fieldLabel: 'NumberField',
- emptyText: '(This field is optional)',
- allowBlank: true,
- xtype: 'numberfield'
- },{
- fieldLabel: 'TextArea',
- //msgTarget: 'under',
- itemCls: 'x-form-required',
- xtype: 'textarea',
- cls: 'x-form-valid',
- value: 'This field is hard-coded to have the "valid" style (it will require some code changes to add/remove this style dynamically)'
- },{
- fieldLabel: 'Checkboxes',
- xtype: 'checkboxgroup',
- columns: [100,100],
- items: [{boxLabel: 'Foo', checked: true},{boxLabel: 'Bar'}]
- },{
- fieldLabel: 'Radios',
- xtype: 'radiogroup',
- columns: [100,100],
- items: [{boxLabel: 'Foo', checked: true, name: 'radios'},{boxLabel: 'Bar', name: 'radios'}]
- },{
- hideLabel: true,
- xtype: 'htmleditor',
- value: 'Mouse over toolbar for tooltips.
The HTMLEditor IFrame requires a refresh between a stylesheet switch to get accurate colors.',
- height: 110,
- handler: function(){
- Ext.get('styleswitcher').on('click', function(e){
- Ext.getCmp('form-widgets').getForm().reset();
- });
- }
- },{
- title: 'Plain Fieldset',
- xtype: 'fieldset',
- height: 50
- },{
- title: 'Collapsible Fieldset',
- xtype: 'fieldset',
- collapsible: true,
- height: 50
- },{
- title: 'Checkbox Fieldset',
- xtype: 'fieldset',
- checkboxToggle: true,
- height: 50
- }],
- buttons: [{
- text:'Toggle Enabled',
- cls: 'x-icon-btn',
- iconCls: 'x-icon-btn-toggle',
- handler: function(){
- Ext.getCmp('form-widgets').getForm().items.each(function(ctl){
- ctl.setDisabled(!ctl.disabled);
- });
- }
- },{
- text: 'Reset Form',
- cls: 'x-icon-btn',
- iconCls: 'x-icon-btn-reset',
- handler: function(){
- Ext.getCmp('form-widgets').getForm().reset();
+
+ items: [
+ {
+ xtype: 'label',
+ text : 'Plain Label'
+ },
+ {
+ fieldLabel: 'TextField',
+ xtype : 'textfield',
+ name : 'someField',
+ emptyText : 'Enter a value'
+ },
+ {
+ fieldLabel: 'ComboBox',
+ xtype: 'combo',
+ store: ['Foo', 'Bar']
+ },
+ {
+ fieldLabel: 'DateField',
+ xtype : 'datefield',
+ name : 'date'
+ },
+ {
+ fieldLabel: 'TimeField',
+ name: 'time',
+ xtype: 'timefield'
+ },
+ {
+ fieldLabel: 'NumberField',
+ xtype : 'numberfield',
+ name : 'number',
+ emptyText : '(This field is optional)',
+ allowBlank: true
+ },
+ {
+ fieldLabel: 'TextArea',
+ xtype : 'textareafield',
+ name : 'message',
+ cls : 'x-form-valid',
+ value : 'This field is hard-coded to have the "valid" style (it will require some code changes to add/remove this style dynamically)'
+ },
+ {
+ fieldLabel: 'Checkboxes',
+ xtype: 'checkboxgroup',
+ columns: [100,100],
+ items: [
+ {boxLabel: 'Foo', checked: true,id:'fooChk',inputId:'fooChkInput'},
+ {boxLabel: 'Bar'}
+ ]
+ },
+ {
+ fieldLabel: 'Radios',
+ xtype: 'radiogroup',
+ columns: [100,100],
+ items: [{boxLabel: 'Foo', checked: true, name: 'radios'},{boxLabel: 'Bar', name: 'radios'}]
+ },
+ {
+ hideLabel : true,
+ id : 'htmleditor',
+ xtype : 'htmleditor',
+ name : 'html',
+ enableColors: false,
+ value : 'Mouse over toolbar for tooltips.
The HTMLEditor IFrame requires a refresh between a stylesheet switch to get accurate colors.',
+ height : 110
+ },
+ {
+ xtype : 'fieldset',
+ title : 'Plain Fieldset',
+ items: [
+ {
+ hideLabel: true,
+ xtype: 'radiogroup',
+ columns: [100,100],
+ items: [
+ {boxLabel: 'Radio A', checked: true, name: 'radiogrp2'},
+ {boxLabel: 'Radio B', name: 'radiogrp2'}
+ ]
+ }
+ ]
+ },
+ {
+ xtype : 'fieldset',
+ title : 'Collapsible Fieldset',
+ collapsible: true,
+ items: [
+ { xtype: 'checkbox', boxLabel: 'Checkbox 1' },
+ { xtype: 'checkbox', boxLabel: 'Checkbox 2' }
+ ]
+ },
+ {
+ xtype : 'fieldset',
+ title : 'Checkbox Fieldset',
+ checkboxToggle: true,
+ items: [
+ { xtype: 'radio', boxLabel: 'Radio 1', name: 'radiongrp1' },
+ { xtype: 'radio', boxLabel: 'Radio 2', name: 'radiongrp1' }
+ ]
}
- },{
- text:'Validate',
- cls: 'x-icon-btn',
- iconCls: 'x-icon-btn-ok',
- handler: function(){
- Ext.getCmp('form-widgets').getForm().isValid();
+ ],
+
+ buttons: [
+ {
+ text :'Toggle Enabled',
+ handler: function() {
+ this.up('form').items.each(function(item) {
+ item.setDisabled(!item.disabled);
+ });
+ }
+ },
+ {
+ text : 'Reset Form',
+ handler: function() {
+ Ext.getCmp('form-widgets').getForm().reset();
+ }
+ },
+ {
+ text : 'Validate',
+ handler: function() {
+ Ext.getCmp('form-widgets').getForm().isValid();
+ }
}
- }]
+ ]
});
-
- //=============================================================
- // BorderLayout
- //=============================================================
+
+ /**
+ * Border layout
+ */
items.push({
xtype: 'panel',
- width: 450,
+
+ width : 450,
height: 350,
- title: 'BorderLayout Panel',
+
x: 690, y: 260,
+
+ title : 'BorderLayout Panel',
layout: 'border',
+ collapsible: true,
+
defaults: {
collapsible: true,
- split: true
+ split : true
},
- items: [{
- title: 'North',
- region: 'north',
- html: 'North',
- ctitle: 'North',
- margins: '5 5 0 5',
- height: 70
- },{
- title: 'South',
- region: 'south',
- html: 'South',
- collapseMode: 'mini',
- margins: '0 5 5 5',
- height: 70
- },{
- title: 'West',
- region: 'west',
- html: 'West',
- collapseMode: 'mini',
- margins: '0 0 0 5',
- width: 100
- },{
- title: 'East',
- region: 'east',
- html: 'East',
- margins: '0 5 0 0',
- width: 100
- },{
- title: 'Center',
- region: 'center',
- collapsible: false,
- html: 'Center'
- }]
+
+ items: [
+ {
+ title : 'North',
+ region : 'north',
+ html : 'North',
+ ctitle : 'North',
+ margins: '5 5 0 5',
+ height : 70
+ },
+ {
+ title : 'South',
+ region : 'south',
+ html : 'South',
+ collapseMode: 'mini',
+ margins : '0 5 5 5',
+ height : 70
+ },
+ {
+ title : 'West',
+ region : 'west',
+ html : 'West',
+ collapseMode: 'mini',
+ margins : '0 0 0 5',
+ width : 100
+ },
+ {
+ title : 'East',
+ region : 'east',
+ html : 'East',
+ margins: '0 5 0 0',
+ width : 100
+ },
+ {
+ title : 'Center',
+ region : 'center',
+ collapsible: false,
+ html : 'Center'
+ }
+ ]
});
-
- //=============================================================
- // Grid
- //=============================================================
- var myData = [
- ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
- ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
- ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
- ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
- ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
- ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
- ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
- ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
- ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
- ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am']
- ];
- var store = new Ext.data.SimpleStore({
+
+ /**
+ * Grid
+ */
+ var myData = [
+ ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
+ ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
+ ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
+ ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
+ ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
+ ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
+ ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
+ ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
+ ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
+ ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am']
+ ];
+
+ var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
@@ -342,249 +530,398 @@ Ext.onReady(function(){
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
- sortInfo: {
- field: 'company', direction: 'ASC'
- }
+ sorters: {
+ property : 'company',
+ direction: 'ASC'
+ },
+ data: myData,
+ pageSize: 8
});
- var pagingBar = new Ext.PagingToolbar({
- pageSize: 5,
- store: store,
+
+ var pagingBar = Ext.createWidget('pagingtoolbar', {
+ store : store,
displayInfo: true,
- displayMsg: 'Displaying topics {0} - {1} of {2}'
+ displayMsg : 'Displaying topics {0} - {1} of {2}'
});
- store.loadData(myData);
-
+
items.push({
- xtype: 'grid',
- store: store,
- columns: [
- {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
- {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
- {header: "Change", width: 75, sortable: true, dataIndex: 'change'},
- {header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange'},
- {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
- ],
- stripeRows: true,
- autoExpandColumn: 'company',
- loadMask: true,
+ xtype: 'gridpanel',
+
height: 200,
- width: 450,
+ width : 450,
+
x: 690, y: 620,
- title:'GridPanel',
- bbar: pagingBar,
- tbar: [
- { text: 'Toolbar' },'->',
- new Ext.form.TwinTriggerField({
- xtype: 'twintriggerfield',
- trigger1Class: 'x-form-clear-trigger',
- trigger2Class: 'x-form-search-trigger'
- })
- ]
- });
- //=============================================================
- // ListView
- //=============================================================
+ title: 'GridPanel',
+ collapsible: true,
- var listView = new Ext.list.ListView({
store: store,
- multiSelect: true,
- emptyText: 'No images to display',
- reserveScrollOffset: true,
columns: [
- {id:'company',header: "Company", width: .5, sortable: true, dataIndex: 'company'},
- {header: "Price", width: .25, sortable: true, tpl: '{price:usMoney}', dataIndex: 'price'},
- {header: "Change", width: .25, sortable: true, dataIndex: 'change'}
+ {header: "Company", flex: 1, sortable: true, dataIndex: 'company'},
+ {header: "Price", width: 75, sortable: true, dataIndex: 'price'},
+ {header: "Change", width: 75, sortable: true, dataIndex: 'change'},
+ {header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange'},
+ {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
+ ],
+ loadMask : true,
+
+ viewConfig: {
+ stripeRows: true
+ },
+
+ bbar: pagingBar,
+ tbar: [
+ {text: 'Toolbar'},
+ '->',
+ {
+ xtype: 'triggerfield',
+ trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
+ trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger'
+ }
]
});
-
- items.push({
- xtype:'panel',
- id:'images-view',
- width:250,
- height:182,
- x: 430, y: 1130,
- collapsible:false,
- layout:'fit',
- title:'Simple ListView', // (0 items selected)
- items: listView
-
- });
-
+
//=============================================================
// Accordion / Tree
//=============================================================
- var tree = new Ext.tree.TreePanel({
+ var tree = Ext.create('Ext.tree.Panel', {
title: 'TreePanel',
- autoScroll: true,
- enableDD: true
- });
-
- var root = new Ext.tree.TreeNode({
- text: 'Root Node',
- expanded: true
+ root: {
+ text: 'Root Node',
+ expanded: true,
+ children: [{
+ text: 'Item 1',
+ leaf: true
+ }, {
+ text: 'Item 2',
+ leaf: true
+ }, {
+ text: 'Folder',
+ children: [{
+ text: 'Item 3',
+ leaf: true
+ }]
+ }]
+ }
});
- tree.setRootNode(root);
- root.appendChild(new Ext.tree.TreeNode({text: 'Item 1'}));
- root.appendChild(new Ext.tree.TreeNode({text: 'Item 2'}));
- var node = new Ext.tree.TreeNode({text: 'Folder'});
- node.appendChild(new Ext.tree.TreeNode({text: 'Item 3'}));
- root.appendChild(node);
-
var accConfig = {
- title: 'Accordion and TreePanel',
+ title : 'Accordion and TreePanel',
+ collapsible: true,
layout: 'accordion',
+
x: 690, y: 830,
- width: 450,
+
+ width : 450,
height: 240,
+
bodyStyle: {
'background-color': '#eee'
},
- defaults: {
- border: false
- },
- items: [tree, {
- title: 'Item 2',
- html: 'Some content'
- },{
- title: 'Item 3',
- html: 'Some content'
- }]
- }
+
+ items: [
+ tree, {
+ title: 'Item 2',
+ html: 'Some content'
+ }, {
+ title: 'Item 3',
+ html : 'Some content'
+ }
+ ]
+ };
items.push(accConfig);
-
- //=============================================================
- // Tabs
- //=============================================================
+
+ /**
+ * Tabs
+ */
var tabCfg = {
xtype: 'tabpanel',
- activeTab: 0,
- width: 310,
+
+ width : 310,
height: 150,
+
+ activeTab: 0,
+
defaults: {
bodyStyle: 'padding:10px;'
},
- items: [{
- title: 'Tab 1',
- html: 'Free-standing tab panel'
- },{
- title: 'Tab 2',
- closable: true
- },{
- title: 'Tab 3',
- closable: true
- }]
+
+ items: [
+ {
+ title: 'Tab 1',
+ html : 'Free-standing tab panel'
+ },
+ {
+ title : 'Tab 2',
+ closable: true
+ },
+ {
+ title : 'Tab 3',
+ closable: true
+ }
+ ]
};
-
+
items.push(Ext.applyIf({
x: 50, y: 970,
+
enableTabScroll: true,
- items: [{
- title: 'Tab 1',
- html: 'Tab panel for display in a border layout'
- },{
- title: 'Tab 2',
- closable: true
- },{
- title: 'Tab 3',
- closable: true
- },{
- title: 'Tab 4',
- closable: true
- },{
- title: 'Tab 5',
- closable: true
- },{
- title: 'Tab 6',
- closable: true
- },{
- title: 'Tab 7',
- closable: true
- }] // enable 4 through 7 to see tab scrolling
+
+ items: [
+ {
+ title: 'Tab 1',
+ html : 'Tab panel 1 content'
+ },
+ {
+ title : 'Tab 2',
+ html : 'Tab panel 2 content',
+ closable: true
+ },
+ {
+ title : 'Tab 3',
+ html : 'Tab panel 3 content',
+ closable: true
+ },
+ {
+ title : 'Tab 4',
+ html : 'Tab panel 4 content',
+ closable: true
+ },
+ {
+ title : 'Tab 5',
+ html : 'Tab panel 5 content',
+ closable: true
+ },
+ {
+ title : 'Tab 6',
+ html : 'Tab panel 6 content',
+ closable: true
+ }
+ ]
}, tabCfg));
-
+
items.push(Ext.apply({
plain: true,
- x: 370, y: 970
+ x : 370, y: 970
}, tabCfg));
-
-
- //=============================================================
- // DatePicker
- //=============================================================
+
+ /**
+ * DatePicker
+ */
items.push({
xtype: 'panel',
- border: false,
- width: 180,
+
x: 50, y: 1130,
+
+ border: false,
+ width : 180,
+
items: {
xtype: 'datepicker'
}
});
-
+
//=============================================================
// Resizable
//=============================================================
- var rszEl = Ext.DomHelper.append(Ext.getBody(), {
- style: 'background: transparent;', html: 'Resizable handles
'
- }, true);
+ var rszEl = Ext.getBody().createChild({
+ style: 'background: transparent;',
+ html: 'Resizable handles
'
+ });
+
rszEl.position('absolute', 1, 240, 1130);
rszEl.setSize(180, 180);
- new Ext.Resizable(rszEl, {
+ Ext.create('Ext.resizer.Resizer', {
+ el: rszEl,
handles: 'all',
pinned: true
});
-
- //=============================================================
- // ProgressBar / Slider
- //=============================================================
+
+ /**
+ * ProgressBar / Slider
+ */
+ var progressbar = Ext.createWidget('progressbar', {
+ value: 0.5
+ });
+
items.push({
xtype: 'panel',
title: 'ProgressBar / Slider',
+
x: 690, y: 1080,
+
width: 450,
height: 200,
- bodyStyle: {padding: '15px'},
- items: [{
- xtype: 'progress',
- value: .5,
- text: 'Progress text...'
- },{
- xtype: 'slider',
- value: 50
- },{
- xtype: 'slider',
- vertical: true,
- value: 50,
- height: 100
- }]
+
+ bodyPadding: 5,
+ layout : {
+ type : 'vbox',
+ align: 'stretch'
+ },
+
+ items: [
+ progressbar,
+ {
+ xtype : 'slider',
+ hideLabel: true,
+ value : 50,
+ margin : '5 0 0 0'
+ },
+ {
+ xtype : 'slider',
+ vertical: true,
+ value : 50,
+ height : 100,
+ margin : '5 0 0 0'
+ }
+ ]
});
-
-
- //=============================================================
- // Render everything!
- //=============================================================
- new Ext.Viewport({
- layout: 'absolute',
- //cls: 'x-layout-grid',
- autoScroll: true,
- items: items
+
+ items.push({
+ width:250,
+ height:182,
+ x: 430, y: 1130,
+ xtype: 'gridpanel',
+ title: 'Framed Grid',
+ collapsible: true,
+ store: store,
+ multiSelect: true,
+ emptyText: 'No images to display',
+ frame: true,
+ enableColumnMove: false,
+ columns: [
+ {header: "Company", flex: 1, sortable: true, dataIndex: 'company'},
+ {header: "Price", width: 75, sortable: true, dataIndex: 'price'},
+ {header: "Change", width: 75, sortable: true, dataIndex: 'change'}
+ ]
});
- Ext.getCmp('menu-btn').showMenu();
-
- //=============================================================
- // Stylesheet Switcher
- //=============================================================
- Ext.get('styleswitcher_select').on('change',function(e,select){
- var name = select[select.selectedIndex].value;
- setActiveStyleSheet(name);
+ /**
+ * Basic Window
+ */
+ Ext.createWidget('window', {
+ x: 690, y: 1290,
+
+ width : 450,
+ // height : 360,
+ minWidth: 450,
+
+ title: 'Window',
+
+ bodyPadding: '5 5 0 5',
+
+ collapsible: true,
+ closable : false,
+ draggable : false,
+ resizable: { handles: 's' },
+ animCollapse: true,
+
+ items: [
+ {
+ xtype : 'fieldset',
+ title : 'Plain Fieldset',
+ items: [
+ {
+ fieldLabel: 'TextField',
+ xtype : 'textfield',
+ name : 'someField',
+ emptyText : 'Enter a value',
+ anchor : '100%'
+ },
+ {
+ fieldLabel: 'ComboBox',
+ xtype : 'combo',
+ store : ['Foo', 'Bar'],
+ anchor : '100%'
+ },
+ {
+ fieldLabel: 'DateField',
+ xtype : 'datefield',
+ name : 'date',
+ anchor : '100%'
+ },
+ {
+ fieldLabel: 'TimeField',
+ name : 'time',
+ xtype : 'timefield',
+ anchor : '100%'
+ },
+ {
+ fieldLabel: 'NumberField',
+ xtype : 'numberfield',
+ name : 'number',
+ emptyText : '(This field is optional)',
+ allowBlank: true,
+ anchor : '100%'
+ },
+ {
+ fieldLabel: 'TextArea',
+ xtype : 'textareafield',
+ name : 'message',
+ cls : 'x-form-valid',
+ value : 'This field is hard-coded to have the "valid" style (it will require some code changes to add/remove this style dynamically)',
+ anchor : '100%'
+ },
+ {
+ fieldLabel: 'Checkboxes',
+ xtype: 'checkboxgroup',
+ columns: [100,100],
+ items: [
+ {boxLabel: 'Foo', checked: true,id:'fooChk1',inputId:'fooChkInput1'},
+ {boxLabel: 'Bar'}
+ ]
+ },
+ {
+ xtype: 'radiogroup',
+ columns: [100,100],
+ fieldLabel: 'Radio Group',
+ items: [
+ {boxLabel: 'Radio A', checked: true, name: 'radiogrp2'},
+ {boxLabel: 'Radio B', name: 'radiogrp2'}
+ ]
+ }
+ ]
+ }
+ ],
+
+ buttons: [
+ {
+ text : 'Submit',
+ handler: function() {
+ Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?');
+ }
+ }
+ ]
+ }).show();
+
+ for (var i = 0; i < items.length; i++) {
+ items[i].style = {
+ position: 'absolute'
+ };
+ var item = Ext.ComponentManager.create(items[i], 'panel');
+ item.render(document.body);
+ }
+
+ setTimeout(function() {
+ Ext.QuickTips.init();
+ progressbar.wait({
+ text: 'Progress text...'
+ });
+ }, 7000);
+
+ /**
+ * Stylesheet Switcher
+ */
+ Ext.get('styleswitcher_select').on('change', function(e, select) {
+ var name = select[select.selectedIndex].value,
+ currentPath = window.location.pathname,
+ isCurrent = currentPath.match(name);
+
+ if (!isCurrent) {
+ window.location = name;
+ }
});
-
- var cookie = readCookie("style");
- var title = cookie ? cookie : getPreferredStyleSheet();
- Ext.get('styleswitcher_select').dom.value=title;
-});
\ No newline at end of file
+});
+