`

Ext学习_表单组件5

 
阅读更多
	//最高学历
	//准备数据
	var data = [
	    [1,"博士"],
	    [2,"硕士"],
	    [3,"研究生"],
	    [4,"本科"],
	    [5,"专科"],
	    [6,"高中"],
	    [7,"文盲"]
	];
	var proxy = new Ext.data.MemoryProxy(data);
	//定义学历结构
	var edu = new Ext.data.Record.create([
	     {name:"eid", type: "int", mapping: 0},
	     {name:"ename", type: "string", mapping: 1}
	]);
	var reader = new Ext.data.ArrayReader({},edu);
	var store = new Ext.data.Store({
		proxy: proxy,
		reader: reader
	});
	
	//加载数据
	store.load();
	var chkEdu = new Ext.form.ComboBox({
		name: "chkEdu",
		fieldLabel: "最高学历",
		store: store,
		mode: "local",
		triggerAction: "all",
		emptyText: "请选择最高学历",
		displayField: "ename",
		valueField:"eid",
		value: 3 //缺省值
	});
	
	var numLove = new Ext.form.NumberField({
		name: "numLove",
		fieldLabel: "最喜欢的数字"
	});
	
	var areaAddress = new Ext.form.TextArea({
		name: "areaAddress",
		fieldLabel: "家庭住址",
		width: 500,
		height: 50
	});
	
	var timeWork = new Ext.form.TimeField({
		name: "timeWork",
		fieldLabel: "上班时间",
		increment: 30,
		fommat: "H:i"
	});
	
/*	
 * json对象
 * var timeWork = {
			name: "timeWork",
			xtype: "timefield",
			fieldLabel: "上班时间"
	}*/
	
	//个人简介
	var htmlIntro = new Ext.form.HtmlEditor({
		name: "htmlIntro",
		fieldLabel: "个人简介",
//		enableLists: false,
//		enableSourceEdit: false,
		height: 150
	});
	
	var txtPhoto = new Ext.form.TextField({
		name: "txtPhoto",
		inputType: "file",
		fieldLabel: "照片",
		width: 500
	});
	
	var btnSubmit = new Ext.Button({
		text: "提交",
		handler: function(){
			f.getForm().submit({
				success: function(form, action){
					form.items.each(function(field){
						if(field.isFormField){
							alert(field.getName() + "=" + field.getValue());
						}
					});
				},
				
				failure: function(){
					Ext.MessageBox.alert("","表单提交失败!");
				}
			});
		}
	});
	
	var btnReset = new Ext.Button({
		text: "重置",
		handler: function(){
			f.getForm().reset();
		}
	});
 
分享到:
评论

相关推荐

    Ext_Demo.rar_DEMO_Ext demo_ext_demo_java ext demo_javaext demo

    EXT的组件如表格、面板、窗口、表单等可能在这里被定义和使用。 3. **HTML/模板文件**:页面布局和视图可能由HTML或EXT的模板语言(如JSP、FreeMarker等)定义,它们与JavaScript代码一起工作,呈现用户界面。 4. ...

    oa.rar_ext_ext java oa_ext oa_ext tree_java ext tree

    EXT是一个JavaScript库,提供了一套丰富的用户界面组件,如表格、表单、树形视图等,用于构建富客户端应用。EXT_Java则是EXT库与Java服务器端交互的桥梁,允许在Java后端和EXT前端之间进行数据交换和控制逻辑处理。 ...

    ext扩展_Flash表单上传组件

    在本案例中,"Flash 表单上传组件"是 EXT 扩展中用于实现文件上传功能的一个特殊模块,它利用 Adobe Flash 技术来处理大文件上传和多文件同时上传,解决了传统 HTML 表单上传的限制。 1. **EXTJS 框架基础**:EXTJS...

    ext_表单提交_数据校验

    总之,Ext JS的表单组件及其数据校验功能,为Web应用开发提供了强大且灵活的工具集,使得创建高质量的用户界面变得既简单又高效。通过合理配置和利用这些组件,开发者能够构建出既美观又实用的Web应用程序,显著提升...

    Ext_Demo.rar_DEMO_ext de_ext demo

    "ext_de"可能指的是EXT的德文版本,或者是一个特定的EXT组件或扩展,而"ext_demo"则可能是一个关于EXT使用的具体示例。 在【压缩包子文件的文件名称列表】"Ext_Demo"中,我们可能找到以下内容: 1. HTML文件:这些...

    ext-js.zip_ext_ext js_extjs_js ext

    EXT JS的组件库非常丰富,涵盖了大部分常见的Web UI元素,如表格(Grid)、树形视图(Tree)、表单(Forms)、菜单(Menus)、工具栏(Toolbars)等。这些组件都经过精心设计,具有高度可定制性和可扩展性。此外,...

    Ext_2.2_API(chinese).rar_Ext 2.2 API_ext js 2_ext-2.2 api_ext2.2

    此外,`Ext.form.FormPanel`和相关组件允许创建复杂的表单,支持验证和数据提交。拖放功能允许用户通过简单的拖动操作来交互,增强了用户体验。还有许多其他工具类,如`Ext.util.Format`,提供了一系列实用的格式化...

    EXT2_combobox_form.rar_combobox ext_ext

    EXT2是EXT库的一个早期版本,它提供了丰富的组件和功能,包括form表单和combobox。 在EXT2中,Form表单是数据输入和用户交互的核心部分。它们允许用户填写和提交信息,通常用于创建动态和复杂的Web表单。EXT2的form...

    Ext uploader_v1.2 Java

    1. **Ext JS**: Ext JS是一个开源的JavaScript库,它提供了丰富的用户界面组件,如表格、面板、表单、树形结构等,用于创建交互式的、桌面级别的Web应用。它的组件化设计使得开发者可以轻松地构建复杂的UI。 2. **...

    Ext组件说明 Ext组件概述

    Ext的表单组件为创建复杂的数据输入界面提供了强大的支持。 ##### 1. **Checkbox(复选框)** Checkbox组件允许用户选择多个选项中的一个或多个。 ##### 2. **ComboBox(组合框)** ComboBox组件结合了文本框和...

    Ext4.1.0_API中文版

    在API中,类系统是Ext4的核心部分,它提供了丰富的组件模型,如表格(Grid)、树形视图(Tree)、表单(Form)、面板(Panel)等。这些组件可以方便地组合在一起,构建出功能强大的Web应用程序。例如,Grid组件不仅...

    EXT_JS入门详解_x

    在EXT_JS中,组件是构建界面的基础,包括窗口、表格、表单、菜单等。例如,EXT_JS的表格控件允许开发者创建功能齐全的数据展示和操作界面,而弹出框则可以通过不同的主题定制,提供多样化的用户体验。EXT_JS的灵活性...

    Ext教程_chm

    在EXT_API.chm中,你可以找到关于各种组件如Grid(表格)、Panel(面板)、Window(窗口)、Form(表单)等的详细信息,以及如何配置它们的属性、监听它们的事件、使用数据绑定等功能。此外,还可能包含布局管理、...

    ext-3-TextField-sample.rar_ext_ext TextField_ext textfield inp

    5. **表单集成**: TextField经常与`Ext.form.FormPanel`一起使用,形成完整的表单。在表单中,每个TextField作为表单的一个字段,可以通过`FormPanel`的`getForm().load()`和`submit()`方法进行数据加载和提交。 ...

    Ext2.0_Src_Zh-ch

    6. **表单组件**:Ext JS提供了丰富的表单组件,如文本字段、选择框、日期选择器等,以及强大的表单验证功能。 7. **拖放功能**:支持拖放操作,使得用户可以轻松地进行数据的移动和组织。 8. **国际化支持**:...

    ext学习资料 20篇详细学习笔记 初学者ext学习的文档

    例如,表格组件允许展示大量结构化数据,而表单组件则用于收集用户输入。 3. **数据绑定**:EXT引入了数据绑定机制,使得视图和数据模型之间能自动保持同步。这大大简化了数据驱动应用的开发,减少了手动更新界面的...

    EXT_JS实用开发指南_个人整理笔记.rar

    这份“EXT_JS实用开发指南_个人整理笔记”可能是开发者在深入学习EXT_JS时的宝贵参考资料,涵盖了EXT_JS的主要概念、组件使用、事件处理以及实际项目中的实践经验。 在EXT_JS开发中,首先要理解其基本架构和组件...

    Ext_cmd.zip_ext cmd_extjs cmd 开发

    它提供了丰富的组件库,包括表格、表单、树形结构等,以及强大的数据绑定和布局管理机制。通过ExtJs,开发者可以创建出具有桌面应用般用户体验的Web应用。 在“ExtJs实现 web版 cmd”这个项目中,开发的核心是模拟...

    EXT 表单验证EXT 表单验证

    EXT表单验证是EXT JS框架中的一个重要特性,用于在用户输入数据时确保数据的正确性和完整性...同时,"EXT 表单验证_journeylin_新浪博客_files"可能包含更多示例代码和相关资源,有助于你进一步学习EXT表单验证的细节。

    course_ext11.rar_course_ext11_extjs

    它提供了一套完整的UI组件,如表格、表单、面板、树形视图等,以及强大的数据绑定和布局管理机制。在选课系统中,ExtJS可能用于创建用户界面,如展示课程列表的网格,或者用于编辑学生信息的表单,提供交互性强、...

Global site tag (gtag.js) - Google Analytics