近日在使用EXTJS 3.1.0开发的时候遇到了FormPanel load 时,Checkbox 无法按照加载的JSON字符串自动选中,
不知道各位有没有遇到类似的问题?附上我的部分代码,请有经验的人帮忙分析一下原因:
这个是FormPanel 中的定义:
[code="java"]
{
xtype: 'checkboxgroup',
fieldLabel: '正确答案',
columns: 4,
items: [
{boxLabel: 'A', name: 'answer_A', inputValue:"A"},
{boxLabel: 'B', name: 'answer_B', inputValue:"B"},
{boxLabel: 'C', name: 'answer_C', inputValue:"C"},
{boxLabel: 'D', name: 'answer_D', inputValue:"D"}
]
}
[/code]
以下是服务端在Form load 的时候返回的 Json 代码:
[code="java"]
{"success":"true",
"data":{"answer_A":"","answer_B":"","answer_C":"","answer_D":"D"}
}
[/code]
请教,为什么选项D无法自动选中?
我参考了 yht19yb 和 microboat 关于 “RadioGroup 和 CheckboxGroup 动态 赋值”的帖子,
但是在我使用了两位 对Ext.form.BasicForm的findField 方法的复写代码之后,执行中FireBug 报错:
f.items.each is not a function
请教是哪里出了问题?
<script type="text/javascript">
Ext.onReady(function(){
Ext.override(Ext.form.BasicForm,{
findField : function(id){
var field = this.items.get(id);
if(!field){
this.items.each(function(f){
if(f.isXType('radiogroup')||f.isXType('checkboxgroup')){
f.items.each(function(c){
if(c.isFormField && (c.dataIndex == id || c.id == id || c.getName() == id)){
field = c;
return false;
}
});
}
if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
field = f;
return false;
}
});
}
return field || null;
}
});
Ext.QuickTips.init();
var data = {"success":"true",
"data":{"answer_A":"","answer_B":"","answer_C":"","answer_D":true}
}
var form = new Ext.form.FormPanel({
title: 'form',
frame: true,
width:400,
items: [{
xtype: 'checkboxgroup',
fieldLabel: '正确答案',
columns: 4,
items: [
{boxLabel: 'A', name: 'answer_A', inputValue:"A"},
{boxLabel: 'B', name: 'answer_B', inputValue:"B"},
{boxLabel: 'C', name: 'answer_C', inputValue:"C"},
{boxLabel: 'D', name: 'answer_D', inputValue:"D"}
]
}],
buttons:[{text:"赋值",handler:function(){
form.form.setValues(data.data);
}}],
renderTo: 'form'
});
});
我的ext2.2测试的
Ext.override(Ext.form.BasicForm,{
findField : function(id){
var field = this.items.get(id);
if(!field){
this.items.each(function(f){
if(f.isXType('radiogroup')||f.isXType('checkboxgroup')){
f.items.each(function(c){
if(c.isFormField && (c.dataIndex == id || c.id == id || c.getName() == id)){
field = c;
return false;
}
});
}
if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
field = f;
return false;
}
});
}
return field || null;
}
});
var data = {"success":"true",
"data":{"answer_A":"","answer_B":"","answer_C":"","answer_D":true}
}
var form = new Ext.form.FormPanel({
title: 'form',
frame: true,
width:400,
items: [{
xtype: 'checkboxgroup',
fieldLabel: '正确答案',
columns: 4,
items: [
{boxLabel: 'A', name: 'answer_A', inputValue:"A"},
{boxLabel: 'B', name: 'answer_B', inputValue:"B"},
{boxLabel: 'C', name: 'answer_C', inputValue:"C"},
{boxLabel: 'D', name: 'answer_D', inputValue:"D"}
]
}],
buttons:[
{text:"赋值",handler:function(){
[color=red]form.form.load({
url:"cx!getValue.action"
})
}
}]
});[/color]
后台 public String getValue() throws IOException{
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=utf-8");
[color=red] response.getWriter().write("{success:true,data:{'answer_A':'','answer_B':'','answer_C':'','answer_D':true}}");
return null;
}[/color]
response.getWriter().write("{success:true,data:{'answer_A':true,'answer_B':'','answer_C':'','answer_D':true}}"); 如果后台 这样 则A和D都选中!
当然 这个 得加上 Ext.override(Ext.form.BasicForm,{
findField : function(id){
var field = this.items.get(id);
if(!field){
this.items.each(function(f){
if(f.isXType('radiogroup')||f.isXType('checkboxgroup')){
f.items.each(function(c){
if(c.isFormField && (c.dataIndex == id || c.id == id || c.getName() == id)){
field = c;
return false;
}
});
}
if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
field = f;
return false;
}
});
}
return field || null;
}
});