`

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

阅读更多

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
	]
});

 

 

  • 大小: 1.7 KB
  • 大小: 1.3 KB
分享到:
评论

相关推荐

    ExtJS扩展:垂直页签tabPanel

    3. **样式调整**:在`ext-patch.css`中,为页签和容器添加新的CSS规则,确保它们按照垂直方向排列,同时处理滚动条的样式和行为。 4. **事件处理**:可能需要监听用户的滚动操作,更新页签的可见性和选中状态。 5....

    EXTJS 选下拉框,并取得下拉框的值

    总结一下,EXTJS中的下拉框(ComboBox)是通过`Ext.form.field.ComboBox`实现的,可以通过设置`store`、`displayField`和`valueField`来定义选项和获取选定值。使用`getValue()`方法可以获取选定的值,而`select`...

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容...ExtJS3 升级到 ExtJS4 需要修改大量代码,需要我们重新学习和适应 ExtJS4 的新特性和变化。

    extjs流程界面设计器参考_ExtJS工作流设计器_extjs工作流_extjs_

    基于ExtJS的工作流设计器,利用了ExtJS的强大组件模型和交互性,为用户提供了一个直观的方式来创建和编辑流程图。这样的设计器通常包括以下关键组成部分: 1. **组件库**:设计师需要一个包含各种工作流元素(如...

    extjs图标大全extjs图标大全extjs图标大全extjs图标大全

    ExtJS是一款强大的JavaScript UI框架,它提供了丰富的组件和工具,帮助开发者构建功能丰富的、响应式的Web应用程序。在这些应用程序中,图标扮演着至关重要的角色,它们可以增强用户界面的视觉吸引力,提升用户体验...

    extjs资料extjs资料extjs资料

    在其中,你可以找到ExtJS类库的详细说明,包括各种组件、方法、事件和配置选项,有助于快速查找和理解特定功能。 2. **EXT2.0中文教程.pdf**:这可能是针对ExtJS 2.0版本的教程,适合初学者入门。2.0版本虽然相对较...

    EXTJS应用EXTJS应用EXTJS应用EXTJS应用

    在EXTJS应用中,`Default.aspx`和`Session.aspx`通常是ASP.NET Web应用程序的入口点,它们是ASP.NET页面,用于处理用户请求和展示内容。`Default.aspx`通常作为默认首页,展示网站的欢迎界面或导航结构。而`Session....

    Extjs4.0、Extjs3.0教程CHM版和PDF版,中文版API

    本资源包含ExtJS 4.0和3.0的教程及API文档,对于学习和掌握这个框架至关重要。 首先,我们来看ExtJS 4.0的教程。ExtJS 4.0引入了重大的更新,包括全新的架构、改进的布局系统和更丰富的组件库。其中,新架构引入了...

    Extjs 2.2 Extjs 3.21 js

    总的来说,这个压缩包提供了两种不同版本的ExtJS,代表了该框架在不同时期的发展水平,开发者可以根据项目需求选择合适的版本。通过学习和使用这两个版本,可以深入理解ExtJS的设计理念,提高JavaScript编程技能,并...

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    这个“ExtJS3.3中文API.CHM”文档是为中文用户特别准备的,帮助他们更好地理解和使用ExtJS 3.3的各种功能。 CHM文件,全称是Microsoft Compiled HTML Help,是微软推出的一种帮助文件格式,它将HTML文件打包成单一...

    包含各种类型的extjs小图标,Extjs4小图标

    在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列图形图标,这些图标用于增强应用程序的视觉效果,提供用户友好的操作指示。 1. **图标分类**: - 图标通常分为不同的类别,如操作图标(比如...

    解决Extjs当中复选框全选后,取消选中某一项,全选框仍是选中状态的问题

    在EXTJS这个强大的JavaScript框架中,用户界面的交互设计是其一大亮点,其中包括各种各样的控件,如复选框(checkboxes)和全选功能。然而,在实际应用中,我们可能会遇到一个问题:当实现全选功能后,如果尝试取消...

    ExtJS 7.6 SDK trial

    7.6版本是ExtJS的一个重要更新,带来了诸多新特性、性能优化以及对现代浏览器和设备的更好支持。 SDK(Software Development Kit)是ExtJS 7.6的核心组成部分,它包含了开发、调试和部署ExtJS应用所需的所有资源。...

    ExtJS2.0及API文档和实用开发指南

    此外,布局管理(Layouts)在ExtJS中扮演着重要角色,它定义了容器中组件的排列方式。有多种预定义的布局可供选择,如fit布局、border布局、form布局等,可以根据需求灵活运用。拖放功能(Drag & Drop)则让开发者...

    Extjs例子Extjs例子

    Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子

    Extjs4.1 小例子(适合extjs初学者学习使用)

    对于初学者来说,理解并掌握ExtJS 4.1的基础和特性是非常有益的。 标题中的"Extjs4.1 小例子"意味着这个压缩包包含了一些基础的示例代码,旨在帮助初学者快速入门。通过这些小例子,你可以了解如何使用ExtJS 4.1来...

    extjs 3.4 开发前准备

    EXTJS的强大在于其丰富的组件库和高度可定制化,学习EXTJS不仅需要理解其API,还需要实践和调试以提升对框架的理解。随着对EXTJS的深入学习,开发者可以构建复杂、功能完善的Web应用程序。后续章节将分享更多关于...

    ExtJS经典皮肤集合

    标题中的"ExtJS经典皮肤集合"指的是该框架中包含的一系列预设的用户界面主题,这些皮肤允许开发者快速改变应用程序的外观和感觉,以满足不同用户或项目的需求。 描述中提到的"完整演示包"包含了多种皮肤的HTML文件...

Global site tag (gtag.js) - Google Analytics