-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
+Ext.Loader.setConfig({
+ enabled: true
+});
+
+Ext.Loader.setPath('Ext.ux', '../ux/');
+
+Ext.require([
+ 'Ext.panel.Panel',
+ 'Ext.button.Button',
+ 'Ext.window.Window',
+ 'Ext.ux.statusbar.StatusBar',
+ 'Ext.toolbar.TextItem',
+ 'Ext.menu.Menu',
+ 'Ext.toolbar.Spacer',
+ 'Ext.button.Split',
+ 'Ext.form.field.TextArea'
+]);
+
Ext.onReady(function(){
// This is a shared function that simulates a load action on a StatusBar.
btn.disable();
statusBar.showBusy();
- (function(){
+ Ext.defer(function(){
statusBar.clearStatus({useDefaults:true});
btn.enable();
- }).defer(2000);
+ }, 2000);
};
/*
* ================ Basic StatusBar example =======================
*/
- new Ext.Panel({
+ Ext.create('Ext.Panel', {
title: 'Basic StatusBar',
renderTo: 'basic',
width: 550,
xtype: 'button',
id: 'basic-button',
text: 'Do Loading',
- handler: loadFn.createCallback('basic-button', 'basic-statusbar')
+ handler: Ext.Function.pass(loadFn, ['basic-button', 'basic-statusbar'])
}],
- bbar: new Ext.ux.StatusBar({
+ bbar: Ext.create('Ext.ux.StatusBar', {
id: 'basic-statusbar',
// defaults to use when the status is cleared:
// any standard Toolbar items:
items: [
{
+ xtype: 'button',
text: 'Show Warning & Clear',
handler: function (){
var sb = Ext.getCmp('basic-statusbar');
}
},
{
+ xtype: 'button',
text: 'Show Busy',
handler: function (){
var sb = Ext.getCmp('basic-statusbar');
}
},
{
+ xtype: 'button',
text: 'Clear status',
handler: function (){
var sb = Ext.getCmp('basic-statusbar');
/*
* ================ Right-aligned StatusBar example =======================
*/
- new Ext.Panel({
+ Ext.create('Ext.Panel', {
title: 'Right-aligned StatusBar',
renderTo: 'right-aligned',
width: 550,
xtype: 'button',
id: 'right-button',
text: 'Do Loading',
- handler: loadFn.createCallback('right-button', 'right-statusbar')
+ handler: Ext.Function.pass(loadFn, ['right-button', 'right-statusbar'])
}],
- bbar: new Ext.ux.StatusBar({
+ bbar: Ext.create('Ext.ux.StatusBar', {
defaultText: 'Default status',
id: 'right-statusbar',
statusAlign: 'right', // the magic config
/*
* ================ StatusBar Window example =======================
*/
- var win = new Ext.Window({
+ var win = Ext.create('Ext.Window', {
title: 'StatusBar Window',
width: 400,
minWidth: 350,
xtype: 'button',
id: 'win-button',
text: 'Do Loading',
- handler: loadFn.createCallback('win-button', 'win-statusbar')
+ handler: Ext.Function.pass(loadFn, ['win-button', 'win-statusbar'])
}],
- bbar: new Ext.ux.StatusBar({
+ bbar: Ext.create('Ext.ux.StatusBar', {
id: 'win-statusbar',
defaultText: 'Ready',
items: [{
+ xtype: 'button',
text: 'A Button'
}, '-',
- new Date().format('n/d/Y'), ' ', ' ', '-', {
- xtype:'tbsplit',
+ Ext.Date.format(new Date(), 'n/d/Y'), ' ', ' ', '-', {
+ xtype:'splitbutton',
text:'Status Menu',
menuAlign: 'br-tr?',
- menu: new Ext.menu.Menu({
+ menu: Ext.create('Ext.menu.Menu', {
items: [{text: 'Item 1'}, {text: 'Item 2'}]
})
}]
})
});
- new Ext.Button({
+ Ext.create('Ext.Button', {
text: 'Show Window',
renderTo: 'window',
handler: function(){
*
*/
// Create these explicitly so we can manipulate them later
- var wordCount = new Ext.Toolbar.TextItem('Words: 0');
- var charCount = new Ext.Toolbar.TextItem('Chars: 0');
- var clock = new Ext.Toolbar.TextItem('');
+ var wordCount = Ext.create('Ext.toolbar.TextItem', {text: 'Words: 0'});
+ var charCount = Ext.create('Ext.toolbar.TextItem', {text: 'Chars: 0'});
+ var clock = Ext.create('Ext.toolbar.TextItem', {text: Ext.Date.format(new Date(), 'g:i:s A')});
- new Ext.Panel({
+ Ext.create('Ext.Panel', {
title: 'Ext Word Processor',
renderTo: 'word-proc',
width: 500,
autoHeight: true,
bodyStyle: 'padding:5px;',
layout: 'fit',
- bbar: new Ext.ux.StatusBar({
+ bbar: Ext.create('Ext.ux.StatusBar', {
id: 'word-status',
// These are just the standard toolbar TextItems we created above. They get
// custom classes below in the render handler which is what gives them their
xtype: 'textarea',
id: 'word-textarea',
enableKeyEvents: true,
+ hideLabel: true,
grow: true,
growMin: 100,
growMax: 200,
wc = v.match(/\b/g);
wc = wc ? wc.length / 2 : 0;
}
- Ext.fly(wordCount.getEl()).update('Words: '+wc);
+ Ext.fly(wordCount.getEl()).update('Words: '+wc);
Ext.fly(charCount.getEl()).update('Chars: '+cc);
- },
+ },
buffer: 1 // buffer to allow the value to update first
}
}
// styling. Also, since we are using a greedy spacer, we have to add a block level element
// into each text TD in order to give them a fixed width (TextItems are spans). Insert a
// spacer div into each TD using createChild() so that we can give it a width in CSS.
- Ext.fly(wordCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});
- Ext.fly(charCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});
- Ext.fly(clock.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});
+ Ext.fly(wordCount.getEl().parent()).addCls('x-status-text-panel').createChild({cls:'spacer'});
+ Ext.fly(charCount.getEl().parent()).addCls('x-status-text-panel').createChild({cls:'spacer'});
+ Ext.fly(clock.getEl().parent()).addCls('x-status-text-panel').createChild({cls:'spacer'});
// Kick off the clock timer that updates the clock el every second:
- Ext.TaskMgr.start({
- run: function(){
- Ext.fly(clock.getEl()).update(new Date().format('g:i:s A'));
- },
- interval: 1000
- });
+ Ext.TaskManager.start({
+ run: function(){
+ Ext.fly(clock.getEl()).update(Ext.Date.format(new Date(), 'g:i:s A'));
+ },
+ interval: 1000
+ });
},
delay: 100
}
Ext.fly('word-textarea').on('keypress', function(){
var sb = Ext.getCmp('word-status');
sb.showBusy('Saving draft...');
- (function(){
+ Ext.defer(function(){
sb.setStatus({
iconCls: 'x-status-saved',
- text: 'Draft auto-saved at ' + new Date().format('g:i:s A')
+ text: 'Draft auto-saved at ' + Ext.Date.format(new Date(), 'g:i:s A')
});
- }).defer(4000);
+ }, 4000);
}, this, {buffer:1500});
-});
\ No newline at end of file
+});
git.ithinksw.org / extjs.git / blobdiff