Extjs中checkboxgroup以及radiogroup的使用_雨儿

http://blog.sina.com.cn/u/1269150814

首页博文目录关于我

个人资料

微博

加好友发纸条

写留言加关注

博客等级：
博客积分：

博客访问：
关注人气：
获赠金笔：0支
赠出金笔：0支
荣誉徽章：

正文字体大小：大中小

Extjs中checkboxgroup以及radiogroup的使用

(2010-11-04 12:08:24)

标签：

extjs

后台

获取

checkboxgroup

inputvalue

it

分类： ExtJS

在extjs中，为便于功能实现，通常会使用到checkboxgroup以及radiogroup的控件，在实际使用中，如何获取或设置该控件的值，通过搜索及自身摸索实践，主要可采取如下方式：

1：Checkboxgroup

代码：

{

xtype:'checkboxgroup',

name:'FileItype',

fieldLabel:'文件类别',

items:[

{boxLabel:'专用通知',inputValue:1,checked:true},

{boxLabel:'专题报告',inputValue:2},

{boxLabel:'会议纪要',inputValue:3}]},

如图:

http://s16/middle/6543cca5h8e2b109348af&690

如何获取这个checkboxgroup值，查看API，getValue返回时对象形成的数组，为获取该值，通过一下代码：

var FileItype=showserach.getForm().findField('FileItype').getValue();

var s='';

for(i=0;i<FileItype.length;i++)

{s=s+','+FileItype[i].inputValue}

ds.baseParams={FileItype:s.substr(1)};

传递至后台，以字符串的方式进行，例如:http://s14/middle/6543cca5h8e2b34bf46cd&690

2：Radiogroup的使用

该功能，在本人项目中，在修改模块中使用，通过getForm().load(),从后台以JSON格式获取数据

JSON数据格式：

[{'FileItype':'3','Filedate':'2010-8-13','FileNum':'2010质管-JY-064','KeyWord':'滤光膜','FileRname':'关于滤光膜处理的会议纪要','FileUnit':'IQA','Filedetail':''}]

前台代码:

{

xtype:'radiogroup',

fieldLabel:'文件类别',

name:'FileItype', //后台返回的JSON格式，直接赋值；

items:[

{boxLabel:'专用通知',name:'FileItype',inputValue:1},

{boxLabel:'专题报告',name:'FileItype',inputValue:2},

{boxLabel:'会议纪要',name:'FileItype',inputValue:3}

]},

这里之所以，重复设置了name:'FileItype'，主要是如果在radiogroup的items中，不设置相同的name,在使用上，将出现radio可以多选的现象

http://s13/middle/6543cca5hd8db1334721c&690
这样很容易误导使用者，但是如果items设置的name不与radiogroup的name相同,通过getForm().findField('FileItype').getValue()获取的null。

为此，通过设置radiogroup的name与radiogroup中items控件相同name，可以获取radiogrou的值

代码：

var FileItype=EditfileForm.getForm().findField('FileItype').getValue().inputValue;

url:"SaveFilesList.asp?action=Edit",

params:

{fileid:parafileid,

FileItype:FileItype},

http://s4/middle/6543cca5h8e2b649c2e23&690

但是向后台传递的数值有2个，笔者目前是通过在后台，删除其中一个的方法才实现的

FileItype=Left(Trim(request("FileItype")),1)

转载于：http://blog.sina.com.cn/s/blog_6543cca50100l2ln.html?retcode=0

参考：

http://www.sencha.com/forum/showthread.php?39161-2.1svn-2.2-Checkbox-RadioGroup-getName-getValue-return-nothing-isFormField-true

关键字: ext2.2 radiogroup监听事件

{
   xtype : 'radiogroup',
   allowBlank : false,
   width : 100,
   labelSeparator : Color.blank,
   items : [{
    boxLabel : '是',
    name : 'check',
    inputValue : true,
    listeners : {
     'check' : function(checkbox, checked){
                         if(checked){//只有在点击时触发
                                   }

                            }
                //监听事件
               }
    }
   }, {
    boxLabel : '否',
    name : 'check',
    inputValue : false,
    checked : true,
    listeners : {
     'check' : function(){
   //监听事件
}
    }
   }],
   fieldLabel : '是否修改名称'
}

实战总结：（关键代码）

************************CheckboxGroup控件*******************************

NationPerson = Ext.extend(Ext.form.CheckboxGroup,{
                  xtype: 'checkboxgroup',
                  columns:4,
                  items: [
                      {
                          boxLabel: '汉族',
                          name: 'usertype',
                          inputValue: '困难老人'
                      }, {
                          boxLabel: '布依族',
                          name: 'usertype',
                          inputValue: '老劳模'
                      }, {
                          boxLabel: '藏族',
                          name: 'usertype',
                          inputValue: '离休干部'
                      }, {
                          boxLabel: '朝鲜族',
                          name: 'usertype',
                          inputValue: '军烈属'
                      },

........

                     {
                          boxLabel: '其他',
                          name: 'usertype',
                          inputValue: '其他特殊情况'
                      }
                  ]
               });

**************************控件的调用****************************

personCollectNationWin.JSFromInfo=function(opt,ID){
personCollectNationWin.JSFromInfo_this=this;
this.nationPerson = new NationPerson({labelSeparator : ''});
   this.OKBtn = new Ext.Button({
    text : '确认',
    handler : this.OKBtn
   });
   var BackBtn = new Ext.Button({
    text : '关闭',
    handler : this.close
   });
if('checkData'==opt){this.OKBtn.disable();}
personCollectNationWin.JSFromInfo.superclass.constructor.call(this, {
    id : "personCollectNationWin.JSFromInfo",
    waitMsgTarget : true,
    labelAlign : 'right',
    height : 300,
    autoScroll : true,
    buttonAlign : 'center',
    frame : true,
    defaults : {
     bodyStyle : 'padding:0 0 0 0'
    },
    border : false,
    items:[{
      layout:'column',
      items:[{
       layout:'form',
       columnWidth:'0.99',
       labelWidth:40,
       items:[this.nationPerson]
      }]
    }],
    buttons : [this.OKBtn, BackBtn]// 显示按钮
});
};

***********************效果图*****************************

http://s5/middle/4ba5b45eg9d8b79e4cab4&690
***********************获取控件选中的内容*******************************

Ext.extend(personCollectNationWin.JSFromInfo,Ext.form.FormPanel,{
   // "确定"按钮 - 新增/修改功能
   OKBtn : function(opt,ID) {
    var aa = CheckBoxGroupGetValue(Ext.getCmp("personCollectNationWin.JSFromInfo").nationPerson);
    alert(aa);
    if (personCollectNationWin.JSFromInfo_this.form.isValid()) {
     personCollectNationWin.JSFromInfo_this.form.submit({
        url : 'dailyOffice.do?method=updateWorkWeek',
        method : 'POST',
        params : {
                 id : personCollectNationWin.Panel_this.UpdateId,
                 startDay:startDay,
                  realName : Ext.getDom('realName').value,
                  dep : Ext.getDom('department').value,
                  username : Ext.getDom('username').value
        },
        waitMsg : '正在保存，请稍后... ...',
        success : function(form, action) {
         Ext.Msg.alert('提示', '数据保存成功！');
         personCollectNationWin.NewJSWin_this.close();//关闭窗口
         WorkWeek.Grid_this.getStore().reload({});//刷新列表
        },
        failure : function(form, action) {
         Ext.Msg.alert('提示', '数据保存失败！');
        }
       })
    } else {
     Ext.MessageBox.alert('提示', '必填项非空！');
    }
   }

});
********************alert出的效果****************************

http://s11/middle/4ba5b45eg9d8ba3c3caba&690

阅读┊ 收藏 ┊ 喜欢 ▼ ┊打印┊举报/Report

前一篇：Could not synchronize database state with session解决方法

后一篇：解决问题：MyEclipse工程发布到tomcat没有成功

新浪BLOG意见反馈留言板　欢迎批评指正