Below is the code snippet that I am using
Code:
<script>
   Ext.onReady(function(){
		var cpanel = new Ext.form.FormPanel( {
			//height: 300,
			renderTo : document.body,
			items : [new Ext.form.CheckboxGroup( {
				fieldLabel : 'CheckboxGroup',
				itemId : 'ocosmap',
				columns : 1,
				items : [ {
					boxLabel : 'Box 1',
					checked : true
				}, {
					boxLabel : 'Box 2',
					checked : false
				} ] })],
			buttons : [ {
					text : 'Add new box',
					/**handler : function() {
						var chkbox = new Ext.form.Checkbox( {
							boxLabel : 'item-3',
							checked : true
						});
						// chkbox.setBoxLabel('item-3');
					chkbox.setValue('hello-chkbox');
					//this.items.itemAt(0).items.add(chkbox);
					//this.doLayout();
					}*/
				}]
		});
		
		var formpanelBtn = cpanel.buttons[0];
		formpanelBtn.on( {
			scope : cpanel,
			click : function() {
			alert('');
			var chkboxGroup = this.getComponent('ocosmap');
			var chkbox = new Ext.form.Checkbox( {
				boxLabel : 'item-3',
				checked : true
			});
			// chkbox.setBoxLabel('item-3');
		chkbox.setValue('hello-chkbox');
			chkboxGroup.items.add(chkbox);
			this.doLayout();
		}//end of click
		});	
	   
   });//end of ext.onready
   
   </script>
In firebug, I can see that checkboxgroup is having the recently added item. But it is not reflecting in the ui