为 JSON 对象创建 CheckBox答案

【问题标题】：Creating CheckBox for JSON Objects为 JSON 对象创建 CheckBox
【发布时间】：2012-05-09 20:29:45
【问题描述】：

我正在使用 extjs4，我需要根据我的 JSON 对象添加复选框组，

JSON

{"Provider":[{"id":3,"name":"Beta House","npi":0,"taxId":0,
    "address":{
        "state":{"id":"1","stateName":"Alabama","code":"AL"},
    "zipcode":0,"country":"USA","email":"beta@gmail.com"},
"type":"CP","LabProvider":[],"ListOfProvider":[]}]}

ExtJs Ext.define('providerList', { 扩展：'Ext.data.Model', 字段：['id','name'] });

            var provider = Ext.create('Ext.data.Store', {
                model: 'providerList',
                autoLoad: true,
                proxy: {
                    type: 'ajax',
                    url : url+'/lochweb/loch/clinicalProvider/getAll',
                    reader: {
                        type: 'json',
                        root: 'Provider'
                    }
                }
            });

面板

 var checkboxconfigs = [];
                provider.each(function(record) { 
                    checkboxconfigs.push(
                            {                   
                                boxLabel: 'record.id', 
                                name: 'record.name'
                            }) 
                    });


var checkboxes = new Ext.form.CheckboxGroup({  
            fieldLabel:'Providers',  
            columns:2,  
            items:checkboxconfigs
             });

var patientProvider = new Ext.FormPanel({       
                renderTo: "patientProvider",
                frame: true,                 
                title: 'Association',
                bodyStyle: 'padding:5px',           
                width: 500,
                items: [{
                    checkboxes                               
                        }],                     
            });

表单中没有复选框。如何从 JSON 存储中填充复选框

【问题讨论】：

标签： extjs4

【解决方案1】：

几个提示：

在面板项的定义中移除复选框周围的 {}，如下所示：

                items: [ checkboxes ]

其次，确保在填充复选框时商店可用。

我的应用中有类似的情况，在呈现面板后可以使用商店。面板是动态填充的复选框列表，如下所示：

    panel.add(new Ext.form.CheckboxGroup({
        columns: 1,
        vertical: true,
        items: checkItems
    }));
    panel.doLayout();

编辑：另一个提示：

从此代码中删除 qutoes ''：

{                   
    boxLabel: 'record.id', 
    name: 'record.name'
}

否则你最终会得到所有标签“record.id”

【讨论】：

我已经运行了上面提到的更改代码，它适用于静态存储。当您在其上调用“每个”时，您确定商店已填充吗？
当您调用“checkboxconfigs.push”时，为每条记录尝试 console.log，并检查记录是否正常。

【解决方案2】：

您可以在将items 数组用作checkboxes 的子元素之前定义它。 items 数组的每个元素都是根据存储的每条记录创建的。

var items = [];
provider.each(function(record) { items.push({boxLabel: 'up-to-you', name: 'up-to-you'}) }, );
var checkboxes = new Ext.form.CheckboxGroup({  
        fieldLabel:'Providers',  
        columns:2,  
        items:items
         });

这里可以确定每个复选框的boxLabel和name（record的属性可以用作前缀、后缀...）

【讨论】：

您好，感谢您的评论，我按照您的建议做了，但没有成功。代码如下，var items = []; provider.each(function(record) { items.push( {boxLabel: 'record.data.id', name: 'record.data.name'} ) });
输入框标签和名称后，items数组仍然为空。因此表单中没有复选框。
我没有要查询的url，所以我尝试向商店添加一条记录，它工作正常。你能仔细检查一下 Ajax 商店吗？创建后有数据吗？
是的，数据存储区填充了 JSON 对象，但未创建复选框
真的很奇怪。如果商店有数据，它将起作用。 IMO，也许您将商店配置为使用 Ajax 查询数据，但实际上它没有成功获取数据？顺便说一句，返回的 JSON 格式应该是{Provider:[{id:3,name:"Beta House",npi:0,taxId:0, address:{state:{id:"1",stateName:"Alabama",code:"AL"}, zipcode:0,country:"USA",email:"beta@gmail.com"}, type:"CP",LabProvider:[],ListOfProvider:[]}]}