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)));

 

Ext js中CheckBoxGroup的動態綁定