ExtJs3.2.2动态生成CheckboxGroup和Checkbox

      昨天在创建歌曲的时候，需要选择标签，标签是由标签分类来管理的，如男歌手是分类，下面会有华语男歌手，日语男歌手等标签名，设置标签，用复选框形式展现，用户可选择多个标签，由于标签名不是固定的，所以需要动态产生这些复选框。
     创建复选框的方法：
     

// 获取创建复选框
    function getCheckbox(cbBl, cbName, cbId, cbValue) {
        return new Ext.form.Checkbox({
                    boxLabel : cbBl,
                    name : cbName,
                    id : cbId,
                    inputValue : cbValue
                });
    }

    // 获取创建复选框组
    function getCheckboxGroup(cbgFl, cbgId) {
        return new Ext.form.CheckboxGroup({
                    fieldLabel : cbgFl,
                    id : cbgId,
                    columns : 3//分三列，从左到右
                });
    }

    获取标签数据：
  

Ext.Ajax.request({
        url : '',//请求URL 用于请求分类
        method : 'GET',
        success : function(response, options) {
            var labelCatArr = new Array();// 标签分类数组
            var labelCatObj = Ext.util.JSON.decode(response.responseText);
            var labelCatList = labelCatObj.pageList.result;// 全部标签分类
            for (i = 0; i < labelCatList.length; i++) {
                var labelCat = labelCatList[i];// 标签分类
                var cbgLabelCat = getCheckboxGroup(labelCat.labelName,
                        labelCat.id);// 创建复选框组
                labelCatIdArr.push(labelCat.id);
                cbgLabelCat.items = getAllCheckbox(labelCat, cbgLabelCat);
                labelCatArr.push(cbgLabelCat);
            }
            checkboxForm.add(labelCatArr);//只能用add,不能直接对items进行赋值
            checkboxForm.doLayout();//重新调整版面布局

        },
        failure : function(response, options) {

        }
    });

    function getAllCheckbox(labelCat, cbgLabelCat) {
        var labelArr = new Array();
        Ext.Ajax.request({
                    url : "",//请求URL 用于请求标签分类下的标签名
                    method : 'POST',
                    params : {
                        "label.label.id" : labelCat.id
                    },
                    success : function(response, options) {
                        var labelObj = Ext.util.JSON
                                .decode(response.responseText);
                        var labelList = labelObj.pageList.result;// 某标签分类下的标签
                        for (j = 0; j < labelList.length; j++) {
                            var label = labelList[j];
                            labelArr.push(getCheckbox(label.labelName,
                                    labelCat.id, label.id, label.id));
                        }
                        cbgLabelCat.items = labelArr；//可以对items进行直接赋值
                    },
                    failure : function(response, options) {

                    }
                });

        return labelArr;
    }

    有空，欢迎你到红番薯逛逛

评论

1 楼 iceaugust 2014-01-14  

不错，