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

ExtJs实践 - 支持返回Json格式的ComboBox2010-12-05 博客园 tubo假如我们程序中有产品（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）;
    }）;