四川国信安教育百杰培训: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提供了Ajax请求(Ext.Ajax)和Direct(Ext.direct)两种主要方式。Ajax请求用于与服务器进行异步通信,支持GET、POST、PUT、DELETE等多种HTTP方法,可以发送JSON、XML等格式的数据。Direct...
五、Form:Ext的Form组件提供了丰富的表单元素和验证机制,支持多种输入类型和布局。表单可以绑定到Model,实现数据的双向绑定。FormPanel是容器组件,可以包含多个Field和其他组件,如CheckBox、ComboBox等。表单...
12.9 在Grid和Form之间进行数据交互......... 337 12.10 本章小结.............................................. 338 第13 章 通过Ext Framework 合理地 应用EXT...................................................
EXT聊天程序可能利用EXT的组件模型,如Grid、Panel、Form等,来实现聊天窗口、联系人列表、消息发送等功能。 EXT库的核心特点包括: 1. **组件化设计**:EXT采用组件化开发模式,每个UI元素都是一个独立的组件,...
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,常用于在服务器和客户端之间传输数据。在这个"用ext写的前台源码 有说明文档"的压缩包中,你将找到使用ExtJS框架开发的前端代码,以及相关的JSON...
- JSON:数据交换格式,EXTJS和SQLServer之间通常使用JSON进行数据传输。 - MVC模式:Model-View-Controller,EXTJS的设计模式,分离业务逻辑、数据模型和用户界面。 这个项目对于初学者来说是一个很好的实践,它...
- **Data**: 提供数据处理的功能,包括数据绑定、数据传输等。 - **Widget**: 包含各种小部件(Widgets),如按钮、标签等,用于构建用户界面。 - **Form**: 提供表单控件和验证功能。 - **Grid**: 最具特色的一部分...
6. **数据传输**:在前后端之间,数据通常是通过JSON格式进行传输的。Struts2 Action可以通过返回一个包含学生列表的Java对象,并使用JSON插件将其转换为JSON格式,供ExtJS的Store解析。 7. **交互逻辑**:ExtJS的...
同时,它使用JSON(JavaScript Object Notation)作为数据交换格式,提高了数据传输效率和解析速度。 7. **表单和验证** EXT-1.0提供了强大的表单组件和验证功能。开发者可以轻松创建包含多种输入类型的表单,并...
Proxy负责在Store和服务器之间传输数据,支持Ajax、JSONP等多种数据源。 2. 表示层:这部分主要包括各种UI组件,如Grid、Form、Panel等。EXTJS提供了丰富的组件库,允许开发者创建各种复杂的布局和视图。例如,Grid...
在开发过程中,确保前后端之间的接口清晰,数据传输格式统一(如JSON),以及错误处理机制完善,是保证系统稳定运行的关键。此外,良好的代码组织和注释也能帮助后续的维护和升级。 通过这个教程,读者应能掌握如何...
**Ext.data** 是一个重要的JavaScript库组件,用于处理数据传输和管理。它定义了一系列的核心概念,包括 **Store**、**Reader** 和 **Proxy**,这些都是Ext.data的核心组成部分。通过这些概念,开发者能够轻松地管理...
在EXT框架下,系统可能使用EXT Grid Panel展示数据,EXT Form处理表单输入,EXT Toolbar提供操作按钮,EXT Window用于弹出式对话框,EXT Tree Panel则可以用于展示层级结构的信息。此外,EXT的Ajax组件可用于异步...
1. **ExtJS 2.0.2 API**: 了解该版本提供的所有类、方法和配置选项,如Ext.Component、Ext.Panel、Ext.grid.GridPanel等。 2. **ASP.NET与JavaScript集成**: 学习如何在ASP.NET页面中嵌入和初始化ExtJS脚本,以及...
本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
Sencha ExtJS中还包含了一些常用的组件,如Ext.grid.Panel(网格面板)用于创建交互式的表格数据视图,Ext.tree.Panel(树面板)用于展示层级数据,Ext.form.Panel(表单面板)用于构建用户输入表单,以及Ext.tab....
本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
为了实现这些功能,开发者可能使用了ExtJS提供的各种组件,如Grid(表格)、Form(表单)、Panel(面板)等,并利用Ajax技术与后端进行异步通信。后端可能使用Java的SSH库,如JSch或Apache SSHD,来处理SSH连接和...
1. **用户界面**:ExtJS提供了多种组件,如`Ext.container.Viewport`用于全屏布局,`Ext.window.Window`用于创建弹出窗口,`Ext.panel.Panel`用于创建面板,以及`Ext.form.field.Text`和`Ext.form.field.TextArea`...