没有合适的资源?快使用搜索试试~ 我知道了~
ExtJS是一套完整的RIA解决方案,也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现,对客户端机器性能也有一定的要求,即不支持IE6以下的版本。如果您的项目对网页响应时间有严格的限制,或者客户端操作系统过于陈旧,一定不要选择ExtJS。 本文主要是介绍ExtJS的下载和配置以及一些简单的使用方法。目前最新版本为3.0,但是本文主要介绍2.2版本。 一、ExtJS下载以及配置 1、下载地址:www.extjs.com/(这是官网,大家可以选择自己喜欢的版本下载) 2、配置过程,假设下载后的目录为Ext,我们在该目录下建立我们自己的目录MyExample(该
资源详情
资源评论
资源推荐
ExtJS 配置和表格控件使用第配置和表格控件使用第1/2页页
ExtJS是一套完整的RIA解决方案,也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现,对客户端机器性能也有一定的要求,即不支持IE6以下的版本。如
果您的项目对网页响应时间有严格的限制,或者客户端操作系统过于陈旧,一定不要选择ExtJS。
本文主要是介绍ExtJS的下载和配置以及一些简单的使用方法。目前最新版本为3.0,但是本文主要介绍2.2版本。
一、一、ExtJS下载以及配置下载以及配置
1、下载地址:www.extjs.com/(这是官网,大家可以选择自己喜欢的版本下载)
2、配置过程,假设下载后的目录为Ext,我们在该目录下建立我们自己的目录MyExample(该目录用于存放你自己写的代码),配置过程如下:
(1) 新建一个页面文件Helloworld.html
(2) 在<head>和</head>之间添加如下代码:
代码如下:
<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”>
Ext.onReady(function(){
Ext.MessageBox.alert(‘HelloWorld’,’Hello World’);
})
</script>
(3) 这里注意<script></script>不能用</script>取代
(4) js的导入顺序不要更改
(3) 如果弹出一个HelloWorld的对话框,则代表配置成功。
二、表格控件二、表格控件Grid的使用的使用
EXT中的表格功能非常强大,包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等使用功能。我们首先介绍如何制作一个简单的Grid。
1、创建表格的列信息:
代码如下:
var cm=new Ext.grid.ColumnModel([
{header:’编号’,dataIndex:’id’},
{header:’名称’,dataIndex:’name’},
{header:’描述’,dataIndex:’desn’}
]);
2、添加数据信息:
代码如下:
var data=[
[‘1′,’name1′,’desn1’],
[‘2′,’name1′,’desn1’],
[‘3′,’name1′,’desn1’],
[‘4′,’name1′,’desn1’],
[‘5′,’name1′,’desn1’]
];
3、创建数据存储对象:
代码如下:
var ds=new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:’id’},
{name:’name’},
{name:’desn’}
])
});
ds.load();//这个相当的重要
.
4、表格的列模型定义好了,原始数据和数据的转换也已经完成,剩下的只需要把它们装配在一起,我们的Grid就创建成功了。
代码如下:
var grid=new Ext.grid.GridPanel({
renderTo:”grid”,
store: ds,
height:600,
cm:cm
});
5、注意:Ext.grid.Grid的renderTo属性指示EXT将表格渲染到什么地方,所以,在HTML里应该有一个<div id=’grid’></div>与之对应。
6、所有代码清单如下(已通过测试):
代码如下:
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Grid.aspx.cs” Inherits=”Ext_example_Grid” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head id=”Head1″ runat=”server”>
<title>Grid </title>
<link rel=”stylesheet” type=”text/css” href=”../resources/css/ext-all.css” href=”resources/css/ext-all.css” />
<script type=”text/javascript” src=”../adapter/ext/ext-base.js” src=”adapter/ext/ext-base.js”></script>
<script type=”text/javascript” src=”../ext-all.js” src=”ext-all.js”></script>
<script type=”text/javascript”><!–
Ext.onReady(function(){
var cm=new Ext.grid.ColumnModel([
{header:’编号’,dataIndex:’id’},
{header:’名称’,dataIndex:’name’},
{header:’描述’,dataIndex:’desn’}
]);
var data=[
[‘1′,’name1′,’desn1’],
[‘2′,’name1′,’desn1’],
[‘3′,’name1′,’desn1’],
[‘4′,’name1′,’desn1’],
[‘5′,’name1′,’desn1’]
];
var ds=new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:’id’},
{name:’name’},
{name:’desn’}
weixin_38685876
- 粉丝: 4
- 资源: 927
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0