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

Extjs中状态栏的巧妙使用例子中的一个小例子，效果图：全部html代码：!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN /TR/html4/strict.dtdhtmlhead meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleExt.ux.StatusBar Examples/title !-- Ext -- link rel=stylesheet type=text/css href=extjs/resources/css/ext-all.css / script type=text/javascript src=extjs/ext-all.js/script link rel=stylesheet type=text/css href=CSS/statusbar.css / style body .x-panel { margin-bottom:20px; } /style/headbody h1StatusBar Examples/h1 pHere are several examples of using and customizing the a href=../ux/statusbar/StatusBar.jsExt.ux.StatusBar/a component./p pNote that the js is not minified so it is readable. See a href=statusbar-demo.jsstatusbar-demo.js/a./p h2Basic StatusBar/h2 pThis is a simple StatusBar with a few standard Toolbar items included./p div id=basic/div h2Right-Aligned StatusBar/h2 pThis 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./p div id=right-aligned/div h2Status Window/h2 pYou can add a StatusBar to a window in exactly the same way./p div id=window style=margin-bottom:20px;/div h2Customizing the Look and Feel/h2 pThis 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./p div id=word-proc/divscript language=javascriptExt.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