extjs Ext.form.CheckboxGroup 复选框组件\Ext.toolbar.Toolbar 工具条学习

本文链接：https://blog.csdn.net/inthat/article/details/131265880

文章介绍了ExtJS框架中用于创建复选框组的CheckboxGroup组件，展示了如何设置列数和垂直布局。同时，也讲解了Toolbar工具条的运用，包括按钮的排列和事件处理，强调了其灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

extjs Ext.form.CheckboxGroup 复选框组件\Ext.toolbar.Toolbar 工具条学习

Ext.form.CheckboxGroup 复选框组件

⭐️来自很多年前的extjs笔记，只是一个归档，不做更新！⭐️

	{
		xtype: 'checkboxgroup',
		fieldLabel: 'Two Columns',
		// Arrange checkboxes into two columns, distributed vertically
		columns: 2,
		vertical: true,
		items: [
			{ boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
			{ boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true },
			{ boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
			{ boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
			{ boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
			{ boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
		]
	},

总结:

columns: 2, 字段表示显示成几列

Ext.toolbar.Toolbar 工具条

总结:

发现xtype: toolbar 比较独立在很多地方都可以使用，而一定是panel中，例如一些地方你想让按钮向右（‘->’）排列，用这个很方便。

   	{
   			xtype : 'toolbar',
   			//columnWidth : .5,
   			margin : '0 0 0 18',
   			//anchor : '100%',
   			items : [
   				'->',
   				{
   					xtype:'JButton',
   					text:'新增',
   					minWidth:62,
   					handler:function() {
   						alert('xxx');
   						/*
   						var self = this.up('gridpanel');
   						Ext.TaskManager.stopAll();
   						self.showAddTask('add');
   						*/
   					}
   				},
   				{					align:'right',


   				xtype:'JButton',
   				text:'移除',
   				minWidth:62	
   		}]
   },