Ext.ux.statusbar.StatusBar status bar control usage in EXTJS4

First, you define a function that sets the status bar to busy in the first 2 seconds and then restores it after 2 seconds:

The code is as follows	Copy Code
[Js] 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); };

Then we're going to have a few buttons to the status bar, and the first setting status is error:

[Js]

The code is as follows	Copy Code
Handler:function () { var sb = ext.getcmp (' statusbar1 '); Sb.setstatus ({ Text: ' Wrong! ', Iconcls: ' X-status-error ', Clear:true//Automatic purge status }); }

The second setting state is loaded:

The code is as follows	Copy Code
[Js] Handler:function () { var sb = ext.getcmp (' statusbar1 '); Sb.showbusy (); }

The third is the purge state:

The code is as follows	Copy Code
[Js] Handler:function () { var sb = ext.getcmp (' statusbar1 '); Sb.clearstatus (); }

Show effects, respectively, load, error, and purge states:

Complete code:

The code is as follows

Copy Code

Ext.Loader.setConfig ({enabled:true}); Ext.Loader.setPath (' Ext.ux ', '/extjs/ux '); Ext.onready (function () { 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); }; var panel = new Ext.panel ({ Renderto: "Div1", width:600, HEIGHT:250, Collapsible:true, Layout: ' Fit ', Title: ' Demo status bar ', Items: [{xtype: "button", Text: "Test", ID: "Button1", Handler:function (BTN, StatusBar) { LOADFN ("Button1", "statusbar1"); } }], Bbar:Ext.create (' Ext.ux.statusbar.StatusBar ', { ID: ' StatusBar1 ', DefaultText: ' Ready ', Text: ' No task ', Iconcls: ' X-status-valid ', Items: [ { Xtype: ' button ', Text: ' Set state ', Handler:function () { var sb = ext.getcmp (' statusbar1 '); Sb.setstatus ({ Text: ' Wrong! ', Iconcls: ' X-status-error ', Clear:true//Automatic purge status }); } }, { Xtype: ' button ', Text: ' Set to load state ', Handler:function () { var sb = ext.getcmp (' statusbar1 '); Sb.showbusy (); } }, { Xtype: ' button ', Text: ' Clear State ', Handler:function () { var sb = ext.getcmp (' statusbar1 '); Sb.clearstatus (); } } ] }) }); });