简单的表格显示，ext的面向对象思想。在表格中有很好的体现，在menu中更为明显
测试文件：
grid.html
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ext2.1 表格实例</title>
<link type="text/css" rel="stylesheet" href="../_js/resources/css/ext-all.css" />
<script src="../_js/ext-base.js"></script>
<script src="../_js/ext-all.js"></script>
<script src="../_js/ext-lang-zh_CN.js"></script>
<script src="grid.js"></script>
</head>
<body>
<div id="grid">
</div>
</body>
</html>
grid.js：
// JavaScript Document
//cm:ColumnModel表格的列模型
Ext.onReady(function(){
Ext.QuickTips.init();
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',sortable=true},//按照id排序
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
var data = [
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name6','descn5']
];
var ds = new Ext.data.Store({
proxy : new Ext.data.MemoryProxy(data),
reader : new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'descn'}
])
});
/*
为了解决Store中的reader的name和grid中的cm的列值的对应问题，可以使用map
var ds = new Ext.data.Store({
proxy : new Ext.data.MemoryProxy(data),
reader : new Ext.dataArrayReader({},[
{name:'id',mapping:0},
{name:'name',mapping:1},
{name:'descn',mapping:2}
])
});
*/
ds.load();
var grid = new Ext.grid.GridPanel({
el : 'grid',
ds : ds,
cm : cm
});
grid.render();
});
分享到：
相关推荐
Ext新手强烈推荐，里面包括一些各种表格的例子
让你知道ext表格控件的厉害。 2.1. 功能丰富，无人能出其右 2.2. 让我们搞一个grid出来耍耍吧。 2.3. 上边那个是1.x的，2.0稍微有些不同哦 2.4. 按顺序，咱们先要把常见功能讲到 2.4.1. 自主决定每列的宽度 2.4.2. ...
让你知道ext表格控件的厉害。 2.1. 功能丰富，无人能出其右 2.2. 让我们搞一个grid出来耍耍吧。 2.3. 上边那个是1.x的，2.0稍微有些不同哦 2.4. 按顺序，咱们先要把常见功能讲到 2.4.1. 自主决定每列的宽度 ...
让你知道ext表格控件的厉害。 2.1. 功能丰富，无人能出其右 2.2. 让我们搞一个grid出来耍耍吧。 2.3. grid默认自带的功能 2.4. 按顺序，咱们先要把常见功能讲到 2.4.1. 自主决定每列的宽度 2.4.2. 让grid支持按列...
2.1 需求分析 27 2.2 系统设计 28 2.3 功能结构图 29 2.4 开发与运行环境 31 2.5 数据库设计 31 2.6 本章小结 34 第3章 Ext Core实例—.NET语言实现 35 3.1 创建应用并设置开发环境 35 3.2 自定义Membership提供程序...
ExtJS2.1教程Tree_树控件_。ExtJS_配置和表格控件使用。Extjs入门培训教程。Extjs最经典的学习教程。ext布局。ext几个实例。EXT开发指南。EXT树简介。JavaScript使用手册。很多的extjs教程，你6分下载这个压缩包很值...
2.1 获取ext js 4 / 34 2.2 配置使用ext js库 / 35 2.3 编写“hello world”程序 / 37 2.4 关于ext.onready / 38 2.5 关于ext.blank_image_url / 40 2.6 关于字体 / 42 2.7 ext js 4语法 / 42 2.8 本地化 / ...
本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
2.1 EXT的事件和类 11 2.1.1 自定义事件 11 2.1.2 浏览器事件 13 2.1.3 Ext.lib.Event 13 2.1.4 Ext.util.Observable 14 2.1.5 Ext.EventManager 17 2.1.6 Ext.EventObject 19 2.2 EXT的核心组件 20 2.2.1 ...
让你知道ext表格控件的厉害。 2.1. 功能丰富，无人能出其右 2.2. 让我们搞一个grid出来耍耍吧。 2.3. 上边那个是1.x的，2.0稍微有些不同哦 2.4. 按顺序，咱们先要把常见功能讲到，让grid支持按列排序 2.5. 让...
本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
6.14 Ext.KeyMap提供更灵活强大的对按键的处理方法 6.14.1 构造函数 6.14.2 给对象添加键盘绑定 6.14.3 废弃已绑定到KeyMap的配置 6.14.4 将KeyMap或废弃的配置重新生效 6.14.5 获取当前KeyMap配置是否为有效 ...
……8 2.1 Ext类库简介………………………………………………………………………………………………….……..8 2.2 ExtJS的组件………………………………………………………………………………………………...
common.jar jboss-jmx.jar jboss-system.jar jacc-1_0-fr.jar jgroups-2.2.8.jar oscache-2.1.jar proxool-0.8.3.jar swarmcache-1.0rc2.jar classes12.jar spring.jar ...
互动效果 2.1 Accordion 折叠菜单所需要的文件: ui.accordion.js jquery.dimensions.js 用法： $(document).ready(function(){ $("#example").accordion(); }); CSS文件：...
2.1 Accordion 折叠菜单 所需要的文件: ui.accordion.js jquery.dimensions.js 用法： $(document).ready(function(){ $("#example").accordion(); }); CSS文件：...
2.1 Accordion 折叠菜单 所需要的文件: ui.accordion.js jquery.dimensions.js 用法： $(document).ready(function(){ $("#example").accordion(); }); CSS文件：...