EXTjs3 checkBoxGroup 的动态添加删除 -

xxy_tidy_sky

浏览: 5146 次
性别:
来自: 江苏

最近访客更多访客>>

zhangph739

raul00

sky662626

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

EXTjs3 checkBoxGroup 的动态添加删除

博客分类：

extjs

extjs 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>

分享到：