+++ /dev/null
-<html>\r
-<head>\r
- <title>The source code</title>\r
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body onload="prettyPrint();">\r
- <pre class="prettyprint lang-js">/*\r
- * Ext JS Library 2.2\r
- * Copyright(c) 2006-2008, Ext JS, LLC.\r
- * licensing@extjs.com\r
- *\r
- * http://extjs.com/license\r
- */\r
-\r
-\r
-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: 350,\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
- defaultText: 'Default status',\r
- id: 'basic-statusbar',\r
- items: [{\r
- text: 'A Button'\r
- }, '-', 'Plain Text', ' ', ' ']\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: 350,\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
-});</pre> \r
-</body>\r
-</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff