ExtJs实践

假如我们程序中有产品(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);
　　　　});