Extjs　自定义控件－自定义标签控件

Ext.define('Pactera.widget.LabelRating', {
    alias: "widget.labelrating",
    //extend: 'Ext.Component',
    extend: 'Ext.form.FieldContainer',
    afterRender: function () {
        this.callParent();
    },

    width: 275,
    //height: 40,
    //padding: 10,
    commonLabel: '形象气质佳、沟通表达可、条理清晰、职业素养好、可塑性强、专业能力不错、有礼貌、向往公司、做事细心、经验丰富、薪资要求高、稳定性较好、稳定性担忧',
    style: {
        color: '#000000',
        //backgroundColor: '#FFFFFF'
    },
    allowBlank: true,
    initComponent: function () {
        var me = this;
        var date = new Date();
        var dateTime = date.getTime();
        var starId = me.id ? "star_" + me.id : "star" + dateTime;

        var label = me.label ? me.label : '评分';
        var labelWidth = me.labelWidth ? me.labelWidth - 13 : 87;
        var labelAlign = me.lableAlign ? me.lableAlign : 'right';
        var thisWidth = me.width ? me.width : 130;
        var name = me.name;
        /*
        var aMsg = [
			"Unacceptable|Unacceptable",
			"Poor|Poor",
			"Fair|Fair",
			"Good|Good",
			"Excellent|Excellent"
        ]
        */
        var aMsg = [
			"很不满意|Unacceptable",
			"不满意|Poor",
			"一般|Fair",
			"满意|Good",
			"非常满意|Excellent"
        ]
        
        if (me.aMsg) {
            aMsg = me.aMsg;
        }

        var html = '<style type="text/css">';
        //html += '.star{position:relative;margin:0px auto;}';
        html += '</style>';
        html += '<div id="' + starId + '" class="star" style="width:' + thisWidth + 'px;">';
        //已添加标签
        html += '<span style="font-weight:bold;">已添加标签</span><br/><br/>';
        html += '<div style ="width:' + (thisWidth - 30) + 'px;">';
        
        html += '</div>';
        //自定义标签
        html += '<div style ="width:' + (thisWidth - 30) + 'px;">';
        html += '<input name="customLabel"  type="text" placeholder="填写自定义标签" /> <button>添加</button>';
        html += '</div>';
        //常用标签
        html += '<span style="font-weight:bold;">常用标签</span><br/><br/>';
        html += '<div style ="width:' + (thisWidth-30) + 'px;">';
        
        html += '</div>';

        html += '</div>';
        this.html = html;
        me.items = [];
        me.items.push({
            xtype: 'textfield', name: me.name, fieldLabel: '标签值', allowBlank: me.allowBlank,hidden:true, listeners: {
                change: function (thi, newValue, oldValue) {
                    me.setValue(newValue);
                },
                validitychange: function (thi, isValid, eOpts) {
                    //验证失败时
                    if (!isValid)
                    {
                        //不为空时
                        if (me.allowBlank == false && thi.value == "") {
                            Ext.Msg.show({
                                title: '操作提示',
                                msg: thi.blankText,
                                icon: Ext.Msg.ERROR,
                                buttons: Ext.Msg.OK
                            });
                        }
                    }
                }
            }
        });
        this.listeners = {
            'boxready': function () {
                var oStar = document.getElementById(starId);
                var oSelectLabelDiv = oStar.getElementsByTagName("div")[0];//已添加标签div
                var oCustomLabelDiv = oStar.getElementsByTagName("div")[1];//自定义标签div
                var oCommonLabelDiv = oStar.getElementsByTagName("div")[2];//常用标签div
                var oCustomLabelText = oCustomLabelDiv.getElementsByTagName("input")[0];//自定义标签文本框
                var oCustomLabelButton = oCustomLabelDiv.getElementsByTagName("button")[0];//自定义标签添加按钮 

                //加载已添加的标签
                var selectLable = me.down('textfield[name="' + me.name + '"]').getValue();
                //初始化标签
                fnPoint(selectLable);

                //标签处理
                function fnPoint(selectLable)
                {
                    me.selectLableList = selectLable.split('、');
                    oSelectLabelDiv.innerHTML = '';
                    if (selectLable != "") {
                        for (var i = 0; i < me.selectLableList.length; i++) {
                            oSelectLabelDiv.innerHTML += '<button style="border:solid 1px BurlyWood; background:#FFF8DC;margin:3px 3px 3px 3px;padding:5px 5px 5px 5px;">' + me.selectLableList[i] + '</button>  ';
                        }
                    }
                    oCommonLabelDiv.innerHTML = '';
                    //加载常用标签
                    if (me.commonLabel != "") {
                        me.commonLabelList = me.commonLabel.split('、');
                        for (var i = 0; i < me.commonLabelList.length; i++) {
                            var issel = false;
                            for (var o = 0; o < me.selectLableList.length; o++) {
                                if (me.selectLableList[o] == me.commonLabelList[i]) {
                                    issel = true;
                                }
                            }
                            if (issel)
                            {
                                oCommonLabelDiv.innerHTML += '<button name="sel" style="border:solid 1px BurlyWood; background:#E6E6FA;margin:3px 3px 3px 3px;padding:5px 5px 5px 5px;" >' + me.commonLabelList[i] + '</button>  ';
                            }
                            else
                            {
                                oCommonLabelDiv.innerHTML += '<button name="nosel" style="border:solid 1px BurlyWood; background:#FFF8DC;margin:3px 3px 3px 3px;padding:5px 5px 5px 5px;" >' + me.commonLabelList[i] + '</button>  ';
                            } 
                        }
                    }

                    //已添加标签事件处理
                    var oSelectButtons = oSelectLabelDiv.getElementsByTagName("button");//已添加标签集
                    for (var i = 0; i < oSelectButtons.length; i++)
                    {
                        oSelectButtons[i].onclick = function () {
                            var onBtn = this;
                            selectLable = "";
                            for (var o = 0; o < me.selectLableList.length; o++) {
                                if (onBtn.innerHTML != me.selectLableList[o])
                                {
                                    if (selectLable == "") {
                                        selectLable += me.selectLableList[o];
                                    }
                                    else {
                                        selectLable += "、" + me.selectLableList[o];
                                    }
                                }
                            }
                            fnPoint(selectLable);
                        }
                    }

                    //常用标签事件处理
                    var oCommonButtons = oCommonLabelDiv.getElementsByTagName("button");//常用标签集
                    for (var i = 0; i < oCommonButtons.length; i++) {
                        if (oCommonButtons[i].name == 'nosel')
                        {
                            oCommonButtons[i].onclick = function () {
                                var onBtn = this;
                                
                                if (selectLable == "") {
                                    selectLable += onBtn.innerHTML;
                                }
                                else {
                                    selectLable += "、" + onBtn.innerHTML;
                                }
                                fnPoint(selectLable);
                            }
                        }
                    }
                    me.down('textfield[name="' + me.name + '"]').setValue(selectLable);
                }

                //自定义标签按钮事件
                oCustomLabelButton.onclick = function () {
                    //加载已添加的标签
                    var selectLable = me.down('textfield[name="' + me.name + '"]').getValue();
                    var issel = false;
                    for (var o = 0; o < me.selectLableList.length; o++) {
                        if (oCustomLabelText.value == me.selectLableList[o]) {
                            issel = true;
                        }
                    }
                    if (!issel)
                    {
                        if (selectLable == "") {
                            selectLable += oCustomLabelText.value;
                        }
                        else {
                            selectLable += "、" + oCustomLabelText.value;
                        }
                    }
                    fnPoint(selectLable);
                }

                //值变化函数
                var setValue = function (v) {
                    fnPoint(v);
                }
                //值变化时
                me.setValue = setValue;
            }
        }

        this.callParent();

    }
});