开发学院网页设计JavaScript ExtJs实践:支持返回Json格式的ComboBox 阅读

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

 2009-09-09 00:00:00 来源:WEB开发网   
核心提示:假如我们程序中有产品(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实践:支持返回Json格式的ComboBox

如果使用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); 
    }); 

1 2 3  下一页

Tags:ExtJs 实践 支持

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
更多精彩
    赞助商链接

    热点阅读
      焦点图片
        最新推荐
          精彩阅读