`

ext--表单初始化

    博客分类:
  • Ext
ext 
阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>表单初始化</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
	<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../ext/ext-all.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
			var f = new Ext.form.FormPanel(
				{
					title:"表单初始化",
					url:"",
					method:"post",
					frame:true,
					width:300,
					autoHeight:true,
					renderTo:"f",
					labelAlign:"right",
					labelWidth:65,
					defaultType:"textfield",
					items:[
						{
							xtype:"textfield",
							name:"username",
							fieldLabel:"用户名",
							width:200
						},
						{
							xtype:"textfield",
							inputType:"password",
							name:"password",
							fieldLabel:"密码",
							width:200
						},
						{
							xtype:"datefield",
							name:"birthday",
							fieldLabel:"出生日期",
							format:"Y-m-d",
							width:150
						},
						{
							xtype:"radiogroup",
							name:"sex",
							fieldLabel:"性别",
							width:100,
							items:[
								{
									xtype:"radio",
									name:"sex",
									boxLabel:"男",
									inputValue:"男"
								},
								{
									xtype:"radio",
									name:"sex",
									boxLabel:"女",
									inputValue:"女"
								}
							]
						}
					],
					buttonAlign:"center",
					buttons:[
						 {
						 	text:"提交"
						 },
						 {
						 	text:"本地读取",
						 	handler:function(){
						 		// 初始化表单数据。
						 		var json = {
						 			username:"test",
						 			password:"123",
						 			birthday:"1987-03-06",
						 			sex:"男"
						 		};
						 		f.getForm().setValues(json);
						 	}
						 },
						 {
						 	text:"远程读取",
						 	handler:function(){
						 		
						 		var reader = new Ext.data.JsonReader({},[
						 			{
						 				name:"username",
						 				type:"string",
						 				mapping:"username"
						 			},
						 			{
						 				name:"password",
						 				type:"string",
						 				mapping:"password"
						 			},
						 			{
						 				name:"birthday",
						 				type:"string",
						 				mapping:"birthday"
						 			},
						 			{
						 				name:"sex",//表单组件的名字
						 				type:"string",
						 				mapping:"sex"//json数据的key
						 			}]);
						 		f.getForm().reader = reader;//映射关系
						 		f.load({url:"initForm!getInitData.action"});//从哪儿获取数据
						 	}
						 }	
					]
				}
			);
		});
	</script>
  </head>
  
  <body>
	<div id="f" align="center"></div>
  </body>
</html>



分享到:
评论

相关推荐

    ext-5.1.0-gpl-开源版本

    在之前的版本中,虽然EXTJS已经具备了良好的模块化和按需加载能力,但在大型应用中,初始化时可能会有较多的HTTP请求,导致页面加载速度较慢。5.1.0版本对此进行了优化,通过减少不必要的HTTP请求和改进文件打包策略...

    EXT-desktop+struts2

    - 用户访问 `/Struts2qs/login.jsp`,这个 JSP 页面通常包含 EXTJS 的初始化代码,加载 EXT-desktop 主界面。 - 用户在登录表单填写用户名和密码,EXTJS 发送异步请求到 Struts2 的 Action。 - Struts2 拦截器链...

    搭建简单的EXT-GWT(GXT)的开发环境(三)gxt结合spring和hibernate进行数据操作

    // 初始化时注入DAO public void setDao(AbstractSpringHibernateDao, ?&gt; dao) { this.dao = dao; } // 在这里调用DAO的方法来进行数据操作 } ``` 整合EXT-GWT、Spring和Hibernate的关键在于理解它们各自的...

    ext-3.0.jar+文档+配置文件

    通过这些文档,开发者可以学习如何初始化组件,理解组件的属性、方法和事件,以及如何自定义组件和布局。 "配置文件"可能涉及到EXT的配置设置,例如EXT应用的启动脚本、主题设置、本地化配置等。这些配置文件帮助...

    ext-2.0.2-aspx-only-aspx-examples

    2. **ASP.NET与JavaScript集成**: 学习如何在ASP.NET页面中嵌入和初始化ExtJS脚本,以及如何在服务器端和客户端之间传递数据。 3. **事件处理**: 理解如何在ExtJS组件上添加事件监听器,并在事件触发时执行相应的...

    创建ext-6.0.2demo

    2. **初始化项目**:使用Sencha Cmd工具来创建一个新的项目。在命令行中,导航到你希望存放项目的目录,然后运行`sencha generate app -classic MyDemoApp .`命令。这会生成一个名为"MyDemoApp"的基本应用结构,包含...

    Ext-JS框架中文文档

    - **表单初始化**: 设置表单的初始状态。 13. **表格组件——GridPanel** - **表格面板**: 一种高级的表格组件,支持分页、排序等功能。 - **列模型**: 定义表格中各列的配置。 #### 四、总结 通过上述内容,...

    Ext-DateTimeField

    1. 初始化DateTimeField时,设置适当的配置项,如格式化规则、默认值等。 2. 使用适当的事件监听器,以便在用户交互时进行必要的处理。 3. 考虑错误处理和用户反馈,当用户输入的数据无效时,提供清晰的错误提示。 4...

    Ext JS 4.2.6.1811主题classic

    4. **性能优化**:Ext JS 4.2.x版本在性能方面进行了改进,例如通过延迟加载机制减少初始化时的资源请求,以及对组件渲染的优化,提升了整体应用的运行效率。 5. **API稳定性**:作为维护版本,4.2.6修复了之前的...

    GWT-EXT2.0最佳实践教程,源代码打包供下载

    8. **性能优化**:学习GWT的代码分割、延迟加载等优化技巧,减少应用的初始化时间。 9. **测试与调试**:掌握GWT的单元测试框架GWT Test Case,以及如何使用开发者模式进行调试。 通过这个教程,你将能够提升对GWT...

    Ext教程ext2-Ext简易教程

    例如,Ext的`Ext.onReady`函数用于确保DOM加载完成后再执行代码,这是初始化Ext组件的常见方法。以下是一个简单的例子,展示如何使用MessageBox组件弹出一个警告对话框: ```html Ext.onReady(function() { Ext....

    ext-7.0.0-gpl.7z

    它提供了一系列预定义的UI组件,如表格、网格、表单、菜单、工具栏等,这些组件可以组合和自定义以满足各种应用需求。 4. **MVC架构**: ExtJS采用Model-View-Controller(MVC)模式,帮助组织和分离应用程序的...

    EXT异步提交FORM表单

    1. **初始化表单**:首先需要使用EXT创建一个表单对象,该对象将包含所有需要提交的字段。 ```javascript var form = new Ext.form.FormPanel({ id: 'myForm', url: 'yourActionUrl', method: 'POST', items...

    Ext 动态加载表单数据

    通过以上步骤,你可以实现动态加载Ext表单数据的功能。在实际应用中,可能还需要考虑错误处理、数据验证、动态更新等问题,但以上代码提供了一个基础的实现思路。不断学习和实践,你将能更好地掌握Ext JS在构建动态...

    Ext 添加功能form表单实例

    #### 表单初始化 在Ext中创建一个表单面板通常涉及到设置其基本属性,例如宽度、高度、布局方式等。在这个例子中,通过`new Ext.FormPanel`来创建了一个表单面板,并设置了一些关键属性: - `frame`: 设置为`true`...

    官方Ext3.0实例包

    1. 基于组件的架构:Ext3.0采用模块化设计,每个UI元素都是一个独立的组件,如面板、表格、表单等,方便复用和组合,提高了开发效率。 2. 强大的数据绑定:通过Data Package,Ext3.0支持与后台数据的双向绑定,能够...

    Ext-Fusionchart

    - **配置ExtJS**:在应用程序初始化时,设置ExtJS的基本配置,例如主题、样式表路径等。 - **创建图表组件**:利用FusionCharts XT的JavaScript API,创建一个图表对象,指定图表类型、数据源和配置选项。 - **...

    用ext来登录的程序代码

    - **表单初始化**: `Ext.QuickTips.init();` 启用了快速提示功能。 - **表单配置**: - `labelWidth`: 定义了表单标签的宽度。 - `baseCls`: 设置了基本的CSS类名。 - `defaults` 和 `defaultType`: 分别设置了...

    Jquery+ext

    例如,jQuery可以用来初始化EXT组件,或者在EXT组件加载完成后进行进一步的定制。 ```javascript // 使用jQuery加载EXT库 $(document).ready(function() { Ext.onReady(function() { // 在EXT页面加载完成后执行...

    ext2.2-API文档-jar-doc

    文档通常会涵盖类的定义、方法、属性、事件以及如何初始化和配置组件等重要内容。开发者可以从中学习如何利用EXT2.2的API来创建复杂的数据视图、布局、表单、图表等,以及如何处理用户交互和数据绑定。 总的来说,...

Global site tag (gtag.js) - Google Analytics