ExtJS 4.2.1 学习（一） helloworld

最新推荐文章于 2018-08-16 02:47:06 发布

原创最新推荐文章于 2018-08-16 02:47:06 发布 · 597 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ExtJS4 #helloworld #extjs #ext4 #中文乱码

2015年1月同时被 2 个专栏收录

6 篇文章

订阅专栏

ExtJS 4.2.1 学习与开发

3 篇文章

订阅专栏

本文介绍如何将ExtJS框架集成到Eclipse开发环境中，并通过示例演示如何创建一个简单的ExtJS程序，包括设置项目结构、引入必要的文件及实现基本功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、导入ext到eclipse

新建一个OnlineExtjs的Dynamic Web Project，然后在WebContent中新建一个extjs(名字自定)的文件夹，把解压后的ext文件中的locale文件夹，resources文件夹和根目录的ext-all.js 文件导入或复制到eclipse中刚刚新建的extjs文件夹中，如图1。

图1

二、写引入代码

在WebContent中新建一个jsp文件，使用eclipse提供的模板，这样可以节省时间。如图2，图3。

在新建的jsp中，写引入ext代码。ext4的引入代码和之前的引入代码不一样。

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">   //引入样式。必须有
    <script type="text/javascript" src="extjs/bootstrap.js" ></script>              //这个可以没有
    <script type="text/javascript"  src="extjs\ext-all.js"></script>                 //资源文件 ，必须有
    <script type="text/javascript" src="extjs/locale/ext-lang-zh_CN.js"></script>   //中文支持，

把上面这段代码加入head或者body都行，然后就算是引入ext了，如图4。接下来的代码都可以使用ext。

图2图3

图4

三、写HelloWorld

下面是函数体，

       Ext.onReady(function(){
            Ext.MessageBox.alert("你好","这是我的EXT！This is myfirst ExtJS");

});

把这段函数插入前面的引入代码后面就行。

这段代码中，Ext.onReady是Ext.Loader.onReady的别名，Ext.Loader是Ext JS 4+动态加载新依赖的核心。添加新的侦听器执行时所需的所有脚本完全加载。

onReady的定义如下：

onReady( Object fn, Object scope, Object options )

  Parameters：
  fn : Function ，要执行的回调函数
  scope : Object ，(this)回调函数的执行范围
  options : Object ，document dom就绪无论如何要等待document dom就绪

执行之后，结果如图5

OK，到此，一个ext的程序就运行成功了。

注意，在执行的过程中可能会出现中文乱码，我就遇到过各种乱码，有的是js的乱码，有的是ext的乱码，但是这些乱码都可以通过百度解决，我在这里就不复制其他人的成果了。

附上我的完整代码：

<%@ page language="java"  import="java.util.*" contentType="text/html; charset=GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>ExtJS</title>
<pre name="code" class="plain">    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">  
    <script type="text/javascript" src="extjs/bootstrap.js" ></script>  
    <script type="text/javascript"  src="extjs\ext-all.js"></script> 
    <script type="text/javascript" src="extjs/locale/ext-lang-zh_CN.js"></script>

</head>

<body>
<script type="text/javascript">
 Ext.onReady(function(){
            Ext.MessageBox.alert("你好","这是我的EXT！This is myfirst ExtJS");
       });
</script>
</body>
</html>