高分求 extjs 4.1 CheckboxGroup 动态生成列和保存

那不就发送ajax，再ajax成功回调时根据返回的内容生成checkboxgroup就好了？
参考：Ext4.1动态生成checkboxgroup对象

控件定义：
ucCheckboxGroup = Ext.extend(Ext.form.CheckboxGroup, {
    columns: 5,
    dataUrl: '', //数据地址
    labelFiled: '',
    valueFiled: '',
    setValue: function (val) {
        alert(val);
        if (val.split) {
            val = val.split(',');
        }
        this.reset();
        for (var i = 0; i < val.length; i++) {
            this.items.each(function (c) {
                if (c.inputValue == val[i]) {                    c.setValue(true);
                }
            });
        }
    },
    reset: function () {
        this.items.each(function (c) {
            c.setValue(false);
        });
    },    getValue: function () {
        var val = [];
        this.items.each(function (c) {
            if (c.getValue() == true)
                val.push(c.inputValue);
        });
        return val.join(',');
    },
    onRender: function (ct, position) {
        var items = [];
        if (!this.items) {
            Ext.Ajax.request({
                url: this.url,
                method: "GET",
                success: function (request) {
                    var respText = Ext.util.JSON.decode(request.responseText);
                    for (var i = 0; i < respText.totalCount; i++) {
                        var d = respText.records[i];
                        var chk = { boxLabel: d.Name, name: d.ID + "_" + d.Name, inputValue: d.ID + "_" + d.Name };
                        items.push(chk);
                    }
                },
                failure: function () {
                    alert("failure!");
                }
            });
            this.items = items;
        }
        ucCheckboxGroup.superclass.onRender.call(this, ct, position);
    }
});
控件调用：Ext.reg('ucCheckboxGroup', ucCheckboxGroup);
var ckbSupporting = new ucCheckboxGroup({
    fieldLabel: '周边配套',
    name: 'ckbSupporting',
    id: 'ckbSupporting',
    height: 30,
    width: 674,
    dataUrl: '../../SystemSet/SystemSet/BaseInfoHandler.ashx?tag=sel&classID=5E1ABBF6-7D1A-4346-A031-749990786CA4&IsUsed=1'
});页头：<head runat="server">
    <link href="../../ExtJS/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="../../ExtJS/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
    <script src="../../ExtJS/bootstrap.js" type="text/javascript"></script>
    <%--文件上传--%>
    <script src="../../JScript/ExtUpDown.js" type="text/javascript"></script>
    <%--数据验证--%>
    <script src="../../JScript/ExtjsValidations.js" type="text/javascript"></script>
    <%--CheckboxGroup公用控件--%>
    <script src="../../JScript/UC/ucCheckboxGroup.js" type="text/javascript"></script>
    <%--弹出界面--%>
    <script src="../../JScript/ProjectSet/ProjectAdd.js" type="text/javascript"></script>
   <%-- 操作逻辑--%>
    <script src="../../JScript/ProjectSet/ProjectList.js" type="text/javascript"></script>
    <%--图标资源--%>
    <link href="../../resources/css/common.css" rel="stylesheet" type="text/css" />
    <title>项目列表</title>
</head>

试一试把你控件调用（主程序）中的第一行代码 Ext.reg('ucCheckboxGroup', ucCheckboxGroup); 放到你的控件定义文件（也就是‘ucCheckboxGroup.js’）里。再运行下看看还有没有问题？

记得放到 ucCheckboxGroup.js 最下面，要先定义ucCheckboxGroup 再执行它

是我疏忽了！发现问题所在了。楼主你引用的例子一定是给extjs3写的，因为：在extjs4中定义新的class要用Ext.define，而extjs3定义自己的class才用 Ext.extend比如：Ext.define('Ext.ux.form.MultiSelect', {
extend: 'ClassNameYouAreExtending',
alias: 'widget.multiselect'
});
应外楼主你引用的方法（var ckbSupporting = new ucCheckboxGroup ）也是extjs3的方法，
extjs4应该是Ext.create(）所以建议你找一个extjs4的控件.现在用的这个extjs3的即使能引用了，数据调用或其他方面也可能遇到问题

extjs4和3在语法上差别还是很大的

谢谢，你真细心！那注册那句呢，是不是也有问题啊？我按你说的方法去改了，但是注册那句始终会报错。如果注释点注册那句的话，报错还是 Microsoft JScript 运行时错误: 'innerCt' 为空或不是对象另外监视 me.innerCt 是空的我很怀疑 CheckboxGroup 本身就没有这个属性啊

extjs3的CheckboxGroup 插件里本身就没有innerCt这个属性，这个是extjs4 CheckboxGroup 里的属性。你可能没理解全我10楼的回复，你以前的代码不光是引用那部分是extjs3，就连你在网上找的那个library(http://stevelee.iteye.com/blog/1328992)也是extjs3的。这样一定会有问题的。因为extjs4引擎基本全从写了，所以layout一定会出问题。建议放弃那个library找一个extjs4的

其实你要做动态生成CheckboxGroup 的项，我认为根本不需要额外的控件，就用extjs本身自带的CheckboxGroup 就好了，只不过需要和后台还有数据库做连接。用数据库的一个field的值(比如yes/no, 0/1, true/false ...)来控制你某一个Checkbox是否被选中.你更新Checkbox后再传回数据库，这样下次加载去读取数据库自然就能绑定已选项了。实施起来的话先用store 加载数据，然后再赋值给checkbox
//建立checkbocgroup
var myCheckboxGroup = Ext.create('Ext.form.CheckboxGroup', {
    fieldLabel: 'Checkboxes in two columns',
    renderTo: Ext.getBody()
});//建立store,然后在load store的时候加载checkbocgroup
var myStore = Ext.create('Ext.data.Store', {
    autoLoad: true,
    model: operationTypeModel,
    listeners: {
        load: function(store, records) {
            myCheckboxGroup.removeAll();            myCheckboxGroup.add(Ext.Array.map(records, function(record) {
                return {
                    boxLabel: record.get('oNameEn'),
                    inputValue: record.get('oNameEn'),
                    name: record.get('old')
                };
            }));
        }
    },
    proxy: {
        type: 'ajax',
        url: 'url', //你后台的url
        reader: {
            root: 'data',
            type: 'json'
        }
    }
});
参考下这个例子给你点启发

我使用里的方法进行修改了，但是，很奇怪的是是在后台明明看见数据已经获取到了，但是前台的load事件里面store的data中却没有数据，不知道是怎么回事，另外，界面上也没有任何显示

这是目前不会报错也监视得到数据的方法，可以看到在循环的过程中能监视到数据，但是添加到items 里面就是什么也显示不出来。我贴出来大家有兴趣的可以直接贴到页面测试//建立checkbocgroup
var myCheckboxGroup = Ext.extend(Ext.form.CheckboxGroup, {    fieldLabel: 'Checkboxes in two columns',
    url: null,
    initComponent: function () {
        var me = this;        Ext.regModel('BaseInfoModel', {
            fields: [
                { name: 'ID', type: 'string' },
                { name: 'NO', type: 'string' },
                { name: 'Name', type: 'string' },
                { name: 'OrderNo', type: 'int' },
                { name: 'DefaultValue', type: 'int' },
                { name: 'MaxValue', type: 'string' },
                { name: 'MinValue', type: 'string' },
                { name: 'UseTypeName', type: 'string' },
                { name: 'Re', type: 'string' },
                { name: 'IsUsedName', type: 'string' },
                { name: 'ClassID', type: 'string' },
                { name: 'IsStandardName', type: 'string' }
    ]
        });        //建立store,然后在load store的时候加载checkbocgroup
//                var myStore = Ext.create('Ext.data.Store', {
//                    autoLoad: true,
//                    model: BaseInfoModel,
//                    listeners: {
//                        load: function (store, records, successful, eOpts) {
//                            me.removeAll();//                            me.add(Ext.Array.map(records, function (record) {
//                                return {
//                                    boxLabel: record.get('Name'),
//                                    inputValue: record.get('ID'),
//                                    name: record.get('ID')
//                                };
//                            }));
//                        }
//                    },
//                    proxy: {
//                        type: 'ajax',
//                        url: this.url, //你后台的url
//                        reader: {
//                            root: 'data',
//                            type: 'json'
//                        }
//                    }
//                        });        Ext.Ajax.request({
            url: this.url,
            method: 'GET',
            success: function (response, options) {
                var result = Ext.JSON.decode(response.responseText);
                me.removeAll();                 var items = [];
                for (var i = 0; i < result.total; i++) {
                    var d = result.root[i];
                    var chk = { boxLabel: d.Name, name: d.ID + "_" + d.Name, inputValue: d.ID + "_" + d.Name };
                    items.push(chk);
//                    me.add(eval(chk));
                }
                me.items = items;//                                me.add(Ext.Array.map(result.root, function (record) {
//                                    return {
//                                        boxLabel: record.Name,
//                                        inputValue: record.ID,
//                                        name: record.ID
//                                    };
//                                }));
            },
            failure: function (response, options) {
            }
        });        me.callParent(arguments);
    }
});
var ckbSupporting = new myCheckboxGroup(
        {
            width: 520,
            labelWidth: 160,
            fieldLabel: '项目特色',
            name: 'ckbSupporting',
            id: 'ckbSupporting',
//            columns: 10,
            url: 'SystemSet/SystemSet/BaseInfoHandler.ashx?tag=sel&classID=B53E5F95-B87D-437D-B36B-958DE23C1BE8&IsUsed=1'
        });Ext.onReady(function () {    Ext.define('ui.FacilityForm', {
        extend: 'Ext.form.Panel',        renderTo: 'tttt',
        minHeight: 400,
        height: 500,
        width: 800,
        bodyPadding: 10,
        title: '',
        defaults: {//
            labelWidth: 120,
            msgTarget: 'qtip',
            Padding: 10,
            labelSeparator: '：'//分隔符
        },        initComponent: function () {
            var me = this;            Ext.applyIf(me, {
                items: [
                {
                    xtype: 'hiddenfield',
                    fieldLabel: 'Label',
                    name: 'ProFacilityID',
                    anchor: '100%'
                },
                {
                    xtype: 'hiddenfield',
                    fieldLabel: 'Label',
                    name: 'ProjectID',
                    anchor: '100%'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: '业务公司',
                    name: 'Business',
                    allowBlank: false,
                    blankText: '项目业务公司不能为空',
                    anchor: '100%'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: '业务名称',
                    name: 'ServiceName',
                    allowBlank: false,
                    blankText: '项目业务名称不能为空',
                    anchor: '100%'
                },
                {
                    xtype: 'numberfield',
                    fieldLabel: '业务费',
                    name: 'OperatingOutlay',
                    allowBlank: false,
                    minValue: 0,
                    blankText: '项目业务费不能为空',
                    anchor: '100%'
                },
                {
                    xtype: 'numberfield',
                    fieldLabel: '车位数',
                    name: 'Carport',
                    allowBlank: false,
                    minValue: 0,
                    blankText: '项目车位数不能为空',
                    anchor: '100%'
                },
                {
                    xtype: 'numberfield',
                    fieldLabel: '车位费',
                    name: 'ParkingFee',
                    allowBlank: false,
                    minValue: 0,
                    blankText: '项目车位费不能为空',
                    anchor: '100%'
                },
            ckbSupporting,
                {
                    xtype: 'textareafield',
                    fieldLabel: '备注',
                    name: 'Re',
                    anchor: '100%'
                }
            ],
                buttons: [
            { text: '退出', id: 'pfBtnQuit' },
            { text: '保存', id: 'pfBtnSave' }
            ]
            });            me.callParent(arguments);
        }
    });
    var facilityForm = Ext.create("ui.FacilityForm");
});
json数据：{"total":8,"root":[{"ID":"5ec02fb7-aee7-40a8-9364-93e2c73f1885","NO":"01","Name":"大型商场","OrderNo":1,"DefaultValue":"1","MaxValue":null,"MinValue":null,"UseType":1,"Re":"大型商场","IsUsed":1,"IsUsedName":"使用","ClassID":"5e1abbf6-7d1a-4346-a031-749990786ca4","IsStandard":-1,"UseTypeName":"使用默认值","IsStandardName":"否"},{"ID":"00bc523b-9c40-4c90-8f56-0a19a0e5dfa1","NO":"02","Name":"医院","OrderNo":2,"DefaultValue":"2","MaxValue":null,"MinValue":null,"UseType":1,"Re":"医院","IsUsed":1,"IsUsedName":"使用","ClassID":"5e1abbf6-7d1a-4346-a031-749990786ca4","IsStandard":-1,"UseTypeName":"使用默认值","IsStandardName":"否"},{"ID":"81616233-f07a-4c4b-be6f-3273156e72bd","NO":"03","Name":"学校","OrderNo":3,"DefaultValue":"3","MaxValue":null,"MinValue":null,"UseType":1,"Re":"学校","IsUsed":1,"IsUsedName":"使用","ClassID":"5e1abbf6-7d1a-4346-a031-749990786ca4","IsStandard":-1,"UseTypeName":"使用默认值","IsStandardName":"否"},{"ID":"d2cb970a-b760-4585-a364-8cace5a831a0","NO":"04","Name":"美容院","OrderNo":4,"DefaultValue":"3","MaxValue":null,"MinValue":null,"UseType":1,"Re":"美容院","IsUsed":1,"IsUsedName":"使用","ClassID":"5e1abbf6-7d1a-4346-a031-749990786ca4","IsStandard":-1,"UseTypeName":"使用默认值","IsStandardName":"否"},{"ID":"1cf31ab6-74d3-43ba-985b-23ffb9e40af5","NO":"05","Name":"公交枢纽","OrderNo":5,"DefaultValue":"5","MaxValue":null,"MinValue":null,"UseType":1,"Re":"公交枢纽","IsUsed":1,"IsUsedName":"使用","ClassID":"5e1abbf6-7d1a-4346-a031-749990786ca4","IsStandard":-1,"UseTypeName":"使用默认值","IsStandardName":"否"},{"ID":"d927cc28-2dde-4796-88fd-e1a7035c4d3c","NO":"06","Name":"游乐园","OrderNo":6,"DefaultValue":"6","MaxValue":null,"MinValue":null,"UseType":1,"Re":"游乐园","IsUsed":1,"IsUsedName":"使用","ClassID":"5e1abbf6-7d1a-4346-a031-749990786ca4","IsStandard":-1,"UseTypeName":"使用默认值","IsStandardName":"否"},{"ID":"e33b9e31-2493-4633-87ae-4cf340469a8e","NO":"07","Name":"休闲水上餐厅","OrderNo":7,"DefaultValue":"7","MaxValue":null,"MinValue":null,"UseType":1,"Re":"休闲水上餐厅","IsUsed":1,"IsUsedName":"使用","ClassID":"5e1abbf6-7d1a-4346-a031-749990786ca4","IsStandard":-1,"UseTypeName":"使用默认值","IsStandardName":"否"},{"ID":"92e78d8f-16bd-4ba2-bbe3-7ff250d7390f","NO":"08","Name":"健身运动中心","OrderNo":8,"DefaultValue":"8","MaxValue":null,"MinValue":null,"UseType":1,"Re":"健身运动中心","IsUsed":1,"IsUsedName":"使用","ClassID":"5e1abbf6-7d1a-4346-a031-749990786ca4","IsStandard":-1,"UseTypeName":"使用默认值","IsStandardName":"否"}]}

恭喜了，结婚第一工作第二，放假就休息何苦这么累呢首先发现了几个问题，不至于影响程序运行但从4.0版本开始已经不建议使用:
1. ext.extend 见这里
如果定义class建议写成Ext.define('myCheckboxGroup', { extend: 'Ext.form.CheckboxGroup', 2. Ext.regModel 见这里
建议写成Ext.define("MyModel", {extend: "Ext.data.Model",fields: [] });还有就是你的那句 me.removeAll();用在这我不太理解，能否解释下? 我感觉用在这里是不对的。你用store的方法加载data中却没有数据有可能是你没在store定义root,也有可能是取来的json格式和extjs的默认json格式不符，不过既然你要用Ext.Ajax.request也行。我现在没做web，手头没装extjs4的库，没办法调试，建议你找一个ext4 ajax request的例子比较着做，这样能减少不必要的语法上错误。

感谢20楼的朋友，我现在还在休假，用手机上网，所有不太方便回复，语法上我确实有点分不清楚，买的那本参考书实在太坑爹，一开始介绍了4的语法，里面的例子却全是3的语法。我解释一下那个地方为什么要用me,而不是this。因为我注释了另一种用store获取数据的方法。在那里面如果用this指的就是store,而不是自定义的复选框，所以没办法用this.而上面有一句initComponent: function () {var me = this;已经将this赋值给me了

调试易

高分求 extjs 4.1 CheckboxGroup 动态生成列和保存

解决方案 »