1 对于类型是checkboxgroup的数据,数据库中保存数据的格式是value1,value2...valueN,其中1~N的数据有可能不存在,如果选中则存在,最后拼接成一个串。
在Ext中,通过Record对象向FormPanel中的内置对象BasicForm加载数据时,采用的是setValues方法,而setValues第一步要通过Record中定义的name使用findField方法找到表单元素,遗憾的是,继承了Field的checkboxgroup组件并不能正确的通过getName返回自身引用,所以,需要对getName方法进行重写,此外,为了适应我们采用的数据格式,对于该组件的setValue(被setValues调用)和getValue(获取到已加工的数据,此事后话)也要进行重写。故而对于形如:
{
xtype: 'checkboxgroup',
name: 'biztype',
width: 220,
columns: 3,
fieldLabel: '业务类别',
items: [
{boxLabel: '类别1', inputValue: '01'},
{boxLabel: '类别2', inputValue: '02'},
{boxLabel: '类别3', inputValue: '03'},
{boxLabel: '类别4', inputValue: '04'}
]
}
的checkboxgroup定义,需重写类如下:
Ext.override(Ext.form.CheckboxGroup,{
//在inputValue中找到定义的内容后,设置到items里的各个checkbox中
setValue : function(value){
this.items.each(function(f){
if(value.indexOf(f.inputValue) != -1){
f.setValue(true);
}else{
f.setValue(false);
}
});
},
//以value1,value2的形式拼接group内的值
getValue : function(){
var re = "";
this.items.each(function(f){
if(f.getValue() == true){
re += f.inputValue + ",";
}
});
return re.substr(0,re.length - 1);
},
//在Field类中定义的getName方法不符合CheckBoxGroup中默认的定义,因此需要重写该方法使其可以被BasicForm找到
getName : function(){
return this.name;
}
});
2 通过内置对象basicForm的getValues方法可以获取到一个form的完整json数据,但遗憾的事,这里取到的是dom的raw数据,类似emptyText的数据也会被返回,而Field的getValue方法不存在这个问题,所以如果想要返回一个非raw的json集合,可以给formpanel添加如下方法:
getJsonValue:function(){
var param = '{';
this.getForm().items.each(function(f){
var tmp = '"' + f.getName() + '":"' + f.getValue() + '",';
param += tmp;
});
param = param.substr(0,param.length - 1) + '}';
return param;
}
这个方法同样适用于上面定义的checkboxgroup,如此就可以把前后台的数据通过json统一起来了
分享到:
相关推荐
Ext_Net_CheckboxGroup 勾选、全选、反选和限制勾选
NULL 博文链接:https://lw671579557.iteye.com/blog/579242
NULL 博文链接:https://lovebeyond.iteye.com/blog/441009
重写 代码如下: //解决checkboxgroup回填数据问题 Ext.override(Ext.form.BasicForm,{ findField : function(id){ var field = this.items.get(id); if(!field){ this.items.each(function(f){ if(f.isXType(...
EXT TREE 扩展CHECKBOX所需JS loader方法中添加: baseAttrs: {uiProvider: Ext.tree.TreeCheckNodeUI }
NULL 博文链接:https://stevelee.iteye.com/blog/1328992
CheckboxGroup配置中的items处理生成一个对应的panel,该处理过程只有一次,所以很难对CheckboxGroup进行动态添加。如需要数据动态创建,试着创建整个CheckboxGroup,而不是动态添加item。 代码如下: var ...
EXTjs2 的treeNode 带有checkbox,可是API中,关于checkbox的事件就只有一个checkchange事件,所以写个方法传上来。
TreePanel的checkbox节点操作及父子节点联动的演示DEMO
代码如下: Ext.override(Ext.form.CheckboxGroup,{ setValueForItem : function(val){ //多个选项值以逗号分开的 val = “,”+val+”,” this.items.each(function(item) { if (val.indexOf(item.inputValue) > -1) ...
html checkbox cash 表单提交checkbox 多选
复选框组.js CheckBoxGroup JavaScript 类
flex实现 ComboBox中下拉checkbox 经测试好用,还有可移动面板,和可改大小面板实例
cocos2dx实现的 HTML label, 和cocos2dx 实现的 checkboxgroup (scrollview)
实现ListCtrl中checkbox风格的单选
Extjs 模拟下拉多选checkbox
checkboxgroup中修改时赋值是最难解决的,要改写方法才能实现
checkbox实现复选框,源代码,动态生成多个checkbox,切换点击实现槽函数,遍历定位哪个按钮