EXTjs3 checkBoxGroup 的动态平添删除
日期：2014-05-16 浏览次数：20521 次
EXTjs3 checkBoxGroup 的动态添加删除
最近新学ext，被checkBoxGroup 的动态添加删除搞的痛不欲生，在不停的尝试之后终于搞定了~
从后台拿数据再用ajax稍微改造下就可以了。
效果图：
?
?
test.js
?
?
function checkAll(groupId){
var group = Ext.getCmp(groupId);
var length = group.items.getCount();
var isCheck=group.items.items[0].checked;
for(var i=1;i<length;i++){
if(isCheck)
group.items.items[i].setValue(true);
else
group.items.items[i].setValue(false);
}
//alert(group.getValue());
}
Ext.onReady(function(){
var myGroup = new Ext.form.CheckboxGroup({
id:'myGroup',
xtype: 'checkboxgroup',
fieldLabel: 'Single Column',
// Put all controls in a single column with width 100%
columns: 4,
items: [
{boxLabel: '全选', name: 'cb-col-0',id:'c0',listeners:{
check:function(){
checkAll('myGroup');
}
}},
{boxLabel: 'Item 1', name: 'cb-col-1',id:'c1'},
{boxLabel: 'Item 2', name: 'cb-col-2',id:'c2', checked: true},
{boxLabel: 'Item 3', name: 'cb-col-3',id:'c3'}
]
});
var button = new Ext.Button({
text: 'add'
,handler: function(){
var length = myGroup.items.getCount();
var col = myGroup.panel.items.get(myGroup.items.getCount()%myGroup.panel.items.getCount());
var newItem = new Ext.form.Checkbox(
{
boxLabel: 'Item '+length,
name: 'cb-col',
listeners:{
check:function(){
if(this.checked)
alert(this.id);
}
}});
col.add(newItem);
myGroup.items.add(newItem);
myGroup.panel.doLayout();
}
});
var button_r = new Ext.Button({
text: 'remove'
,handler: function(){
var items = myGroup.items;
var length = items.getCount();
var lastItems = myGroup.items.items[length-1];
lastItems.destroy();
myGroup.items.remove(lastItems.id);
myGroup.items.remove(lastItems);
}
});
var form = new Ext.form.FormPanel({
border:false,
labelAlign:"right",
buttonAlign:'center',
labelWidth:150,
frame:true,
baseParams : {create : true }
});
form.add(myGroup);
form.add(button);
form.add(button_r);
form.render('form');
});
?
test.html
?
?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<script src="../extjs/adapter/ext/ext-base.js" type="text/javascript" charset="utf-8"></script>
<script src="../extjs/ext-all-debug.js" type="text/javascript" charset="utf-8"></script>
<script src="test.js" type="text/javascript" charset="utf-8"></script>
<head >
<title >测试
</title>
</head>
<body >
<div id="form"></div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
