cn_godsmell
cn_godsmell
2010-07-05 17:09
浏览 260

关于FormPanel load的时候,checkbox 根据JSON数据自动选中的问题

近日在使用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

请教是哪里出了问题?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • works001
    works001 2010-07-05 18:14
    已采纳
        <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'
    });
    

    });





    点赞 评论
  • works001
    works001 2010-07-05 18:15

    我的ext2.2测试的

    点赞 评论
  • works001
    works001 2010-07-05 21:59
        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]

    点赞 评论
  • works001
    works001 2010-07-05 22:01

    response.getWriter().write("{success:true,data:{'answer_A':true,'answer_B':'','answer_C':'','answer_D':true}}"); 如果后台 这样 则A和D都选中!

    点赞 评论
  • works001
    works001 2010-07-05 22:19

    当然 这个 得加上 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;  
    }   
    

    });

    点赞 评论

相关推荐