extjs进度显示

css样式：

.segmentedclass {
    border-radius: 50%;
    height: 20px;
    width: 30px;
    margin: 0;
    padding: 0;
    border-color: #5fa2dd;
    background-color: #ffffff;
}

.segmentedclass .x-btn-inner-default-small {
    color: black;
}

 

 

 {
                    reference: 'headcontainer',
                    defaultType: 'fieldcontainer',
                    style: 'margin:0 30px;',
                    layout: {
                        type: 'hbox'
                    },
                    items: [
                        {
                            width: '16%',
                            layout: {
                                type: 'vbox'
                            },
                            style: 'background-image:url(../Content/images/111.jpg)!important;',
                            items: [
                                {
                                    xtype: 'label',
                                    html: '<div style="font-weight:bold;font-size:16px;line-height: 40px;">111</div>'
                                },
                                {
                                    xtype: 'segmentedbutton',
                                    vertical: true,
                                    items: [{
                                        text: '1',
                                        cls: 'segmentedclass',
                                        style: 'border-radius: 50%; height: 20px;width: 30px;margin: 0;padding: 0;border-color: #5fa2dd;background-color: #ffffff;',
                                        listeners: {
                                            render: 'segmentedRendering',
                                            click: 'segmentedClick'
                                        }
                                    }]
                                }]
                        },
                        {
                            width: '16%',
                            layout: 'vbox',
                            style: 'background-image:url(../Content/images/111.jpg)!important;',
                            items: [
                                {
                                    xtype: 'label',
                                    html: '<div style="font-weight:bold;font-size:16px;line-height: 40px;">222</div>'
                                },
                                {
                                    xtype: 'segmentedbutton',
                                    vertical: true,
                                    items: [{
                                        text: '2',
                                        style: 'border-radius: 50%; height: 20px;width: 30px;margin: 0;padding: 0;border-color: #5fa2dd;background-color: #ffffff;',
                                        cls: 'segmentedclass',
                                        listeners: {
                                            render: 'segmentedRendering',
                                            click: 'segmentedClick'
                                        }
                                    }]
                                }]
                        },
                        {
                            width: '16%',
                            layout: 'vbox',
                            style: 'background-image:url(../Content/images/111.jpg)!important;',
                            items: [
                                {
                                    xtype: 'label',
                                    html: '<div style="font-weight:bold;font-size:16px;line-height: 40px;">333</div>'
                                },
                                {
                                    xtype: 'segmentedbutton',
                                    vertical: true,
                                    items: [{
                                        text: '3',
                                        cls: 'segmentedclass',
                                        style: 'border-radius: 50%; height: 20px;width: 30px;margin: 0;padding: 0;border-color: #5fa2dd;background-color: #ffffff;',
                                        listeners: {
                                            render: 'segmentedRendering',
                                            click: 'segmentedClick'
                                        }
                                    }]
                                }]
                        },
                        {
                            width: '16%',
                            layout: 'vbox',
                            style: 'background-image:url(../Content/images/111.jpg)!important;',
                            items: [
                                {
                                    xtype: 'label',
                                    html: '<div style="font-weight:bold;font-size:16px;line-height: 40px;">444</div>'
                                },
                                {
                                    xtype: 'segmentedbutton',
                                    vertical: true,
                                    items: [{
                                        text: '4',
                                        cls: 'segmentedclass',
                                        style: 'border-radius: 50%; height: 20px;width: 30px;margin: 0;padding: 0;border-color: #5fa2dd;background-color: #ffffff;',
                                        listeners: {
                                            render: 'segmentedRendering',
                                            click: 'segmentedClick'
                                        }
                                    }]
                                }]
                        },
                        {
                            width: '20%',
                            layout: 'vbox',
                            style: 'background-image:url(../Content/images/111.jpg)!important;',
                            items: [
                                {
                                    xtype: 'label',
                                    html: '<div style="font-weight:bold;font-size:16px;line-height: 40px;">555</div>'
                                },
                                {
                                    xtype: 'segmentedbutton',
                                    vertical: true,
                                    items: [{
                                        text: '5',
                                        cls: 'segmentedclass',
                                        style: 'border-radius: 50%; height: 20px;width: 30px;margin: 0;padding: 0;border-color: #5fa2dd;background-color: #ffffff;',
                                        listeners: {
                                            render: 'segmentedRendering',
                                            click: 'segmentedClick'
                                        }
                                    }]
                                }]
                        },
                        {
                            width: '16%',
                            layout: 'vbox',
                            style: 'background-image:url(../Content/images/111.jpg)!important;',
                            items: [
                                {
                                    xtype: 'label',
                                    html: '<div style="font-weight:bold;font-size:16px;line-height: 40px;">666</div>'
                                },
                                {
                                    xtype: 'segmentedbutton',
                                    vertical: true,

                                    items: [{
                                        text: '6',
                                        cls: 'segmentedclass',
                                        style: 'border-radius: 50%; height: 20px;width: 30px;margin: 0;padding: 0;border-color: #5fa2dd;background-color: #ffffff;',
                                        listeners: {
                                            render:'segmentedRendering',
                                            click:'segmentedClick'
                                        }
                                    }]
                                }]
                        }
                    ]
                }

 

 

segmentedRendering: function (el, fn) {
        //el.el.dom.onmouseover = function (e) {
        //    el.el.removeCls('segmentedclass').addCls('newsegmentedclass');
        //    el.ownerCt.previousSibling().el.dom.style.color = "red";
        //}
        //el.el.dom.onmouseleave = function (e) {
        //    el.el.removeCls('newsegmentedclass').addCls('segmentedclass');
        //    el.ownerCt.previousSibling().el.dom.style.color = "black";
        //}
       if (el.text == "1") {
            el.el.dom.style.backgroundColor = "#5fa2dd";
            if (this.ieVersion() == 8) {
                this.getElementsByClassName(el.el.dom, 'x-btn-inner-default-small').style.color = "#ffffff";
            }
            else {
                el.el.dom.getElementsByClassName('x-btn-inner-default-small')[0].style.color = "#ffffff";
            }
            el.ownerCt.previousSibling().el.dom.style.color = "red";
            
        }
        el.setStyle('left', (el.ownerCt.previousSibling().el.getWidth() - el.getWidth()) / 2 + 'px');
    },
    //按钮点击触发事件
    segmentedClick: function (btn, e) {
        var sign = true;
        if (!this.ValidationOfAmount()) {
            return;
        }
        this.schedulePromptStyle(btn);
        if (parseInt(btn.text) > BtnIndex) {
            BtnIndex = parseInt(btn.text) - 1;
            this.onNextButtonClick(sign);
        }
        else {
            BtnIndex = parseInt(btn.text) + 1;
            this.onPreviousButtonClick(sign);
        }
    },

    //界面进度提示样式修改
    schedulePromptStyle: function (btn) {
        var me = this;
        var labels = null;
        var segmenteds = null;
        if (me.ieVersion() == 8) {
            labels = me.getElementsByClassNameList(btn.findParentByType('fieldcontainer').ownerCt.el.dom, 'x-component');
            segmenteds = me.getElementsByClassNameList(btn.findParentByType('fieldcontainer').ownerCt.el.dom, 'segmentedclass');
        }
        else {
            labels = btn.findParentByType('fieldcontainer').ownerCt.el.dom.getElementsByClassName('x-component');
            segmenteds = btn.findParentByType('fieldcontainer').ownerCt.el.dom.getElementsByClassName('segmentedclass');
        }
        Ext.Array.each(labels, function (label) {
            label.style.color = "black";
        });
        Ext.Array.each(segmenteds, function (segmented) {
            segmented.style.backgroundColor = "#ffffff";
            if (me.ieVersion() == 8) {
                me.getElementsByClassName(segmented, 'x-btn-inner-default-small').style.color = "black";
            }
            else {
                segmented.getElementsByClassName('x-btn-inner-default-small')[0].style.color = "black";
            }
            
        });
        btn.el.dom.style.backgroundColor = "#5fa2dd";
        if (me.ieVersion() == 8) {
            me.getElementsByClassName(btn.el.dom, 'x-btn-inner-default-small').style.color = "#ffffff";
        }
        else {
            btn.el.dom.getElementsByClassName('x-btn-inner-default-small')[0].style.color = "#ffffff";
        }
        btn.ownerCt.previousSibling().el.dom.style.color = "red";
    },

//界面上上一步下一步按钮更改进度显示

onPreviousButtonClick: function (btn) {
        var me = this,
            refs = me.getReferences();
        if (btn != true) {
            var buttons = refs['headcontainer'].query('button');
            Ext.Array.each(buttons, function (btn) {
                if (btn.text == BtnIndex) {
                    me.schedulePromptStyle(btn);
                }
            }); 
        }              
    },