深入浅出 Ext js 笔记

第一章  Ext概述

一、Ext 目录结构：

　　adapter：核心代码和底层库

　　examples：官网的演示

　　docs：API文档

　　pkgs：是EXT压缩后的代码

　　resources：ext要用到的图片和样式文件

　　scr：未压缩过的ext文件

　　ext-all.js：ext核对心库，必须引入　　　　ext-all-debug.js：是ext-all.js的调试版，调用这个文件夹才能正确的定位出现错误的位置

　　INCLUDE_ORDER.txt：引用库层库javascript文件的顺序

 

二、配置文件加载

<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />

<script src="../adapter/ext/ext-base.js" type="text/javascript"></script>　　// 基础文件

<script src="../ext-all.js" type="text/javascript"></script>　　　　　　　　　　// ext框架文件

 

第二章  框架基础

一、EXT中的事件分为两种类型：自定义事件和浏览器事件，

 

 

第三章  表格控件

　　功能包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能

　　表格由类Ext.grid.GridPanel定义，

　　一、列的定义叫ColumnModel，负责创建表的列信息

　　包括：

　　1、header：首部显示文本　　2、dataIndex：列对应的记录集　　3、sortable：列是否可排序　　

　　4、renderer：列的渲染　　   5、width：宽度　　 6、format：格式化

<div id="grid"></div>

// 定义表列信息

var cm = new Ext.grid.ColumnModel([
　　{header:"编号", dataIndex:"id"},
　　{header:"名称", dataIndex:"name"},
　　{header:"描述", dataIndex:"descn"}
]);

// 定义表格中数据

var data = [　　　　
　　["1", 'name1', 'descn1'],
　　["2", 'name2', 'descn2'],
　　["3", 'name3', 'descn3'],
　　["4", 'name4', 'descn4'],
　　["5", 'name5', 'descn5']
]

var store = new Ext.data.Store({
　　proxy: new Ext.data.MemoryProxy(data),
　　reader: new Ext.data.ArrayReader({}, [
　　　　{name: 'id'},
　　　　{name: 'name'},
　　　　{name: 'descn'}
　　])
});
store.load();

var grid = new Ext.grid.GridPanel({
　　autoHeight: true,
　　renderTo: 'grid',
　　store: store,
　　cm: cm
});