ExtJs中checkboxgroup复选框组件的显示问题

 checkboxgroup复选框组件容器，当时用属性   allowBlank：false  必须至少选择一项，否则给出提示 blankText ，出现如下问题：

如果一个没有选择的时候，给出提示，但是布局会变化Ext.onReady(function(){
 Ext.QuickTips.init();
 var panel=new Ext.form.Panel({
  title:'CheckboxGroup和RadioGroup测试',
  width:300,
  height:150,
//  frame:true,
  renderTo:Ext.getBody(),
  defaults:{
   labelSeparator:':',
   labelWidth:50,
   width:200,
   labelAlign:'right'
  },
  items:[{
   xtype:'radiogroup',
   fieldLabel:'性别',
   
   columns:2,
   items:[
   {boxLabel:'男',name:'sex',inputValue:'male'},
   {boxLabel:'女',name:'sex',inputValue:'female'}
   ]
  },{
   xtype:'checkboxgroup',
   fieldLabel:'爱好',
   columns:3,
   width:250,
   allowBlank:false,
   blankText:'必须择',
   msgTarget:'side',
layout: {
 type:'table',        //这里采用'table'布局可以实现，就可以保证布局不乱

 columns:3
},
   items:[
   {boxLabel:'游泳',name:'swim'},
   {boxLabel:'散步',name:'walk'},
   {boxLabel:'阅读',name:'read'},
   {boxLabel:'游戏',name:'game'},
   {boxLabel:'电影',name:'movie'}
   ]
  },{
   xtype:'radiogroup',
   fieldLabel:'性别',
   
   columns:2,
   items:[
   {boxLabel:'男',name:'sex',inputValue:'male'},
   {boxLabel:'女',name:'sex',inputValue:'female'}
   ]
  }
  ]
 });
})