EXT中使用复选框(2011-09-08).doc

复选框checkBox,单选框radioBox。CheckboxGroup 如果在formPanel中使用了checkBox,radioBox时，在提交表单时使用formPanel.getForm().submit()来提交数据时，如果单选框和复选框未选中时，则extjs是不会提交这些控件的。在postdata中根本就不存在这些控件的任何影子。可以通过firebug来查看提交的数据。 Java代码 1 var checkboxgroup_temp = new Ext.form.CheckboxGroup( 2 id:myGroup, 3 xtype: checkboxgroup, 4 fieldLabel: 多选, 5 itemCls: x-check-group-alt, 6 / Put all controls in a single column with width 100% 7 columns: 1, 8 9 items : 10 layout : column, 11 items: 12 boxLabel: Item 1, name: cb-col-1, 13 boxLabel: Item 2, name: cb-col-2, checked: true, 14 boxLabel: Item 3, name: cb-col-3 15 16 , 17 layout : column, 18 items: 19 boxLabel: Item 1, name: cb-col-1, 20 boxLabel: Item 2, name: cb-col-2, checked: true, 21 boxLabel: Item 3, name: cb-col-3 22 23 24 25 ); 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 即表选中 Java代码 26 var field_newspwap_3 = new Ext.form.FieldSet( 27 title : 用户角色分配, 28 autoHeight : true, 29 collapsible : true, 30 id : field_newspwap_3, 31 items : 32 layout : column, 33 defaults : 34 hideLabels : true, 35 layout : form 36 , 37 items : 38 columnWidth : .01 39 , 40 columnWidth : .33, 41 items : new Ext.form.Checkbox( 42 boxLabel : 计费系统, 43 name : userRole.roleIdStr, 44 inputValue :10, 45 checked : true 46 ) 47 , 48 columnWidth : .33, 49 items : new Ext.form.Checkbox( 50 boxLabel : 演示系统, 51 name : userRole.roleIdStr, 52 inputValue :11, 53 checked : true 54 /disabled : true 55 ) 56 , 57 columnWidth : .33, 58 items : new Ext.form.Checkbox( 59 boxLabel : 风格, 60 name : userRole.roleIdStr, 61 inputValue :12, 62 checked : true 63 / disabled : true 64 ) 65 66 67 68 69 70 ); userRole.roleIdStr是映射你后台的数据类和属性。后台得到的值是： 11, 12, 13 提交上一数据JSJava代码 71 var frm_newspwap = new Ext.FormPanel( 72 margins : 5 5 5 5, 73 id : frm_newspwap, 74 frame : true, 75 title : 新增用户, 76 labelAlign : left, 77 labelWidth : 160, 78 region : center, 79 autoScroll : true, 80 /bodyStyle:overflow-x:auto;, 81 items : field_newspwap_3, 82 buttonAlign : center, 83 buttons: 84 text:保存, 85 xtype : easyButton, 86 handler:function()/ 保存操作 87 if (frm_newspwap.form.isValid() = false) 88 return; 89 90 frm_newspwap.form.submit( 91 url:test/UserRole/save.do, 92 success:function(form,action) 93 Ext.MessageBox.alert(提示,action.result.msg); 94 grid_pag.doLoad(0); 95 , 96 scope:this, 97 failure:function(form,action) 98 Ext.MessageBox.alert(错误,action.result.msg); 99 100 ) 101 102 103 ); 104 -用ext生成了带复选框的列表，想删除被选中的数据怎样通过复选框传数值？下边为代码和列表图片JScript code Ext.onReady(function() var sm= new Ext.grid.CheckboxSelectionModel();var cm= new Ext.grid.ColumnModel( new Ext.grid.RowNumberer(), sm, header :所属类型,dataIndex :h1,width:130, header :修改,dataIndex :h2,width:50, renderer :function(value) return 修改; ); cm.defaultSortable= true; ds= new Ext.data.Store( proxy :new Ext.data.HttpProxy( url :/hghss/ExExamTeamPageAction.do ), reader :new Ext.data.JsonReader( totalProperty :totalProperty,root :root, name :h1,mapping :h1, name :h4,mapping :h2 )/ remoteSort:true );var grid= new Ext.grid.GridPanel( tbar:new Ext.Toolbar.Fill(), text:删 除, tooltip:删除信息, handler:function()window.open();/iconCls:remove/图标 , el :grid,/页面div的id title : , sm:sm,/设置多选框可以多选 trackMouseOver :tru