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

时间：2022-06-25 18:30:18 编辑：袖梨来源：一聚教程网

首先定义一个函数，它在前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();
                    }
                }
            ]
        })

});
});

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程