ExtJs实践:支持返回Json格式的ComboBox
假如我们程序中有产品(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); });
如果在上面的表单中输入产品Id为“1”，产品名称为“产品1”，产品类别选择“产品分类一”，点击保存按钮，那么将得到一个json格式的字符串如下：
即：{"Id“:"1”,"Name”:"产品1”,"CategoryId”:"1"}，而这个json字符串传到服务端是不能被完整的反序列化成一个Product的实例的，因为丢失了Category的信息，能够被完整地反序列化成一个Product的json字符串应该是下面这样的：
{"Id“:"1”,"Name”:"产品1”,"Category”:{"Id“:"1”,"Name”:"产品分类一"}}
那么我们就来改造ExtJs的ComboBox，让它能够返回JSON格式的值，继承Ext的ComboBox，增加一个表明是否是Json格式的属性和两个方法如下：
JsonComboBox = Ext.extend(Ext.form.ComboBox, {
isJsonFormat: true,
getName: function() {
if (this.hiddenName)
return this.hiddenName;
return this.name;
},
getJson: function() {
var o = {};
if (this.valueField)
o[this.valueField] = this.value;
if (this.displayField)
o[this.displayField] = this.lastSelectionText;
return o;
}
});
同时也要对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); });
看看字符串是不是我们需要的格式：
转载请注明出处。