Extjs第一课

最新推荐文章于 2021-01-14 14:19:59 发布

原创最新推荐文章于 2021-01-14 14:19:59 发布 · 445 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #stylesheet #ext #function #jsp #resources

Extjs学习专栏收录该内容

0 篇文章

订阅专栏

Extjs第一课

我们在第一节课中，我们就开始讲到的是类库文件，在第一节课中我们第一个接触到的便是这个Extjs.onReady了。我们下面来看一下这个jsp文件时怎么写的。

是这样的我们首先说一下我们在这里用的是Extjs4.0的类库

我们开始用一下这个Extjs里面都是什么东西

adapter：负责将里面提供第三方底层库（包括Ext 自带的底层库）映射为Ext 所支持

的底层库。

build：压缩后的ext 全部源码(里面分类存放)。

docs： API 帮助文档。

exmaples：提供使用ExtJs 技术做出的小实例。

resources：Ext UI 资源文件目录，如CSS、图片文件都存放在这里面。

source：无压缩Ext 全部的源码(里面分类存放) 遵从Lesser GNU （LGPL）开源的

协议。

Ext-all.js：压缩后的Ext 全部源码。

ext-all-debug.js：无压缩的Ext 全部的源码(用于调试)。

ext-core.js：压缩后的Ext 的核心组件，包括sources/core 下的所有类。

ext-core-debug.js：无压缩Ext 的核心组件，包括sources/core 下的所有类。

这就是我们解压出来的都是什么东西，

我们在来看一下我们这个第一个的jsp文件是怎么写的。

<%@ page language="java"import="java.util.*" pageEncoding="ISO-8859-1"%>

String path =request.getContextPath();

String basePath =request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN">

<html>

<head>

<title>My JSP 'index.jsp' starting page</title>

<!--

-->

</head>

<body>

Ext.onReady(function(){

Ext.MessageBox.alert("hello easy is extjs");

});

</script>

</body>

</html>

下面我们来解释一下：

其中呢？顺序是不能改变的，这就是在引入这个js的类库。我们再来看一下这个函数<script type="text/javascript">

Ext.onReady(function(){

Ext.MessageBox.alert("hello easy is extjs");

});

</script>

这里是这样的，在ExtJS 库文件及页面内容加载完后，ExtJS 会执行Ext.onReady 中指定的函数，因此可以用，一般情况下每一个用户的ExtJS 应用都是从Ext.onReady 开始的，所以我们当加载的时候我们就开始显示一个字符串，当然了，我们也可以用alert（“hello world”）；

其中的函数使用了一个匿名函数，当然我们也可以写成一个函数：

<script>

function fn()

{

alert(‘ExtJS库已加载!’);

}

Ext.onReady(function ()

{

alert(‘ExtJS库已加载!’);

}

);

其实这样也是可以用的。其中Ext是这个Extjs中的一个关键字！剩下的东西我们在慢慢的讲来！