Question

Extjs中checkboxgroup有没有按照内容有自由填充,填满就换行

checkboxgroupz中的宽度是设置每个元素的宽度

Answer 1

1. 给checkboxgroup配置'auto'的layout

2. checkbox配置额外的样式(inline_checkbox样式所在文件需要在html中引用到)

.inline_checkbox{
	display:inline-block !important;
	margin-right:10px !important;
}

Ext.create('Ext.window.Window',{
        	title:'Sample Form',
        	autoShow:true,
        	items:[{
        		xtype:'form',
        		frame:false,
        		bodyStyle:{
        			background:'#ffc',
        			padding:10
        		},
        		width:400,
        		height:300,
        		items:[{
        			xtype:'checkboxgroup',
        			layout:'auto',
        			defaults:{
        				cls:'inline_checkbox'
        			},
        			items:[
			            { boxLabel: 'Item 1 is very long', name: 'rb', inputValue: '1' },
			            { boxLabel: 'Item 2 is very very very very long', name: 'rb', inputValue: '2', checked: true },
			            { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
			            { boxLabel: 'Item 4 is very very long too', name: 'rb', inputValue: '4' },
			            { boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
			            { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
			        ]
        		}]
        	}]
        });