动态生成checkbox的问题

Question

function checkbox(){
var checkboxItem = [];
var chs = ['A','B','C','D'];
for(var i = 0; i < chs.length; i++){
var cls = "width-"+chs[i]+"-box";
var checkbox = new Ext.form.Checkbox({
id:chs[i]+"id",
boxLabel:chs[i],
listeners:{
render:function(el){
el.getEl().parent().addClass(cls);
}
}
});
checkboxItem.push(checkbox);
}
return checkboxItem;
}
-----------------------------------------------------------------------------------------
上面是一段用for循环生成checkbox的代码，不过有点小问题
当代码运行到el.getEl().parent().addClass(cls);时候，cls的值会改变，变成chs[i+1]
但在checkboxItem.push(checkbox);的后面alert(cls)的值是
width-A-box,width-B-box,width-C-box,width-D-box
----------------------------------------------------------------------

Answer 1

你可以参考
http://stackoverflow.com/questions/359467/jquery-closures-loops-and-events
这个是jquery的做法

Answer 2

参照id:chs[i]+"id"写法,不用变量，可能var cls的指针都是一个地址。导致所有checkbox都是D

Answer 3

这个写法可能也一样。最好在checkbox中添加一个属性，例如order: chs[i],listeners:{
    render:function(el){
        el.getEl().parent().addClass("width-"+this.order+"-box");
    }
}

Answer 4

谢谢，按照你的想法，我加了个属性 name:'width-'+chs[i]+'-box', 然后el.getEl().parent().addClass(this.name);就解决了

Answer 5

做个闭包就好了。。    function checkbox() {
        var checkboxItem = [];
        var chs = ['A', 'B', 'C', 'D'];
        for (var i = 0; i < chs.length; i++) {            var cls = "width-" + chs[i] + "-box";            var checkbox = new Ext.form.Checkbox({
                id: chs[i] + "id",
                boxLabel: chs[i],
                listeners: {
                    render: (function (idx) {
                        return function (el) {
                            el.getEl().parent().addClass("width-" + chs[idx] + "-box");
                        }
                    })(i)//////////这里做闭包
                }
            });
            checkboxItem.push(checkbox);
        }
        return checkboxItem;
    }