`

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

    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编程技能,并...

    EXTJS讲解个人项目经历

    EXTJS提供了多种布局模式,如Fit、Border、Form、Table等,用于控制组件在容器中的排列和大小调整。 10. **数据绑定**: EXTJS支持数据绑定,能够轻松地将UI组件与后台数据源连接,实现数据的实时更新。 11. **...

    轻松搞定Extjs 带目录

    本书作为Extjs的中文教程,旨在帮助读者快速上手Extjs,其内容涉及Extjs的基础知识和实际应用。 #### 2. JavaScript基础知识 - **类的定义**: Extjs中的类继承于JavaScript原生类,通过Ext.extend来定义。这是...

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

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

    ExtJS 7.6 SDK trial

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

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

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

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

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

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

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

    extjs4.0引用的JS和CSS

    本资源包含的是ExtJS 4.0版本中需要用到的主要JavaScript库文件和CSS样式文件,这些文件对于理解和使用ExtJS 4.0至关重要。 JavaScript 文件: 1. **ext-all.js**:这是ExtJS的核心库文件,包含了所有组件、功能和...

    extjs 3.4 开发前准备

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

    ExtJS经典皮肤集合

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

    ExtJS2.0实用简明教程和api

    ExtJS2.0实用简明教程和ExtJSapi

    ExtJS 界面设计器

    这个工具允许开发者通过拖放组件和直观地调整属性来设计用户界面,从而自动生成ExtJS脚本。 1. **ExtJS框架**:ExtJS是Sencha公司开发的一个开源JavaScript库,它提供了大量的预定义组件,如表格、面板、菜单、按钮...

    ExtJS快速入门 ExtJS快速入门 ExtJS快速入门

    ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS...

Global site tag (gtag.js) - Google Analytics