很多网友问我关于友财网在记帐页面,类型既可以选择,又可以直接录入是怎么做到的。(如果在下接菜单中没有想要帐单类型,可以直接在下拉菜单中录入,保存帐单后会直接保存刚新录入的类型,这样方便用户新增加类型,而不用再到类型维护中去维护再到记帐页面新增)。
这个ComboBox不是用EXT默认的ComboBox,而是我继承了EXT的ComboBox,自己写了个了js.其实也没有做多少工作,就是想让上面文本框有个name属性,这样就可以在Form提交时,一起把新录入的内容在后台得到了。
下面我把我写的代码贴出来,希望对有些朋友有所帮助。
/*
* Copyright(c) http://www.ucai8.com
*/
Ext.ux.ComboBox = Ext.extend(Ext.form.ComboBox, {
onRender : function(ct, position){
Ext.form.ComboBox.superclass.onRender.call(this, ct, position);
if(this.hiddenName){
this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id: (this.hiddenId||this.hiddenName)},
'before', true);
this.hiddenField.value =
this.hiddenValue !== undefined ? this.hiddenValue :
this.value !== undefined ? this.value : '';
}
if(Ext.isGecko){
this.el.dom.setAttribute('autocomplete', 'off');
}
if(!this.lazyInit){
this.initList();
}else{
this.on('focus', this.initList, this, {single: true});
}
if(!this.editable){
this.editable = true;
this.setEditable(false);
}
}
});
使用这个JS也很方便,和一般的Combo没有太多的别区:
//类型下拉菜单
var typeCombo = new Ext.ux.ComboBox({
fieldLabel: ftype,
name:'typeName',
id:'typeName',
store: combo_ds,
displayField:'name',
typeAhead: true,
lazyInit:false,
mode: 'local',
editable:true,
triggerAction: 'all',
emptyText:tEmpty,
allowBlank:false
});
效果可以看 友财网的记帐页面->新增帐单弹出页面的类型下拉菜单。友财网http://www.ucai8.com
如果有更好的办法,或意见都可以和我联系,我会虚心听取的:)
-------
我希望友财网可以成为大家学习EXT的一个例子,也希望友财网因为用了EXT而成为国内网站用户体验最好的网,功能最实用的网:)希望大家一起努力, 一起进步~~