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

核心提示：假如我们程序中有产品(Product)和产品分类(Category)这2个类，前端使用ExtJs，ExtJs实践:支持返回Json格式的ComboBox，通过JSON格式同后端进行通讯：publicclassCategory{publicstringId{get;set;}publicstringName{get;se

假如我们程序中有产品(Product)和产品分类(Category)这2个类，前端使用ExtJs，通过JSON格式同后端进行通讯：

public　class　Category　
{　
　　public　string　Id　{　get;　set;　}　
　　public　string　Name　{　get;　set;　}　
}　
　
public　class　Product　
{　
　　public　string　Id　{　get;　set;　}　
　　public　string　Name　{　get;　set;　}　
　　public　Category　Category　{　get;　set;　}　
}

在产品添加页面，会有一个ComboBox来选择产品所属的分类（当然实际工作中产品的Id是不会让用户输入的）：

如果使用ExtJs传统的ComboBox：

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