Extjs中状态栏里的巧妙使用.docx

Extjs中状态栏的巧妙使用例子中的一个小例子，效果图：全部html代码： Ext.ux.StatusBar Examples body .x-panel margin-bottom:20px; StatusBar Examples Here are several examples of using and customizing the Ext.ux.StatusBar component. Note that the js is not minified so it is readable. See statusbar-demo.js. Basic StatusBar This is a simple StatusBar with a few standard Toolbar items included. Right-Aligned StatusBar This is a simple StatusBar that has the status element right-aligned. Any StatusBar items will be added in exactly the same order on the left side of the bar. Status Window You can add a StatusBar to a window in exactly the same way. Customizing the Look and Feel This is a standard StatusBar with some custom CSS styles applied and some event handling in place to handle the TextAreas keypress events. Notice that after youve stopped typing for a few seconds a simulated auto-save process will begin. Ext.Loader.setConfig( enabled: true);Ext.Loader.setPath(Ext.ux, extjs/examples/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. / 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(); Ext.defer(function() statusBar.clearStatus(useDefaults:true); btn.enable(); , 2000); ;/* * = Basic StatusBar example = */ Ext.create(Ext.Panel, title: Basic StatusBar, renderTo: basic, width: 550, height: 100, bodyPadding: 10, items: xtype: button, id: basic-button, text: Do Loading, handler: Ext.Function.pass(loadFn, basic-button, basic-statusbar) , bbar: Ext.create(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: xtype: button, 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 ); , xtype: button, text: Show Busy, handler: function () var sb = Ext.getCmp(basic-statusbar); / Set the status bar to show that something is processing: sb.showBusy(); , xtype: button, text: Clear status, handler: function () var sb = Ext.getCmp(basic-statusbar); / once completed sb.clearStatus(); , -, Plain Text ) );/* * = Right-aligned StatusBar example = */ Ext.create(Ext.Panel, title: Right-aligned StatusBar, renderTo: right-aligned, width: 550, height: 100, bodyPadding: 10, items: xtype: button, id: right-button, text: Do Loading, handler: Ext.Function.pass(loadFn, right-button, right-statusbar) , bbar: Ext.create(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 = Ext.create(Ext.Window, title: StatusBar Window, width: 400, minWidth: 350, height: 150, modal: true, closeAction: hide, bodyPadding: 10, items: xtype: button, id: win-button, text: Do Loading, handler: Ext.Function.pass(loadFn, win-button, win-statusbar) , bbar: Ext.create(Ext.ux.StatusBar, id: win-statusbar, defaultText: Ready, items: xtype: button, text: A Button , -, Ext.Date.format(new Date(), n/d/Y), , , -, xtype:splitbutton, text:Status Menu, menuAlign: br-tr?, menu: Ext.create(Ext.menu.Menu, items: text: Item 1, text: Item 2 ) ) ); Ext.create(Ext.Button, text: Show Window, renderTo: window, handler: function() win.show(); ); var charCount = Ext.create(Ext.toolbar.TextItem, text: Chars: 0), clock = Ext.create(Ext.toolbar.TextItem, text: Ext.Date.format(new Date(), g:i:s A), myevent = Ext.isOpera ? keypress : keydown; / opera behaves a little weird with keydown Ext.create(Ext.Panel, title: Ext Word Processor, renderTo: word-proc, width: 500, bodyPadding: 5, layout: fit, bbar: Ext.create(Ext.ux.StatusBar, id: word-status, items: charCount, , clock, ), items: xtype: textarea, id: word-textarea, enableKeyEvents: true, hideLabel: true, grow: true, growMin: 100, growMax: 200 ); Ext.getCmp(word-textarea).on(myevent, function() var sb = Ext.getCmp(word-status); sb.showBusy(在线保存中); Ext.defer(function() sb.setStatus( iconCls: x-status-saved, text: 文本自动保存于 + Ext.Date.format(new Date(), g:i:s A) ); , 4000); , null, buffer:2000); / Set up our event for updating the word/char count Ext.getCmp(word-textarea).on(myevent, function(comp) var v = comp.getValue(), cc = v.length ? v.length: 0; charCount.update(Chars: + cc); , null, buffer: 1););独立的css文件：/* StatusBar - structure */.x-statusbar .x-status-text cursor: default;/* height: 21px; line-height: 21px; padding: 0 4px;*/.x-statusbar .x-status-busy padding-left: 25px !important; background: transparent no-repeat 3px 0;.x-toolbar div.xtb-text.x-statusbar .x-status-text-panel border-top: 1px solid; border-right: 1px solid; border-bottom: 1px solid; border-left: 1px solid; padding: 2px 8px 2px 5px;/* StatusBar word processor example styles */#word-status .x-status-text-panel .spacer width: 60px; font-size:0; line-height:0;#word-status .x-status-busy padding-left: 25px !important; background: transparent no-repeat 3px 0;#word-status .x-status-saved padding-left: 25px !important; background: transparent no-repeat 3px 0;/* StatusBar form validation example styles */.x-statusbar .x-status-error cursor: pointer; padding-left: 25px !important; background: transparent no-repeat 3px 0;.x-statusbar .x-status-valid padding-left: 25px !important; background: transparent no-repeat 3px 0;.x-status-error-list font: 11px tahoma,arial,verdana,sans-serif; position: absolute; z-index: 9999; border-top: 1px solid; border-right: 1px solid; border-bottom: 1px solid; border-left: 1px solid; padding: 5px 10px;.x-status-error-list li cursor: pointer; list-style: disc; margin-left: 10px;.x-status-error-list li a text-decoration: none;.x-status-error-list li a:hover text-decoration: underline;/* * */* * */* * */* StatusBar - visual */.x-statusbar .x-status-busy ba