ExtJs 学习笔记

 

一、环境构建

拷贝以下文档到项目WebRoot相应文件夹下，并按照下面的顺序进行加载到页面中。

1、\rescources\css\ext_all.css                整个文件夹

2、\adapter\ext\ext_base.js           整个文件夹

3、ext_all.js

4、创建自己的JS文件

 

二、基本类及方法说明

1、Ext.onReady(回调函数)             //页面加载后自动执行该方法中的回调函数

2、EXT.Panel                               //面板类

3、EXT.Panel.render()                       //面板渲染方法

4、EXT.ViewPort                                 //框架类（根据相应的布局格式进行调用显示）

 

三、页面中表格显示的主要组成架构

--Grid                           表格显示类

----Store             数据信息存储类

----ColumnModel               列信息类

 

页面中数据列表显示框架：

GridPanle表格显示类，其中包括的属性有         cm|colModel   表头信息

                                               columns            列信息

                                               store                  数据存储器

注：其中cm或colModel含有相同，cm是colModel的简写；cm与columns作用相同二者选其一使用即可。

 

（重点）

页面表格显示原理：

 

 

Store的作用是把数据data对应到要显示的fields表格列上

Cm的作用是把要显示的表格列fields对应到要显示列的名称cm上

Grid的作用是把显示的列名称cm与要显示的数据store封装在一起

 

四、常用功能说明

1、列中数值文转换

在colModle中使用renderer（回调函数）进行值转换

2、增加复选框列

在GridPanle和colModle中同时增加sm：new Ext.grid.checkBoxSelectionModle()可实现全部选中与取消

3、去掉列头下拉列表

在GridPanle或colModle中添加enableHdMenu：true/false

4、实现排序功能

在GridPanle或colModle中添加sortable：true/false

5、列头下拉列表中英文转中文

ZaiGridPanle中添加viewConfig：（columnsText：”显示/隐藏列”,

                                                                   sortAscText：”正序”,

                                                                   sortDescText：”倒序”

     ）