ExtJs实践:支持返回Json格式的ComboBox

核心提示： 同时也要对FormPanel进行如下改造，同样增加一个是否是Json格式的属性和一个获取表单Json格式字符串的方法：JsonForm=Ext.extend(Ext.form.FormPanel,{isJsonFormat:true,getJsonString:function(){varf=t

同时也要对FormPanel进行如下改造，同样增加一个是否是Json格式的属性和一个获取表单Json格式字符串的方法：

JsonForm　=　Ext.extend(Ext.form.FormPanel,　{　
　　　　　　isJsonFormat:　true,　
　　　　　　getJsonString:　function()　{　
　　　　　　　　var　f　=　this;　
　　　　　　　　var　values　=　f.form.getValues();　
　　　　　　　　if　(this.isJsonFormat　===　true)　{　
　　　　　　　　　　f.items.each(function(c)　{　
　　　　　　　　　　　　if　(c.isJsonFormat　===　true)　{　
　　　　　　　　　　　　　　values[c.getName()]　=　c.getJson();　
　　　　　　　　　　　　}　
　　　　　　　　　　},　f);　
　　　　　　　　}　
　　　　　　　　var　data　=　Ext.util.JSON.encode(values);　
　　　　　　　　return　data;　
　　　　　　}　
　　　　});

使用方法如下，注意，JsonCombobox只需要定义一个Name属性就可以了：

　　　　Ext.onReady(function()　{　
　　　　　　Ext.QuickTips.init();　
　　　　　　var　store　=　new　Ext.data.ArrayStore({　
　　　　　　　　fields:　['Id',　'Name'],　
　　　　　　　　data:　[['1',　'产品分类一'],　['2',　'产品分类二']]　
　　　　　　});　
　　　　　　var　form　=　new　JsonForm({　
　　　　　　　　labelWidth:　75,　
　　　　　　　　frame:　true,　
　　　　　　　　title:　'JsonComboBox',　
　　　　　　　　bodyStyle:　'padding:5px　5px　0',　
　　　　　　　　width:　350,　
　　　　　　　　defaults:　{　width:　230　},　
　　　　　　　　defaultType:　'textfield',　
　　　　　　　　items:　[　
　　　　　　　　{　fieldLabel:　'产品Id',　
　　　　　　　　　　name:　'Id'　
　　　　　　　　},　{　fieldLabel:　'产品名称',　
　　　　　　　　　　name:　'Name'　
　　　　　　　　},　new　JsonComboBox({　
　　　　　　　　　　fieldLabel:　'产品分类',　
　　　　　　　　　　name:　'Category',　
　　　　　　　　　　store:　store,　
　　　　　　　　　　displayField:　'Name',　
　　　　　　　　　　mode:　'local',　
　　　　　　　　　　valueField:　'Id'　
　　　　　　　　})　
],　
　　　　　　　　buttons:　[{　
　　　　　　　　　　text:　'保存',　
　　　　　　　　　　handler:　function()　{　
　　　　　　　　　　　　var　values　=　form.getJsonString();　
　　　　　　　　　　　　alert(values);　
　　　　　　　　　　}　
　　　　　　　　}　
]　
　　　　　　});　
　　　　　　form.render(document.body);　
　　　　});　

看看字符串是不是我们需要的格式：

图片看不清楚？请点击这里查看原图（大图）。