一聚教程网:一个值得你收藏的教程网站

热门教程

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

    });
});

热门栏目