ext4.1动态生成多个checkboxgroup（或者radiogroup），并且有toolbar操作、

前端控制器实现部门与用户选择功能

最新推荐文章于 2023-10-12 19:25:13 发布

原创最新推荐文章于 2023-10-12 19:25:13 发布 · 4.1k 阅读

2 ·

CC 4.0 BY-SA版权

ext 专栏收录该内容

38 篇文章

订阅专栏

本博客详细介绍了前端控制器如何实现部门和用户的选择功能，包括数据获取、组件渲染及用户选择后的操作。

前台controller代码：

Ext.define('zyc.controller.Filter', {
    extend: 'Ext.app.Controller',
	init:function(){
		this.control({
			 'filterpanel':{
			     render:function(view,opts){
			     	Ext.Ajax.request({
			     	      url:'user!getForm.action',
			     	      success:function(response,o){
			     	            var forms=eval('('+response.responseText+')');
				     	      	var checkboxgroups=forms[0].checkboxgroup;//获得所有的checkboxgroup
				     	      	var radiogroups=forms[0].radiogroup;//获得所有的radiogroup
				     	      	var cbgCount=checkboxgroups.length;
				     	      	var rdoCount=radiogroups.length;
				     	      	if(toolBar==null){
							     	   view.add({
										   xtype:'toolbar',
										   name: 'name'
									   });
					            }
				     	      	for(i=0;i<cbgCount;i++){
				     	      	      var checkboxgroup=checkboxgroups[i];//获得单独一个checkboxgroup对象
				     	      	      var checkboxs=checkboxgroup.checkBox;
				     	      	      var fieldLabelValue=checkboxgroup.fieldLabel;
				     	      	      var cbgName=checkboxgroup.cbgName;
				     	      	      console.debug(fieldLabelValue);
				     	      	      var newCheckBoxs=new Array();
					     	          for(var j=0;j<checkboxs.length;j++){
					     	               newCheckBoxs.push(
						     	               Ext.form.Checkbox({
						     	               	     boxLabel: checkboxs[j].boxLabel, 
						     	                 	 inputValue: checkboxs[j].inputValue, 
						     	                 	 checked: checkboxs[j].checked,
						     	                 	 name: checkboxs[j].name,
						     	                 	 labelWidth:230,
						     	                 	 width:80
						     	               })
					     	               );
					     	          }
						     	      var toolBar=view.down('toolbar');
						     	      toolBar.hide();
				     	      	      view.add({
						     	      	   xtype:'checkboxgroup',
						     	      	   name: cbgName,
						     	      	   columns: 5,
                                           vertical: true,
			                               fieldLabel: fieldLabelValue,
			                               items:newCheckBoxs,
			                                    listeners:{
								     	              change:function(f ,newValue,oldValue,o){
								     	              	  var self=this;
								     	                  var checkeds=f.getChecked();
								     	                  var allCBG=Ext.ComponentQuery.query('checkboxgroup')//获得所有
								     	                  var allCheckedCount=0;//由于页面有多个checkboxgroup，所有要找出所有被选择的数量
								     	                  Ext.each(allCBG,function(Cbg){
								     	                        if(Cbg.getChecked().length>0){
								     	                        	allCheckedCount=Cbg.getChecked().length;
								     	                        }
								     	                  })
								     	                  console.debug(self);
								     	                  var cgButtonObj=toolBar.down('button[ref='+self.name+']');//获得被单击的cb按钮对象
								     	                  // console.debug(oldValue);
								     	                  if(checkeds.length>0){
								     	                   	  var checkValues=[];
								     	                   	  for(i=0;i<checkeds.length;i++){
								     	                   	  	  checkValues.unshift(checkeds[i].inputValue)
								     	                   	  }
								     	                   	 // console.debug(checkValues)
								     	                   	  if(toolBar.isHidden()){
								     	                   	      toolBar.show();
								     	                   	      cgButtonObj.show();
								     	                   	  }
								     	                   	  if(cgButtonObj.isHidden()){
								     	                   	      cgButtonObj.show();
								     	                   	  }
								     	                      cgButtonObj.setText('所选'+self.name+'：'+checkValues);
								     	                      cgButtonObj.setTooltip (checkValues);
								     	                      cgButtonObj.setIconCls ('icon-stat');
								     	                  }
								     	                  else {
								     	                      cgButtonObj.hide();
								     	                  }
								     	                  if(allCheckedCount<=0){
								     	                      toolBar.hide();
								     	                  }
								     	               
								     	              },
								     	              afterrender:function(view, eOpts ){
								     	                  var tooButton=new Ext.button.Button({
								     	                      ref:cbgName,
								     	                      maxWidth :200,
								     	                      shadow:'drop '
								     	                  });
								     	                  //console.debug(tooButton);
								     	                  toolBar.add(tooButton);
								     	                  tooButton.on('mouseover',function(){
								     	             	         tooButton.setIconCls('icon-delete');
								     	             	  },this);
								     	             	  tooButton.on('mouseout',function(){
								     	             	         tooButton.setIconCls('icon-edit');
								     	             	  },this);
								     	             	  tooButton.on('click',function(){
								     	             	         var checkeds=view.getChecked();
								     	                         view.items.each(function(item) {
				                                                     item.setValue(false);
				                                                 });
								     	             	  },this)
								     	              }
								     	        }
				     	      	      });
				     	      	      //newCheckBoxs=null;
				     	      	      
				     	      	}
			     	      
			     	      	
			     	      },
			     	      failure:function(response,o){
                            console.debug('fail');
}
			     	})
			     }
			 }
		});
	},
	views:[
		'filter.FilterPanel'
	],
	stores :[
		
	],
	models :[
		
	] 
});

后天返回的数据：

[{"checkboxgroup":[{"cbgName":"dept","checkBox":[{"boxLabel":"销售部","checked":false,"id":1,"inputValue":"销售部","name":"dept"},{"boxLabel":"技术部","checked":false,"id":2,"inputValue":"技术部","name":"dept"},{"boxLabel":"普通部","checked":false,"id":3,"inputValue":"普通部","name":"dept"},{"boxLabel":"资源部","checked":false,"id":4,"inputValue":"资源部","name":"dept"},{"boxLabel":"后勤部","checked":false,"id":5,"inputValue":"后勤部","name":"dept"},{"boxLabel":"行政部","checked":false,"id":6,"inputValue":"行政部","name":"dept"},{"boxLabel":"管理部","checked":false,"id":7,"inputValue":"管理部","name":"dept"},{"boxLabel":"体育部","checked":false,"id":8,"inputValue":"体育部","name":"dept"},{"boxLabel":"劳动部","checked":false,"id":9,"inputValue":"劳动部","name":"dept"},{"boxLabel":"策划部","checked":false,"id":10,"inputValue":"策划部","name":"dept"}],"fieldLabel":"部门选择"},{"cbgName":"user","checkBox":[{"boxLabel":"郑一","checked":false,"id":1,"inputValue":"郑一","name":"user"},{"boxLabel":"陈二","checked":false,"id":2,"inputValue":"陈二","name":"user"},{"boxLabel":"张三","checked":false,"id":3,"inputValue":"张三","name":"user"},{"boxLabel":"李四","checked":false,"id":4,"inputValue":"李四","name":"user"},{"boxLabel":"王五","checked":false,"id":5,"inputValue":"王五","name":"user"},{"boxLabel":"赵六","checked":false,"id":6,"inputValue":"赵六","name":"user"},{"boxLabel":"林七","checked":false,"id":7,"inputValue":"林七","name":"user"},{"boxLabel":"孙八","checked":false,"id":8,"inputValue":"孙八","name":"user"},{"boxLabel":"吴九","checked":false,"id":9,"inputValue":"吴九","name":"user"},{"boxLabel":"蔡十","checked":false,"id":10,"inputValue":"蔡十","name":"user"}],"fieldLabel":"用户选择"}],"radiogroup":[]}]

简单代码下载：

效果图