ExtJS 使用点滴 八 常用的ExtJs类库引用简介

 

 

说明:以下默认Extjs类库存放在JS/Extjs3.1.1文件夹中

 

一、       Exjts类库

 

1.         Extjs需要引用的JS文件 （Extjs基本类库）

 

<script src="/JS/Extjs3.1.1/adapter/ext/ext-base.js" type="text/javascript"></script>

 

<script src="/JS/Extjs3.1.1/ext-all.js" type="text/javascript"></script>

 

 

2.         Extjs需要引用的CSS文件
(Extjs基本样式)

 

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

 

 

 

由于换肤的存在，现改为默认引用： 

 

<link href="/JS/Extjs3.1.1/resources/css/skin-blue.css" rel="stylesheet"
type="text/css" 
id="GS_Skin"/>

 

其中：里面整合了ux/PanelResizer.js 的以下样式，故在添加ux/PanelResizer.js后无需再添加PanelResizer.css

 

<link href="../JS/Extjs3.1.1/ux/css/PanelResizer.css" rel="stylesheet"
type="text/css"
/>

 

 

同时：id="GS_Skin" 也是为了换肤Cookie缓存所用

 

 

3.         必须引用的通用类库

 

<script src="/JS/GSCommon/GSCommon.js" type="text/javascript"></script>

 

 

4.         英译中 涉及到MessageBox
、分页、LoadMask、验证都需要加该引用

 

<script src="/JS/Extjs3.1.1/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>

 

 

5.         基本操作前的图标（ 如：新增、编辑、删除、刷新等）须添加该样式

 

<link href="/Images/iconCls.css" rel="stylesheet"
type="text/css"
/>

 

 

6.         涉及到欲将HTML渲染成Exjs的样式，需引用此样式

 

<link rel="stylesheet" rev="stylesheet"
href="/css/form.css" type="text/css" />

 

 

7.         分页带进度条需添加此引用

 

<script src="/JS/Extjs3.1.1/ux/ProgressBarPager.js" type="text/javascript"></script>

 

 

8.         Extjs.Grid高度可伸展需添加此引用

 

<script src="/JS/Extjs3.1.1/ux/PanelResizer.js" type="text/javascript"></script>

 

<link href="../JS/Extjs3.1.1/ux/css/PanelResizer.css" rel="stylesheet"
type="text/css"
/>

 

其中：PanelResizer.css 已经整合到skin-blue.css，故无需引用

 

 

9.         动态调整分页大小需添加该引用

 

<script src="../JS/Extjs3.1.1/ux/PageComboResizer.js" type="text/javascript"></script>

 

 

10.     下拉列表带树结构选项的需添加该引用

 

<script src="../JS/Extjs3.1.1/ux/CheckTreeCombo.js" type="text/javascript"></script>

 

 

                  

 

 

11.     使用Extjs内置的文件上传

 

<script src="../JS/Extjs3.1.1/ux/fileuploadfield/FileUploadField.js"
type="text/javascript"></script>

 

<link href="../JS/Extjs3.1.1/ux/fileuploadfield/css/fileuploadfield.css"
rel="stylesheet" type="text/css" />

 

12.     Extjs.Grid使用带CheckBox列 需添加该引用

 

<script src="/JS/Extjs3.1.1/ux/CheckColumn.js" type="text/javascript"></script>

 

 

13.     使用Exjs
客户端分页（非后台服务器端分页），需添加该引用

 

<script src="/JS/Extjs3.1.1/ux/PagingMemoryProxy.js" type="text/javascript"></script>

 

 

14.     Extjs.Tree
前带CheckBox
需要添加改引用

 

<script src="../JS/Extjs3.1.1/ux/TreeCheckNodeUI.js" type="text/javascript"></script>

 

 

15.     下拉导航菜单需要用到的js   zc扩展

 

<script type="text/javascript" language="javascript"
src="/js/jsCommon.js"></script>

 

16.     只有框架Top 才用的CSS，功能程序无需添加该引用

 

<link rel="stylesheet" rev="stylesheet"
href="/css/base.css" type="text/css" />

 

<link rel="stylesheet" rev="stylesheet"
href="css/main.css" type="text/css" />

 

<link rel="stylesheet" rev="stylesheet"
href="css/skin_blue.css" type="text/css" />

 

 

 

 

 

二、       JQuery类库

 

17.     Jquery需要引用的类库（以下为精简版js）

 

<script src="../JS/jquery-1.3.2.min.js" type="text/javascript"></script>

 

 

18.     Jquery需要引用的类库（完成版，包含Jquery方法只能提示）

 

<script src="../JS/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

 

 

19.     基于Jquery写的智能搜索（zjw已经做了部分扩展）

 

<script src="../JS/jquery.autocomplete.js" type="text/javascript"></script>