extjs CheckboxGroup 怎么动态生成并提交及修改

0 0

extjs CheckboxGroup 怎么动态生成并提交及修改25

这两天写 extjs ，想死了，可能年老体弱吧，感觉写不动了。所以来网上找大家。

简单代码如下：

var Checkbox new Ext.form.Checkbox({     //checkbox   
                fieldLabel:'checkbox',   
                name:'cb',   
                checked:true,   
                boxLabel:'checkbox' 
...

实现如这种效果：

我要通过 http请求，由后台返回一个 json 字符串，来显示这个复选框。
然后修改时，我怎么赋值？

var checkboxgroup_tempx = 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:'项目1',name:'item',inputValue:'1'},
   {boxLabel:'项目2',name:'item',inputValue:'2'},
   {boxLabel:'项目3',name:'item',inputValue:'3'},
   {boxLabel:'项目4',name:'item',inputValue:'4'},
   {boxLabel:'项目5',name:'item',inputValue:'5'},
   {boxLabel:'项目6',name:'item',inputValue:'6'}
  ]   
             } ]   
  
});

Ext.data 有几实现的，Ext.data.SimpleStore,等。

悲剧啊，真不知道extjs 怎么通过 url 请求，在网上看了不少例子，都不太是我要的。
谢谢各位。

全部代码如下：

<%@ page contentType="text/html; charset=UTF-8" errorPage="../../../inc/errorpage.jsp"%>

<html>
<head>
<title>新增</title>
<script type="text/javascript">


var field_newspwap_1 = new Ext.form.FieldSet({
	title : '用户基本信息',
	autoHeight : true,
	collapsible : true,
	id : 'field_newspwap_1',
	items : [{
		layout : 'column',
		border : false,
		baseCls : 'x-plain',
            items:[{
			columnWidth : .5,
			layout : 'form',
			baseCls : 'x-plain',
			border : false,
			defaultType : 'textfield',
			defaults : {
				anchor : '93%'
			},
			         items: [{
		                    	xtype:'textfield',
		                    	allowBlank : false,
		                        fieldLabel: '账号',
		                        name:'user.name'
		                        }

	                    ]
            	},{
			columnWidth : .5,
			layout : 'form',
			border : false,
			baseCls : 'x-plain',
			defaultType : 'textfield',
			defaults : {
				anchor : '93%'
			},
                	items: [{
	                  
	                    	xtype:'textfield',
	                    	allowBlank : false,
	                        fieldLabel: '密码',
	                        name:'user.password'
	                        }
	                       
                    ]
	           }]
          }]
});

var arr=[ [1, '小王'], [2, '小林'],[3, '张三'] ];   
    var reader = new Ext.data.ArrayReader(   
   {id: 0},   
   [   
    {name: 'value'},           
    {name: 'key'}      
    ]);   
      
    var store=new Ext.data.Store({   
      reader:reader   
   });   
   store.loadData(arr); 
   
   
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.ComboBox({ //combobox   
               		 fieldLabel:'ComboBox',   
               		 resiable:false,   
               		 handleHeight :100,  //   
              		  displayField:'key',   
              		  mode: 'local',   
               		 store:store   //数据储存到这个comboBox   
            })   ]   
            }, {   
                columnWidth : .33,   
                items : [  new Ext.form.Checkbox({     //checkbox   
                fieldLabel:'checkbox',   
                name:'cb',   
                checked:true,   
                boxLabel:'checkbox'  
            })  ]
            }, {   
                columnWidth : .33,   
                items : [new Ext.form.Checkbox({   
                    boxLabel : '风格',   
                    name : 'userRole.roleIdStr',   
                    inputValue : 12,   
                    checked : true   
                  //  disabled : true  
                })]   
            }]   
        }] 

});

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_1,field_newspwap_3],
	buttonAlign : 'center',
    buttons: [{
	            text:'保存',
	            xtype : 'easyButton',
	            handler:function(){// 保存操作
				if (frm_newspwap.form.isValid() == false){
	    		    return;
	  		    }
	  		    frm_newspwap.form.submit({
	   		    url:'system/User/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);
	   		       }
	  		     })
	   		    }
	     }] 
});

new Ext.Panel({
	renderTo : 'add_userdiv',
	width : Ext.get("add_userdiv").getWidth(),
	height : Ext.get("add_userdiv").getHeight(),
	border : false,
	layout : 'border',
	items : [frm_newspwap]
});

</script>
</head>
<body>
<div id="add_userdiv" style="width:100%;height:100%;"></div>
</body>

自己找到答案了。

var ds_duty_select = new Ext.data.Store({
	url : 'system/ZoneJson/getComboBoxList.do',
	reader : new Ext.data.JsonReader({root : 'root'},[{name : 'id'}, {name : 'name'}])
});

 
var combo_newspwap_sort = new Ext.form.ComboBox({ //本地下拉框
	//xtype : 'combo',
	fieldLabel : '权限类别',
	emptyText : '请选择...',
	//allowBlank : false,
	triggerAction : 'all',
	store : ds_duty_select,
	displayField :'s_name',
	hiddenName :'s_name',
	valueField : 'value', 
	mode : 'remote'
});