`
caleb_520
  • 浏览: 250787 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

利用Ext组件完成Form和Grid之间的数据传输

    博客分类:
  • Ajax
阅读更多
四川国信安教育百杰培训:http://www.gxaedu.com/newsinfo.jsp?newsid=89
1、Ext介绍
最近几年Web2.0发展也非常盛行,其Web 2.0中的Ajax技术也是日趋成熟。而且也诞生了许多Ajax框架,如:ExtJs、JQuery、Dojo等等。他们在各个软件开发领域都各自地发挥自己的特长,在这就简单的介绍一下ExtJs框架。
ExtJs是一个很不错的Ajax框架,它可以用来提供非常华丽的Web客服端应用,使得我们的b/s应用更加具有活力与生命力。在实际的应用中,ExtJs框架可以用在.Net、Java、PHP等各种开发语言当中........
2、Ext技术
下面给大家举几个由ExtJs技术实现的截图,这些都是来自于官方网站(http://www.extjs.com)实际例子。
具有导航功能的Window窗口,如截图1-1

ExtJs开发的Blog订阅器管理应用,截图1-2



Ext中通过布局管理完成的界面搭建



3、利用Ext组件完成Form和Grid之间的数据传输
这里我们来介绍一下利用JSP+ExtJs完成的Form和Grid之间的数据传输。首先看看截图1-4



从图1-4我们给大家介绍一下该功能。首先,通过ExtJs中的组件Grid将要用的数据读取到Grid表格当中。其次,当鼠标点击Grid表格中一行记录,就在右边将数据填充到ExtJs的另一个组件Form表单中。最后,我们就可以在Form表单中做修改、删除、清空等操作。

下面我们就给出详细代码
(1)建一个form.js文件,这个文件主要是写ExtJs代码
/*
* title:表单复杂应用-9
* desc:该表单应用综合Form和Grid之间的数据传输应用之一
* author:administrator
* date:2009-10-09
*/

Ext.onReady(function() {
	Ext.QuickTips.init();
	
	Ext.form.Field.prototype.msgTarget = "side";
	
	//初始化数据
	var data = [
		['1', '全兴', '酒类', '1992-09-09'],
		['2', '骄子', '烟类', '2009-08-07'],
		['3', '美好', '食品类', '2009-08-06'],
		['4', '奇多', '食品类', '2009-06-07'],
		['5', '百事可乐', '饮料类', '2009-03-24'],
		['6', '泸州老窖', '酒类', '2009-02-25']
	];
	
	var cm = new Ext.grid.ColumnModel([
		{header: '编号', dataIndex: 'id', sortable: true},//设置列可以排序
		{header: '名称', dataIndex: 'name'},
		{header: '种类', dataIndex: 'desc'},
		{header: '生产日期', dataIndex: 'date', type: 'date', renderer: Ext.util.Format.dateRenderer('Y年m月d日')}
	]);
	
	var store = new Ext.data.Store({
		proxy: new Ext.data.MemoryProxy(data),
		reader: new Ext.data.ArrayReader({},[
			{name: 'id'},
			{name: 'name'},
			{name: 'desc'},
			{name: 'date', type: 'date', dateFormat: 'Y-m-d'}
		])
	});
	store.load();
	
	var form = new Ext.form.FormPanel({
		id: 'things',
		title: 'Form和Grid之间的数据传输',
		labelAlign: 'right',
		width: 800,
		layout: 'column',
		frame: 'true',
		items: [{
			columnWidth: 0.6,
			layout: 'fit',
			items: [{
				xtype: 'grid',
				store: store,
				cm: cm,
				autoHeight: true,
				border: false,
				title: 'Grid表格中的数据',
				sm: new Ext.grid.RowSelectionModel({
					singleSelect: true,
					listeners: {
						rowselect: function (sm, row, rec) {
							Ext.getCmp("things").getForm().loadRecord(rec);
						}
					}
				}),
				listeners: {
					render: function(g) {
						g.getSelectionModel().selectRow(0);
					},
					delay: 10
				},
				viewConfig: {
					forceFit: true
				}
			}]
		},{
			columnWidth: 0.4,
			defaultType: 'textfield',
            autoHeight: true,
            labelWidth: 90,
            buttonAlign: 'center',
            xtype: 'fieldset',
            defaults: {width: 140},
            title: 'Grid表格中的数据对应到From表单中',
            items: [{
            	fieldLabel: '编号',
            	name: 'id',
            	readOnly: true
            },{
            	fieldLabel: '名称',
            	name: 'name'
            },{
            	fieldLabel: '种类',
            	name: 'desc'
            },{
            	xtype: 'datefield',
            	fieldLabel: '生产日期',
            	name: 'date',
            	format: 'Y年m月d日'
            }],
            buttons: [{
            	text: '修改'
            },{
            	text: '删除'
            },{
            	text: '清空',
            	handler: function() {
            		form.getForm().reset();
            	}
            }]
		}],
		renderTo: 'form'
	});


(2)创建form.jsp文件,这文件主要是加载ExtJs相关的核心文件和刚刚创建的form.js文件。

<%@ page language="java" pageEncoding="gb2312"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>FormPanel加入到Window窗口中的应用</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
	<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../ext-all.js"></script>
	<script type="text/javascript" src="../build/locale/ext-lang-zh_CN.js"></script>
	<script type="text/javascript" src="form.js"></script>
  </head>
  
  <body>
  </body>
</html>

按照上面的步骤就可以完成截图1-4的效果。
  • 大小: 30.7 KB
  • 大小: 23.4 KB
  • 大小: 14.3 KB
  • 大小: 16.5 KB
分享到:
评论

相关推荐

    深入浅出Ext_JS:数据存储与传输

    在数据传输过程中,Ext JS提供了Ajax请求(Ext.Ajax)和Direct(Ext.direct)两种主要方式。Ajax请求用于与服务器进行异步通信,支持GET、POST、PUT、DELETE等多种HTTP方法,可以发送JSON、XML等格式的数据。Direct...

    Ext 3.0 中文文档.zip

    五、Form:Ext的Form组件提供了丰富的表单元素和验证机制,支持多种输入类型和布局。表单可以绑定到Model,实现数据的双向绑定。FormPanel是容器组件,可以包含多个Field和其他组件,如CheckBox、ComboBox等。表单...

    Ext深入浅出 数据传输

    12.9 在Grid和Form之间进行数据交互......... 337 12.10 本章小结.............................................. 338 第13 章 通过Ext Framework 合理地 应用EXT...................................................

    EXT 聊天程序

    EXT聊天程序可能利用EXT的组件模型,如Grid、Panel、Form等,来实现聊天窗口、联系人列表、消息发送等功能。 EXT库的核心特点包括: 1. **组件化设计**:EXT采用组件化开发模式,每个UI元素都是一个独立的组件,...

    用ext写的前台源码 有说明文档

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,常用于在服务器和客户端之间传输数据。在这个"用ext写的前台源码 有说明文档"的压缩包中,你将找到使用ExtJS框架开发的前端代码,以及相关的JSON...

    ext简单的增删改查

    - JSON:数据交换格式,EXTJS和SQLServer之间通常使用JSON进行数据传输。 - MVC模式:Model-View-Controller,EXTJS的设计模式,分离业务逻辑、数据模型和用户界面。 这个项目对于初学者来说是一个很好的实践,它...

    ext教程

    - **Data**: 提供数据处理的功能,包括数据绑定、数据传输等。 - **Widget**: 包含各种小部件(Widgets),如按钮、标签等,用于构建用户界面。 - **Form**: 提供表单控件和验证功能。 - **Grid**: 最具特色的一部分...

    一个Struts2+Ext实现增删改查的实例

    6. **数据传输**:在前后端之间,数据通常是通过JSON格式进行传输的。Struts2 Action可以通过返回一个包含学生列表的Java对象,并使用JSON插件将其转换为JSON格式,供ExtJS的Store解析。 7. **交互逻辑**:ExtJS的...

    ext-1.0源码+部分中文解读

    同时,它使用JSON(JavaScript Object Notation)作为数据交换格式,提高了数据传输效率和解析速度。 7. **表单和验证** EXT-1.0提供了强大的表单组件和验证功能。开发者可以轻松创建包含多种输入类型的表单,并...

    EXT最强最实用入门实例

    Proxy负责在Store和服务器之间传输数据,支持Ajax、JSONP等多种数据源。 2. 表示层:这部分主要包括各种UI组件,如Grid、Form、Panel等。EXTJS提供了丰富的组件库,允许开发者创建各种复杂的布局和视图。例如,Grid...

    一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理(4) 源代码

    在开发过程中,确保前后端之间的接口清晰,数据传输格式统一(如JSON),以及错误处理机制完善,是保证系统稳定运行的关键。此外,良好的代码组织和注释也能帮助后续的维护和升级。 通过这个教程,读者应能掌握如何...

    Ext.data专题

    **Ext.data** 是一个重要的JavaScript库组件,用于处理数据传输和管理。它定义了一系列的核心概念,包括 **Store**、**Reader** 和 **Proxy**,这些都是Ext.data的核心组成部分。通过这些概念,开发者能够轻松地管理...

    仿XP管理系统EXT版

    在EXT框架下,系统可能使用EXT Grid Panel展示数据,EXT Form处理表单输入,EXT Toolbar提供操作按钮,EXT Window用于弹出式对话框,EXT Tree Panel则可以用于展示层级结构的信息。此外,EXT的Ajax组件可用于异步...

    ext-2.0.2-aspx-only-aspx-examples

    1. **ExtJS 2.0.2 API**: 了解该版本提供的所有类、方法和配置选项,如Ext.Component、Ext.Panel、Ext.grid.GridPanel等。 2. **ASP.NET与JavaScript集成**: 学习如何在ASP.NET页面中嵌入和初始化ExtJS脚本,以及...

    精通JS脚本之ExtJS框架.part1.rar

    本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...

    使用Sencha ExtJS和Sencha Cmd开发RIA程序.pdf

    Sencha ExtJS中还包含了一些常用的组件,如Ext.grid.Panel(网格面板)用于创建交互式的表格数据视图,Ext.tree.Panel(树面板)用于展示层级数据,Ext.form.Panel(表单面板)用于构建用户输入表单,以及Ext.tab....

    精通JS脚本之ExtJS框架.part2.rar

    本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...

    ext ssh demo

    为了实现这些功能,开发者可能使用了ExtJS提供的各种组件,如Grid(表格)、Form(表单)、Panel(面板)等,并利用Ajax技术与后端进行异步通信。后端可能使用Java的SSH库,如JSch或Apache SSHD,来处理SSH连接和...

    ExtjS实现聊天功能

    1. **用户界面**:ExtJS提供了多种组件,如`Ext.container.Viewport`用于全屏布局,`Ext.window.Window`用于创建弹出窗口,`Ext.panel.Panel`用于创建面板,以及`Ext.form.field.Text`和`Ext.form.field.TextArea`...

Global site tag (gtag.js) - Google Analytics