-Ext.onReady(function(){\r
-\r
- // This is a shared function that simulates a load action on a StatusBar.\r
- // It is reused by most of the example panels.\r
- var loadFn = function(btn, statusBar){\r
- btn = Ext.getCmp(btn);\r
- statusBar = Ext.getCmp(statusBar);\r
-\r
- btn.disable();\r
- statusBar.showBusy();\r
-\r
- (function(){\r
- statusBar.clearStatus({useDefaults:true});\r
- btn.enable();\r
- }).defer(2000);\r
- };\r
-\r
-/*\r
- * ================ Basic StatusBar example =======================\r
- */\r
- new Ext.Panel({\r
- title: 'Basic StatusBar',\r
- renderTo: 'basic',\r
- width: 550,\r
- height: 100,\r
- bodyStyle: 'padding:10px;',\r
- items:[{\r
- xtype: 'button',\r
- id: 'basic-button',\r
- text: 'Do Loading',\r
- handler: loadFn.createCallback('basic-button', 'basic-statusbar')\r
- }],\r
- bbar: new Ext.ux.StatusBar({\r
- id: 'basic-statusbar',\r
-\r
- // defaults to use when the status is cleared:\r
- defaultText: 'Default status text',\r
- //defaultIconCls: 'default-icon',\r
- \r
- // values to set initially:\r
- text: 'Ready',\r
- iconCls: 'x-status-valid',\r
-\r
- // any standard Toolbar items:\r
- items: [\r
- {\r
- text: 'Show Warning & Clear',\r
- handler: function (){\r
- var sb = Ext.getCmp('basic-statusbar');\r
- sb.setStatus({\r
- text: 'Oops!',\r
- iconCls: 'x-status-error',\r
- clear: true // auto-clear after a set interval\r
- });\r
- }\r
- },\r
- {\r
- text: 'Show Busy',\r
- handler: function (){\r
- var sb = Ext.getCmp('basic-statusbar');\r
- // Set the status bar to show that something is processing:\r
- sb.showBusy();\r
- }\r
- },\r
- {\r
- text: 'Clear status',\r
- handler: function (){\r
- var sb = Ext.getCmp('basic-statusbar');\r
- // once completed\r
- sb.clearStatus(); \r
- }\r
- },\r
- '-',\r
- 'Plain Text'\r
- ]\r
- })\r
- });\r
-\r
-/*\r
- * ================ Right-aligned StatusBar example =======================\r
- */\r
- new Ext.Panel({\r
- title: 'Right-aligned StatusBar',\r
- renderTo: 'right-aligned',\r
- width: 550,\r
- height: 100,\r
- bodyStyle: 'padding:10px;',\r
- items:[{\r
- xtype: 'button',\r
- id: 'right-button',\r
- text: 'Do Loading',\r
- handler: loadFn.createCallback('right-button', 'right-statusbar')\r
- }],\r
- bbar: new Ext.ux.StatusBar({\r
- defaultText: 'Default status',\r
- id: 'right-statusbar',\r
- statusAlign: 'right', // the magic config\r
- items: [{\r
- text: 'A Button'\r
- }, '-', 'Plain Text', ' ', ' ']\r
- })\r
- });\r
-\r
-/*\r
- * ================ StatusBar Window example =======================\r
- */\r
- var win = new Ext.Window({\r
- title: 'StatusBar Window',\r
- width: 400,\r
- minWidth: 350,\r
- height: 150,\r
- modal: true,\r
- closeAction: 'hide',\r
- bodyStyle: 'padding:10px;',\r
- items:[{\r
- xtype: 'button',\r
- id: 'win-button',\r
- text: 'Do Loading',\r
- handler: loadFn.createCallback('win-button', 'win-statusbar')\r
- }],\r
- bbar: new Ext.ux.StatusBar({\r
- id: 'win-statusbar',\r
- defaultText: 'Ready',\r
- items: [{\r
- text: 'A Button'\r
- }, '-',\r
- new Date().format('n/d/Y'), ' ', ' ', '-', {\r
- xtype:'tbsplit',\r
- text:'Status Menu',\r
- menuAlign: 'br-tr?',\r
- menu: new Ext.menu.Menu({\r
- items: [{text: 'Item 1'}, {text: 'Item 2'}]\r
- })\r
- }]\r
- })\r
- });\r
-\r
- new Ext.Button({\r
- text: 'Show Window',\r
- renderTo: 'window',\r
- handler: function(){\r
- win.show();\r
- }\r
- });\r
-\r
-/*\r
- * ================ Ext Word Processor example =======================\r
- *\r
- * The StatusBar used in this example is completely standard. What is\r
- * customized are the styles and event handling to make the example a\r
- * lot more dynamic and application-oriented.\r
- *\r
- */\r
- // Create these explicitly so we can manipulate them later\r
- var wordCount = new Ext.Toolbar.TextItem('Words: 0');\r
- var charCount = new Ext.Toolbar.TextItem('Chars: 0');\r
- var clock = new Ext.Toolbar.TextItem('');\r
-\r
- new Ext.Panel({\r
- title: 'Ext Word Processor',\r
- renderTo: 'word-proc',\r
- width: 500,\r
- autoHeight: true,\r
- bodyStyle: 'padding:5px;',\r
- layout: 'fit',\r
- bbar: new Ext.ux.StatusBar({\r
- id: 'word-status',\r
- // These are just the standard toolbar TextItems we created above. They get\r
- // custom classes below in the render handler which is what gives them their\r
- // customized inset appearance.\r
- items: [wordCount, ' ', charCount, ' ', clock, ' ']\r
- }),\r
- items: {\r
- xtype: 'textarea',\r
- id: 'word-textarea',\r
- enableKeyEvents: true,\r
- grow: true,\r
- growMin: 100,\r
- growMax: 200,\r
- listeners: {\r
- // After each keypress update the word and character count text items\r
- 'keypress': {\r
- fn: function(t){\r
- var v = t.getValue(),\r
- wc = 0, cc = v.length ? v.length : 0;\r
-\r
- if(cc > 0){\r
- wc = v.match(/\b/g);\r
- wc = wc ? wc.length / 2 : 0;\r
- }\r
- Ext.fly(wordCount.getEl()).update('Words: '+wc);\r
- Ext.fly(charCount.getEl()).update('Chars: '+cc);\r
- },\r
- buffer: 1 // buffer to allow the value to update first\r
- }\r
- }\r
- },\r
- listeners: {\r
- render: {\r
- fn: function(){\r
- // Add a class to the parent TD of each text item so we can give them some custom inset box\r
- // styling. Also, since we are using a greedy spacer, we have to add a block level element\r
- // into each text TD in order to give them a fixed width (TextItems are spans). Insert a\r
- // spacer div into each TD using createChild() so that we can give it a width in CSS.\r
- Ext.fly(wordCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});\r
- Ext.fly(charCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});\r
- Ext.fly(clock.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});\r
-\r
- // Kick off the clock timer that updates the clock el every second:\r
- Ext.TaskMgr.start({\r
- run: function(){\r
- Ext.fly(clock.getEl()).update(new Date().format('g:i:s A'));\r
- },\r
- interval: 1000\r
- });\r
- },\r
- delay: 100\r
- }\r
- }\r
- });\r
-\r
- // This sets up a fake auto-save function. It monitors keyboard activity and after no typing\r
- // has occurred for 1.5 seconds, it updates the status message to indicate that it's saving.\r
- // After a fake delay so that you can see the save activity it will update again to indicate\r
- // that the action succeeded.\r
- Ext.fly('word-textarea').on('keypress', function(){\r
- var sb = Ext.getCmp('word-status');\r
- sb.showBusy('Saving draft...');\r
- (function(){\r
- sb.setStatus({\r
- iconCls: 'x-status-saved',\r
- text: 'Draft auto-saved at ' + new Date().format('g:i:s A')\r
- });\r
- }).defer(4000);\r
- }, this, {buffer:1500});\r
-\r
+Ext.onReady(function(){
+
+ // This is a shared function that simulates a load action on a StatusBar.
+ // It is reused by most of the example panels.
+ var loadFn = function(btn, statusBar){
+ btn = Ext.getCmp(btn);
+ statusBar = Ext.getCmp(statusBar);
+
+ btn.disable();
+ statusBar.showBusy();
+
+ (function(){
+ statusBar.clearStatus({useDefaults:true});
+ btn.enable();
+ }).defer(2000);
+ };
+
+/*
+ * ================ Basic StatusBar example =======================
+ */
+ new Ext.Panel({
+ title: 'Basic StatusBar',
+ renderTo: 'basic',
+ width: 550,
+ height: 100,
+ bodyStyle: 'padding:10px;',
+ items:[{
+ xtype: 'button',
+ id: 'basic-button',
+ text: 'Do Loading',
+ handler: loadFn.createCallback('basic-button', 'basic-statusbar')
+ }],
+ bbar: new Ext.ux.StatusBar({
+ id: 'basic-statusbar',
+
+ // defaults to use when the status is cleared:
+ defaultText: 'Default status text',
+ //defaultIconCls: 'default-icon',
+
+ // values to set initially:
+ text: 'Ready',
+ iconCls: 'x-status-valid',
+
+ // any standard Toolbar items:
+ items: [
+ {
+ text: 'Show Warning & Clear',
+ handler: function (){
+ var sb = Ext.getCmp('basic-statusbar');
+ sb.setStatus({
+ text: 'Oops!',
+ iconCls: 'x-status-error',
+ clear: true // auto-clear after a set interval
+ });
+ }
+ },
+ {
+ text: 'Show Busy',
+ handler: function (){
+ var sb = Ext.getCmp('basic-statusbar');
+ // Set the status bar to show that something is processing:
+ sb.showBusy();
+ }
+ },
+ {
+ text: 'Clear status',
+ handler: function (){
+ var sb = Ext.getCmp('basic-statusbar');
+ // once completed
+ sb.clearStatus();
+ }
+ },
+ '-',
+ 'Plain Text'
+ ]
+ })
+ });
+
+/*
+ * ================ Right-aligned StatusBar example =======================
+ */
+ new Ext.Panel({
+ title: 'Right-aligned StatusBar',
+ renderTo: 'right-aligned',
+ width: 550,
+ height: 100,
+ bodyStyle: 'padding:10px;',
+ items:[{
+ xtype: 'button',
+ id: 'right-button',
+ text: 'Do Loading',
+ handler: loadFn.createCallback('right-button', 'right-statusbar')
+ }],
+ bbar: new Ext.ux.StatusBar({
+ defaultText: 'Default status',
+ id: 'right-statusbar',
+ statusAlign: 'right', // the magic config
+ items: [{
+ text: 'A Button'
+ }, '-', 'Plain Text', ' ', ' ']
+ })
+ });
+
+/*
+ * ================ StatusBar Window example =======================
+ */
+ var win = new Ext.Window({
+ title: 'StatusBar Window',
+ width: 400,
+ minWidth: 350,
+ height: 150,
+ modal: true,
+ closeAction: 'hide',
+ bodyStyle: 'padding:10px;',
+ items:[{
+ xtype: 'button',
+ id: 'win-button',
+ text: 'Do Loading',
+ handler: loadFn.createCallback('win-button', 'win-statusbar')
+ }],
+ bbar: new Ext.ux.StatusBar({
+ id: 'win-statusbar',
+ defaultText: 'Ready',
+ items: [{
+ text: 'A Button'
+ }, '-',
+ new Date().format('n/d/Y'), ' ', ' ', '-', {
+ xtype:'tbsplit',
+ text:'Status Menu',
+ menuAlign: 'br-tr?',
+ menu: new Ext.menu.Menu({
+ items: [{text: 'Item 1'}, {text: 'Item 2'}]
+ })
+ }]
+ })
+ });
+
+ new Ext.Button({
+ text: 'Show Window',
+ renderTo: 'window',
+ handler: function(){
+ win.show();
+ }
+ });
+
+/*
+ * ================ Ext Word Processor example =======================
+ *
+ * The StatusBar used in this example is completely standard. What is
+ * customized are the styles and event handling to make the example a
+ * lot more dynamic and application-oriented.
+ *
+ */
+ // 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('');
+
+ new Ext.Panel({
+ title: 'Ext Word Processor',
+ renderTo: 'word-proc',
+ width: 500,
+ autoHeight: true,
+ bodyStyle: 'padding:5px;',
+ layout: 'fit',
+ bbar: new 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
+ // customized inset appearance.
+ items: [wordCount, ' ', charCount, ' ', clock, ' ']
+ }),
+ items: {
+ xtype: 'textarea',
+ id: 'word-textarea',
+ enableKeyEvents: true,
+ grow: true,
+ growMin: 100,
+ growMax: 200,
+ listeners: {
+ // After each keypress update the word and character count text items
+ 'keypress': {
+ fn: function(t){
+ var v = t.getValue(),
+ wc = 0, cc = v.length ? v.length : 0;
+
+ if(cc > 0){
+ wc = v.match(/\b/g);
+ wc = wc ? wc.length / 2 : 0;
+ }
+ Ext.fly(wordCount.getEl()).update('Words: '+wc);
+ Ext.fly(charCount.getEl()).update('Chars: '+cc);
+ },
+ buffer: 1 // buffer to allow the value to update first
+ }
+ }
+ },
+ listeners: {
+ render: {
+ fn: function(){
+ // Add a class to the parent TD of each text item so we can give them some custom inset box
+ // 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'});
+
+ // 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
+ });
+ },
+ delay: 100
+ }
+ }
+ });
+
+ // This sets up a fake auto-save function. It monitors keyboard activity and after no typing
+ // has occurred for 1.5 seconds, it updates the status message to indicate that it's saving.
+ // After a fake delay so that you can see the save activity it will update again to indicate
+ // that the action succeeded.
+ Ext.fly('word-textarea').on('keypress', function(){
+ var sb = Ext.getCmp('word-status');
+ sb.showBusy('Saving draft...');
+ (function(){
+ sb.setStatus({
+ iconCls: 'x-status-saved',
+ text: 'Draft auto-saved at ' + new Date().format('g:i:s A')
+ });
+ }).defer(4000);
+ }, this, {buffer:1500});
+
git.ithinksw.org / extjs.git / blobdiff