请务必先了解上一篇《extjs的文件目录结构简介》,在了解extjs4的目录结构后,再来阅读本文。
本文只针对刚开始使用extjs4的小白,大神请自行绕道。
当我们决定使用extjs4的时候,肯定首先面对的第一个问题是应该引入哪些文件(当然你得先下载)。
简单的说,3个文件:
1.ext-all.js
2.ext-lang-zh_CN.js
3.ext-all.css
<%@ page language="java" pageEncoding="GBK"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%-- 应用名称 --%> <c:set var="APP_HOME" value="${pageContext.request.contextPath}"></c:set> <%-- extjs所在的主目录 --%> <c:set var="EXTJS_HOME" value="${APP_HOME}/sys/ui/extjs/extjs-4.2.1"></c:set> <%-- extjs4所需的js文件(包括核心,控件等) --%> <script type="text/javascript" src="${EXTJS_HOME}/ext-all.js"></script> <%-- extjs4所需的本地语言js文件(使用简体中文) 注:该文件使用的中文编码为UTF-8,故这里需要加上charset=UTF-8, 否则有可能会和用户自定义页面编码(比如GBK)起冲突,产生乱码 --%> <script type="text/javascript" src="${EXTJS_HOME}/locale/ext-lang-zh_CN.js" charset="UTF-8"></script> <%-- extjs4所需的css文件 --%> <link rel="stylesheet" type="text/css" href="${EXTJS_HOME}/resources/css/ext-all.css">
第一个文件,不用多说,extjs的核心,控件等都包括在ext-all.js其中了,必须引的;第二个文件,我相信大家都是中国人吧,这个文件用来支持当地语言环境的,举个简单例子,日期控件的翻译(再次提醒请务必在引入文件时加上charset="UTF-8");第三个文件样式文件,你自己喜欢什么主题就换成它的css,举例,4新的主题neptune,想要就直接引入
<link rel="stylesheet" type="text/css" href="${EXTJS_HOME}/resources/css/ext-all-neptune.css">