ExtJs中checkboxgroup 动态加载数据怎么弄的？

Posted 2023-04-19

参考技术A var res = Ext.util.JSON.decode(response.responseText).data; //
var items=[];
for(var i=0;i<res.length;i++)

var d=res[i];
var chk = boxLabel: d.boxLabel, name: d.name, inputValue: d.name;
items.push(chk);

//定义多选组
var CheckBoxGroupTypes = new Ext.form.CheckboxGroup(

xtype: 'checkboxgroup',
fieldLabel: '元素类型',
id:'ElementTypeID',
name :'ElementTypeID',
columns: 3,
anchor:"95%",
msgTarget:"side"
);
CheckBoxGroupTypes.items = items;
Forms.items.add(CheckBoxGroupTypes); //
Forms.doLayout();
本回答被提问者和网友采纳

Ext js中CheckBoxGroup的动态绑定

    <script  type="text/jscript">
     var WinXianCode;
    function SearchGetXianLuF(Type)
    {
        if(!WinXianCode)
        {
            //创建窗体框
             WinXianCode=new Ext.Window({
           id:‘WinXianCode‘,
           width:700,
           height:600,
           closeAction:‘hide‘,
           autoScroll:true,
           model:true,
           items : [
                    new Ext.form.FormPanel({
                        frame:true,
                        defaultType:‘textfield‘,
                        id:‘c-form‘,
                        labelWidth :40,
                        defaults:{width:700},
                        })
                   ],
           title:‘报价项目包含不包含项‘
          });
        }
        QuotedPriceView(Type);
        //弹出窗体
        WinXianCode.show(‘XianLuCode‘);
    }
    </script>
    
    
    <script type="text/javascript">

    //报价数据加载
    function QuotedPriceView(Type)
    {
        var QuotedPriceCheckboxItems = [];
        Ext.MessageBox.wait(‘报价数据正在加载‘,‘请稍等...‘);
        Ext.Ajax.request({  
            url:‘QuotedPrice.aspx‘,
            method : ‘post‘,
            success: function (r) {  
                Ext.MessageBox.hide();
                var data = Ext.decode(r.responseText).QuotedPricelist; 
                if(data.length>0)
                {
                    //获取报价：开始
                    for(var i=0;i<data.length;i++)
                    {
                      QuotedPriceCheckboxItems.push
                      ({
                           id:‘CheckBox‘+data[i].name, 
                           name:data[i].name, 
                           boxLabel: data[i].boxLabel,
                           inputValue:data[i].inputValue,
                           listeners:{
                              check:function(el,checked){
                                    var coninter=Ext.getCmp("QuotedPriceS");
                                    if(coninter!=undefined)
                                    {
                                        var inter=coninter.items;
                                        var xq=[];  
                                        for (var i = 0; i < inter.length; i++)  
                                        {  
                                            if (inter!=null && inter.get(i).checked)  
                                            {  
                                                xq.push(inter.get(i).inputValue); 
                                            }  
                                        }  
                                        if(Type==1)
                                        {
                                         //费用包含
                                         Ext.getCmp("ratedetail").setValue(xq.join(‘\n‘));
                                        
                                        }
                                        if(Type==2)
                                        {
                                          //费用不包含
                                         Ext.getCmp("ratedetailno").setValue(xq.join(‘\n‘));
                                        }
                                    }
                              }
                            }
                      });
                    }
                    //获取报价：结束
                    
                   //定义多选的报价数组：开始
                   var checkGroup = new Ext.form.CheckboxGroup({
                        id:‘QuotedPriceS‘,
                        xtype:‘checkboxgroup‘,
                        fieldLabel:‘报价‘,
                        width:1200,
                        columns:1,
                        items:QuotedPriceCheckboxItems
                        });
                  //定义多选的报价数组：结束
                  
                  //多选的容器：开始
                  var cbp = Ext.getCmp("c-form");
                  cbp.items.add(checkGroup);
                  cbp.show();
                  cbp.doLayout();  
                  //多选的容器：结束
                }
            }  
        });  
    }    
    </script>

View Code

 

 

 

后台返回的json数据：

 

JArray jar = new JArray();
        DataSet db_QuotedPrice = SPBll.Packages.getQuotedPrice();
        foreach (DataRow row in db_QuotedPrice.Tables[0].Rows)
        {
            jar.Add(new JObject(
                new JProperty("name", row["id"].ToString()),
                new JProperty("inputValue", row["cname"].ToString()),
                new JProperty("boxLabel", row["cname"].ToString())
                ));
        }
        Response.Write(new JObject(new JProperty("QuotedPricelist", jar)));