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（）{

//ThisisasharedfunctionthatsimulatesaloadactiononaStatusBar.

//Itisreusedbymostoftheexamplepanels.

varloadFn=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）;

};

/*

*================BasicStatusBarexample=======================

*/

Ext.create（'Ext.Panel',{

title:

'BasicStatusBar',

renderTo:

'basic',

width:

550,

height:

100,

bodyPadding:

10,

items:

[{

xtype:

'button',

id:

'basic-button',

text:

'DoLoading',

handler:

Ext.Function.pass（loadFn,['basic-button','basic-statusbar']）

}],

bbar:

Ext.create（'Ext.ux.StatusBar',{

id:

'basic-statusbar',

//defaultstousewhenthestatusiscleared:

defaultText:

'Defaultstatustext',

//defaultIconCls:

'default-icon',

//valuestosetinitially:

text:

'Ready',

iconCls:

'x-status-valid',

//anystandardToolbaritems:

items:

[

{

xtype:

'button',

text:

'ShowWarning&Clear',

handler:

function（）{

varsb=Ext.getCmp（'basic-statusbar'）;

sb.setStatus（{

text:

'Oops!

',

iconCls:

'x-status-error',

clear:

true//auto-clearafterasetinterval

}）;

}

},

{

xtype:

'button',

text:

'ShowBusy',

handler:

function（）{

varsb=Ext.getCmp（'basic-statusbar'）;

//Setthestatusbartoshowthatsomethingisprocessing:

sb.showBusy（）;

}

},

{

xtype:

'button',

text:

'Clearstatus',

handler:

function（）{

varsb=Ext.getCmp（'basic-statusbar'）;

//oncecompleted

sb.clearStatus（）;

}

},

'-',

'PlainText'

]

}）

}）;

/*

*================Right-alignedStatusBarexample=======================

*/

Ext.create（'Ext.Panel',{

title:

'Right-alignedStatusBar',

renderTo:

'right-aligned',

width:

550,

height:

100,

bodyPadding:

10,

items:

[{

xtype:

'button',

id:

'right-button',

text:

'DoLoading',

handler:

Ext.Function.pass（loadFn,['right-button','right-statusbar']）

}],

bbar:

Ext.create（'Ext.ux.StatusBar',{

defaultText:

'Defaultstatus',

id:

'right-statusbar',

statusAlign:

'right',//themagicconfig

items:

[{

text:

'AButton'

},'-','PlainText']

}）

}）;

/*

*================StatusBarWindowexample=======================

*/

varwin=Ext.create（'Ext.Window',{

title:

'StatusBarWindow',

width:

400,

minWidth:

350,

height:

150,

modal:

true,

closeAction:

'hide',

bodyPadding:

10,

items:

[{

xtype:

'button',

id:

'win-button',

text:

'DoLoading',

handler:

Ext.Function.pass（loadFn,['win-button','win-statusbar']）

}],

bbar:

Ext.create（'Ext.ux.StatusBar',{

id:

'win-statusbar',

defaultText:

'Ready',

items:

[{

xtype:

'button',

text:

'AButton'

},'-',

Ext.Date.format（newDate（）,'n/d/Y'）,'','','-',{

xtype:

'splitbutton',

text:

'StatusMenu',

menuAlign:

'br-tr?

',

menu:

Ext.create（'Ext.menu.Menu',{

items:

[{text:

'Item1'},{text:

'Item2'}]

}）

}]

}）

}）;

Ext.create（'Ext.Button',{

text:

'ShowWindow',

renderTo:

'window',

handler:

function（）{

win.show（）;

}

}）;

varcharCount=Ext.create（'Ext.toolbar.TextItem',{text:

'Chars:

0'}）,

clock=Ext.create（'Ext.toolbar.TextItem',{text:

Ext.Date.format（newDate（）,'g:

i:

sA'）}）,

myevent=Ext.isOpera?

'keypress':

'keydown';//operabehavesalittleweirdwithkeydown

Ext.create（'Ext.Panel',{

title:

'ExtWordProcessor',

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（）{

varsb=Ext.getCmp（'word-status'）;

sb.showBusy（'在线保存中……'）;

Ext.defer（function（）{

sb.setStatus（{

iconCls:

'x-status-saved',

text:

'文本自动保存于'+Ext.Date.format（newDate（）,'g:

i:

sA'）

}）;

},4000）;

},null,{buffer:

2000}）;

//Setupoureventforupdatingtheword/charcount

Ext.getCmp（'word-textarea'）.on（myevent,function（comp）{

varv=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:

04px;

*/

}

.x-statusbar.x-status-busy{

padding-left:

25px!

important;

background:

transparentno-repeat3px0;

}

.x-toolbardiv.xtb-text

.x-statusbar.x-status-text-panel{

border-top:

1pxsolid;

border-right:

1pxsolid;

border-bottom:

1pxsolid;

border-left:

1pxsolid;

padding:

2px8px2px5px;

}

/*StatusBarwordprocessorexamplestyles*/

#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:

transparentno-repeat3px0;

}

#word-status.x-status-saved{

padding-left:

25px!

important;

background:

transparentno-repeat3px0;

}

/*StatusBarformvalidationexamplestyles*/

.x-statusbar.x-status-error{

cursor:

pointer;

padding-left:

25px!

important;

background:

transparentno-repeat3px0;

}

.x-statusbar.x-status-valid{

padding-left:

25px!

important;

background:

transparentno-repeat3px0;

}

.x-status-error-list{

font:

11pxtahoma,arial,verdana,sans-serif;

position:

absolute;

z-index:

9999;

border-top:

1pxsolid;

border-right:

1pxsolid;

border-bottom:

1pxsolid;

border-left:

1pxsolid;

padding:

5px10px;

}

.x-status-error-listli{

cursor:

pointer;

list-style:

disc;

margin-left:

10px;

}

.x-status-error-listlia{

text-decoration:

none;

}

.x-status-error-listlia:

hover{

text-decoration:

underline;

}

/*************************************************************/

/*************************************************************/

/*************************************************************/

/*StatusBar-visual*/

.x-statusbar.x-status-busy{

background-image:

url（../picture/status/loading.gif）;

}

.x-statusbar.x-status-text-panel{

border-color:

#99bbe8#fff#fff#99bbe8;

}

/*StatusBarwordprocessorexamplestyles*/

#word-status.x-status-text{

color:

#777;

}

#word-status.x-status-busy{

background-image:

url（../picture/status/saving.gif）;

}

#word-status.x-status-saved{

background-image:

url（../picture/status/saved.png）;

}

/*StatusBarformvalidationexamplestyles*/

.x-statusbar.x-status-error{

color:

#C33;

background-image:

url（../picture/status/exclamation.gif）;

}

.x-statusbar.x-status-valid{

background-image:

url（../picture/status/accept.png）;

}

.x-status-error-list{

border-color:

#C33;

background:

white;

}

.x-status-error-listlia{

color:

#15428B;

}