extjs 复选框处理 博客分类: js EXTFirebug
程序员文章站
2024-02-18 20:01:04
...
复选框checkBox,单选框radioBox。CheckboxGroup
如果在formPanel中使用了checkBox,radioBox时,在提交表单时使用formPanel.getForm().submit()来提交数据时,如果单选框和复选框未选中时,则extjs是不会提交这些控件的。在postdata中根本就不存在这些控件的任何影子。可以通过firebug来查看提交的数据。
var checkboxgroup_temp = new Ext.form.CheckboxGroup({ id:'myGroup', xtype: 'checkboxgroup', fieldLabel: '多选', itemCls: 'x-check-group-alt', // Put all controls in a single column with width 100% columns: 1, items : [{ layout : 'column', items: [ {boxLabel: 'Item 1', name: 'cb-col-1'}, {boxLabel: 'Item 2', name: 'cb-col-2', checked: true}, {boxLabel: 'Item 3', name: 'cb-col-3'} ] },{ layout : 'column', items: [ {boxLabel: 'Item 1', name: 'cb-col-1'}, {boxLabel: 'Item 2', name: 'cb-col-2', checked: true}, {boxLabel: 'Item 3', name: 'cb-col-3'} ] }] });
myCheckboxGoup是一个Checkbox组件的集合,对每一个Checkbox项的访问,可能过
myCheckboxGroup.items.get(i) 定位到Checkbox 然后查看属性值 例如 myCheckboxGroup.items.get(i).inputValue
如果这种方法没有效果
可以尝试用这样的方法
myCheckboxGroup.setValue('cb-col-1', true);//设置 name为cb-col-1 的checked为true 即表选中
var field_newspwap_3 = new Ext.form.FieldSet({ title : '用户角色分配', autoHeight : true, collapsible : true, id : 'field_newspwap_3', items : [{ layout : 'column', defaults : { hideLabels : true, layout : 'form' }, items : [{ columnWidth : .01 }, { columnWidth : .33, items : [new Ext.form.Checkbox({ boxLabel : '计费系统', name : 'userRole.roleIdStr', inputValue :10, checked : true })] }, { columnWidth : .33, items : [new Ext.form.Checkbox({ boxLabel : '演示系统', name : 'userRole.roleIdStr', inputValue :11, checked : true //disabled : true })] }, { columnWidth : .33, items : [new Ext.form.Checkbox({ boxLabel : '风格', name : 'userRole.roleIdStr', inputValue :12, checked : true // disabled : true })] }] }] });
'userRole.roleIdStr'
是映射你后台的数据类和属性。
后台得到的值是: 11, 12, 13
提交上一数据JS
var frm_newspwap = new Ext.FormPanel({ margins : '5 5 5 5', id : 'frm_newspwap', frame : true, title : '新增用户', labelAlign : 'left', labelWidth : 160, region : 'center', autoScroll : true, //bodyStyle:'overflow-x:auto;', items : [field_newspwap_3], buttonAlign : 'center', buttons: [{ text:'保存', xtype : 'easyButton', handler:function(){// 保存操作 if (frm_newspwap.form.isValid() == false){ return; } frm_newspwap.form.submit({ url:'test/UserRole/save.do', success:function(form,action){ Ext.MessageBox.alert('提示',action.result.msg); grid_pag.doLoad(0); }, scope:this, failure:function(form,action){ Ext.MessageBox.alert('错误',action.result.msg); } }) } }] });
推荐阅读
-
EXTJS 中Ajax 应用示例 博客分类: js Ajax网络应用应用服务器EXTjson
-
extjs 复选框处理 博客分类: js EXTFirebug
-
EXTJS3 简易下拉框 easyCombo 博客分类: js
-
extjs two tree 动态双树代码 效果图 博客分类: js EXTJSP
-
Extjs3综合应用(待续v4...初版) 博客分类: js EXTSpringJSPStrutsiBATIS 最近又要搞界面了。郁闷啊。
-
ExtJS DWR 入门级代码 源代码 博客分类: js DWREXTJBuilderUIJ#
-
extjs two tree 动态双树代码 效果图 博客分类: js EXTJSP
-
ext 3.1 Ext.form.FormPanel 复选列表框处理 博客分类: js EXT
-
extjs 复选框处理 博客分类: js EXTFirebug
-
ExtJS 之 Store数据集 博客分类: js EXTjson