--- /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