【www.bbyears.com--extjs】
首先定义一个函数,它在前2秒将状态栏设置为繁忙状态,2秒后恢复:
代码如下[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);
};
接着我们将要几个按钮到状态栏,第一个设置状态为错误:
[Js]
代码如下handler: function () {
var sb = Ext.getCmp("statusbar1");
sb.setStatus({
text: "错误!",
iconCls: "x-status-error",
clear: true // 自动清除状态
});
}
第二个设置状态为加载中:
[Js]
handler: function () {
var sb = Ext.getCmp("statusbar1");
sb.showBusy();
}
第三个为清除状态:
handler: function () {
var sb = Ext.getCmp("statusbar1");
sb.clearStatus();
}
展示效果,分别是加载、错误、和清除状态:
完整的代码:
代码如下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: "演示状态栏",
items: [{ xtype: "button", text: "测试", id:"button1", handler: function (btn, statusBar) {
loadFn("button1", "statusbar1");
}
}],
bbar: Ext.create("Ext.ux.statusbar.StatusBar", {
id: "statusbar1",
defaultText: "就绪",
text: "没有任务",
iconCls: "x-status-valid",
items: [
{
xtype: "button",
text: "设置状态",
handler: function () {
var sb = Ext.getCmp("statusbar1");
sb.setStatus({
text: "错误!",
iconCls: "x-status-error",
clear: true // 自动清除状态
});
}
},
{
xtype: "button",
text: "设置为加载状态",
handler: function () {
var sb = Ext.getCmp("statusbar1");
sb.showBusy();
}
},
{
xtype: "button",
text: "清除状态",
handler: function () {
var sb = Ext.getCmp("statusbar1");
sb.clearStatus();
}
}
]
})
});
});