extjs4.2|extjs4中Ext.ux.statusbar.StatusBar 状态栏控件用法

更新时间:2017-06-02    来源:extjs    手机版     字体:

【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();
}


第三个为清除状态:

 代码如下 [Js]
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();
                    }
                }
            ]
        })

    });
});

本文来源:http://www.bbyears.com/wangyezhizuo/33074.html

猜你感兴趣