`
=死神=
  • 浏览: 58121 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext——异步加载表单

    博客分类:
  • Ext
阅读更多

Ext代码如下

<script>
	Ext.onReady(function(){
		Ext.QuickTips.init();//开启表单提示
		Ext.form.Field.prototype.msgTarget='side';//设置提示信息位置为边上
		var simple = new Ext.FormPanel({//初始化表单面板
			labelWidth:75,//默认标签宽度
			buttonAlign:'left',//按钮左对齐
			frame:true,//设置表单面板,false为无面板
			title:'我的表单',
			bodyStyle:'padding:5px 5px 0',
			width:350,
			defaults:{width:230},
			waitMsgTarget:true,//加载提示
			defaultType:'textfield',//默认字段类型
			reader:new Ext.data.XmlReader({//设置数据来源为xml
				record:'contact',//XML数据dom结点
				success:'@success'//加载成功后不作处理
			},[
				'name',
				'email'//取得XML节点数据填充到表单对应字段
			]),
			
			items:([{
				fieldLabel:'帐户',
				name:'name'
			},{
				fieldLabel:'e-mail',
				name:'email'
			}]),
			
			buttons:[{
				text:'加载',
				handler:function(){
					simple.form.load({url:'form_info.xml',waitMsg:'Loading'})//加载XML数据文件('form_info.xml)
				}
			}]
		});
	simple.render('show');//添加到指定区域(添加到一个div中)
	});   
</script>

 

Xml数据代码

<?xml version="1.0" encoding="UTF-8"?>
<response success="true">
	<contact><!--对应record : 'contact',其中包含所需的数据-->
		<name>leehui1983</name><!--字段-->
		<email>nicho-li@163.com</email><!--字段-->
	</contact>
</response>

 

 

分享到:
评论

相关推荐

    JavaScript凌厉开发——Ext JS3详解与实践

    《JavaScript凌厉开发——Ext JS3详解与实践》是一本深度探讨JavaScript库Ext JS3的专著,旨在帮助开发者深入理解和高效运用这一强大的前端框架。本文将围绕标题、描述及标签,详细介绍Ext JS3的核心概念、关键特性...

    EXT技术在Web界面设计与实现中的应用研究.pdf

    - **动态加载和异步请求**:利用Ajax技术,EXT可以实现在不刷新整个页面的情况下加载新内容或发送请求至服务器,这种非阻塞的方式显著提升了用户体验。 - **交互式表单验证**:通过EXT提供的表单组件,可以在客户端...

    Ext-JS框架中文文档

    - **Ext.onReady事件**: 该事件确保所有DOM元素加载完成后才执行指定的脚本。 - **让界面动起来**: 利用ExtJS提供的动画效果增强用户体验。 4. **元素操作与模板** - **Ext.DomHelper类**: 提供了方便的操作DOM...

    Coolite.Ext.net.dll

    在ASP.NET开发领域,酷力(Coolite)提供了一款强大的工具——Coolite.Ext.Net.dll,它是一个专为快速构建富AJAX(Asynchronous JavaScript and XML)功能的Web应用程序而设计的库。该库的核心目标是简化开发者的...

    ExtDesigner for extjs3.0使用帮助文档.pdf

    - **Complex Scenarios**:处理复杂的用户交互逻辑,如表单验证、异步加载数据等。 **1.7 Additional Information** 除了上述核心功能外,Ext-Designer还提供了许多其他有用的功能: - **Customization**:允许...

    Ext中文文档

    - **Ext.onReady事件**:讲解了如何使用Ext.onReady事件来确保页面加载完成后再执行脚本,避免错误。 - **让界面动起来**:介绍了如何使用ExtJS的动画效果,使界面更加生动有趣。 - **Ext.Fx类与Ext.Element类中的...

    Extjs中文教程

    - 可以使用Ajax异步提交表单数据,也可以通过传统的表单提交方式。 - 在后端处理表单数据时需要考虑安全性和有效性验证。 #### 十五、更多表单组件 - **您能说出哪些表单组件呢?** - 表单组件种类繁多,如...

    Extjs学习带注释

    - **Ext.Ajax 类**:掌握如何使用 Ext.Ajax 类来处理异步请求。 #### 十二、分页与 ComboBox - **分页技术**:学习如何在 Extjs 中实现分页功能,提高大型数据集的处理效率。 #### 十三、面板(Panel) - **...

    轻松搞定ExtJS.pdf

    - **Ajax**: 异步通信技术,用于在不重新加载整个页面的情况下更新部分网页内容。 - **Ext.Ajax类**: 提供了发送Ajax请求的方法。 #### 12. 分页与ComboBox - **分页**: 对大量数据进行分批显示的技术。 - **实现**...

    轻松搞定Extjs

    - **Ext.Panel类**: 详细介绍了一种常用的面板类型——`Panel`,以及其配置选项和使用方法。 #### Panel的子类——Window窗口 窗口是面板的一种特殊形式,可以独立弹出显示。 - **概述**: 简要介绍了窗口的基本...

    Extjs中文教程2.x

    - **类**: `Ext.form.FormPanel` 类提供表单的功能。 **14.2 提交** - **方法**: 使用 `submit()` 方法将表单数据提交到服务器。 **14.3 验证** - **功能**: 支持客户端验证和服务器端验证。 - **示例**: `...

    ExtJs中文教程

    - 异步JavaScript和XML,用于实现网页的部分刷新。 2. **Ext.Ajax类** - ExtJs中处理Ajax请求的主要工具。 3. **Ajax文件上传** - 介绍如何使用Ext.Ajax上传文件。 #### 十二、分页与ComboBox 1. **分页原理** ...

    jsr2控件——快速组建WEB前台应用的UI控件包

    作为一款轻量级的控件库,JSR2在性能方面做了不少优化,如延迟加载、异步处理等,减少了页面的初始化时间和资源消耗,提升了网页的加载速度和整体性能。 5. **社区支持和更新** 国内开发者编写的JSR2,意味着它更...

    extjs2.2和2.3的官方包

    这个压缩包包含两个主要版本——ExtJS 2.2和2.3,这两个版本都是ExtJS发展史上的重要里程碑。 **ExtJS 2.2** ExtJS 2.2是该框架的一个早期版本,它提供了许多基础的UI组件,如表格、树形视图、表单、面板、菜单等。...

    商品房销售管理系统 extjs的

    通过ExtJS的Ajax组件,系统能与服务器进行异步通信,实现无刷新的数据加载和更新。同时,ExtJS的Store组件负责管理本地数据和远程数据源的交互,确保数据的动态加载和缓存。 6. 响应式设计: 考虑到多设备访问的...

Global site tag (gtag.js) - Google Analytics