《Extjs中状态栏里的巧妙使用.docx》由会员分享，可在线阅读，更多相关《Extjs中状态栏里的巧妙使用.docx（19页珍藏版）》请在金锄头文库上搜索。
1、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
2、 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 ex
3、actly 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.s
4、etConfig( 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
5、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:tru
6、e); 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:
7、 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 &
8、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
