Extjs中单选框垂直排列和水平排列

最新推荐文章于 2022-07-20 04:03:21 发布

原创最新推荐文章于 2022-07-20 04:03:21 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Java #Extjs #Radio

Extjs 专栏收录该内容

34 篇文章

订阅专栏

本文介绍如何在ExtJS中实现单选框的垂直和水平布局。垂直布局直接利用FormPanel与xtype为radio的组件；水平布局则通过RadioGroup实现。这两种方式均能有效管理单选按钮组。

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

1.垂直排列方式：直接在FormPanel中用xtype:"radio"的单选框

var addForm = new Ext.FormPanel({
	frame: true,
	labelWidth: 60,
	labelAlign: "right",
	items:[
		{
			xtype:"radio",
			fieldLabel:"评价方式",
			name:"etype",
			inputValue:"1",
			boxLabel:"事前评价"
		},{
			xtype:"radio",
			name:"etype",
			inputValue:"2",
			boxLabel:"事中评价"
		},{
			xtype:"radio",
			name:"etype",
			inputValue:"3",
			boxLabel:"事后评价"
		}
	]
});

2.水平排列方式：使用RadioGroup

//1.创建radioGroup
var radioGroup = new Ext.form.RadioGroup({
	fieldLabel:"评价类型",
	width:250,
	items:[{
		layout: 'column',
		items: [
			{
				name:"etype",
				inputValue:"1",
				boxLabel:"事前评价"
			},{
				name:"etype",
				inputValue:"2",
				boxLabel:"事中评价"
			},{
				name:"etype",
				inputValue:"3",
				boxLabel:"事后评价"
			}
		]
	}]
});

//2.创建FormPanel
var addForm = new Ext.FormPanel({
	frame: true,
	labelWidth: 60,
	labelAlign: "right",
	items:[
		radioGroup
	]
});