remote.php
<?php
echo json_encode(array(array('id'=>1,'name'=>'类别一','inputValue'=>'1'),array('id'=>2,'name'=>'类别二','inputValue'=>'2'),array('id'=>3,'name'=>'类别三','inputValue'=>'3')));
?>
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="ext-all-debug.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
Ext.namespace("Ext.ux");
Ext.ux.RemoteCheckboxGroup = Ext.extend(Ext.form.CheckboxGroup,{
url:'',
boxLabel:'',
inputValue:'',
setValue:function(val){
if(val.split){ //split() 方法用于把一个字符串分割成字符串数组
val = val.split(',');
}
this.reset();
for(var i=0;i<val.length;i++){
this.items.each(function(c){
if(c.inputValue==val[i]){
c.setValue(true);
}
});
}
},
reset:function(){
this.items.each(function(c){
c.setValue(false);
});
},
getValue:function(){
var val=[];
this.items.each(function(c){
if(c.getValue()==true)
val.push(c.inputValue);
});
return val.join(',');
},
initComponent:function(ct,position){
var items=[];
if(!this.items){//如果没有指定items就从url远程获取数据
Ext.Ajax.request({
url:this.url,
scope:this,
async:false,
success:function(response){
var data=Ext.JSON.decode(response.responseText);
var Items2 = this.items;
if(this.panel){
var columns = this.panel.items;
if(columns){
for(var i=0;i<columns.items.length;i++){
column=columns.items[i];
column.removeAll();
}
Items2.clear();
}
}
for(var i=0;i<data.length;i++){
var d= data[i];
var chk = {boxLabel:d[this.boxLabel],name:this.name,inputValue:d[this.inputValue]};
items.push(chk);
}
}
});
this.items=items;//关键一步
}
Ext.ux.RemoteCheckboxGroup.superclass.initComponent.call(this,arguments);
}
});
// Ext.reg('remotecheckboxgroup',Ext.ux.RemoteCheckboxGroup);类似于别名
var checksource = new Ext.ux.RemoteCheckboxGroup({
name:'checksource',//名称,当客户端提交的时候,服务端会根据该名称接收值,当值为多选时post 结果如下[1,2,3],用','分隔。
boxLabel:'name',
inputValue:'id',
url:'php/remote.php',//数据源的地址
fieldLabel:'招聘来源',
width:1000,//非常重要,不设置根本显示不出来
style:'padding-top:3px;height:17px;'
});
//创建panel
var panel = new Ext.Panel({
title: '动态复选框',
width: 1000,
height: 200,
frame: true,
items: [checksource]
});
//创建窗体
var win = new Ext.Window({
title: '窗口',
id: 'window',
width: 1100,
height: 374,
resizable: true,
modal: true,
closable: true,
maximizable: true,
minimizable: true,
items: [panel]
});
win.show();
});
</script>
</body>
</html>
![](https://img-blog.csdn.net/20170323145801872)