extjs4. 0 简单布署

最新推荐文章于 2024-09-12 18:02:32 发布

love_love

最新推荐文章于 2024-09-12 18:02:32 发布

阅读量722

点赞数

分类专栏： java 文章标签： extjs myeclipse stylesheet application html structure

本文链接：https://blog.csdn.net/woxinfeixian93/article/details/6608799

版权

java 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

     本人系菜鸟一个,写下此篇只为了记录下自己学习的过程.也为刚步入extjs 4.0的网友,做个铺垫!

     刚准备在网上找些二手资料来,学习,结果网上找了半天,也没有找到相关的资料,最后没办法,自己去官网读在线文档

http://docs.sencha.com/ext-js/4-0/#/api/Ext    欢迎大家多参考   http://www.sencha.com/

(其实大家也可以不用这样做)

   在官网上,提供自己的email 把sdk 下载下来! 然后把文件直接复制到tomcat 下的webapps

通过

http://localhost:8080/extjs/docs/index.html 找到 getting start 教你如何配置一个类似计算机最常见的 hello word

Getting Started with Ext JS 4.0

1.1 Web Browsers

1.2 Web Server

1.3. Ext JS 4 SDK

(上面这些我就不带大家去看 api 了,自己慢慢看,我英文也差)

2. Application Structure

现面讲正题

在myeclipse 下新建一个 web project .

在新建 webroot 下新建 index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>index.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="./extjs/ext-debug.js"></script>
    <script type="text/javascript" src="./extjs/ext-all.js"></script>
    <script type="text/javascript" src="./extjs/app.js"></script>

</head>

<body>
    This is my HTML page. <br>
</body>
</html>

新建一个folder extjs 把要用到的 js和css 放到里面去

extjs/resources/css/ext-all.css contains all styling information needed for the whole framework
extjs/ext-debug.js contains a minimal set of Ext JS 4 Core library classes
app.js will contain your application code

主要就这几个.

app.js 写上api 上指定的内容

Ext.application( {
name :'extjs4.0',
launch : function() {
  Ext.create('Ext.container.Viewport', {
   layout :'fit',
   items : [ {
    title :'Hello Ext',
    html :'Hello! Welcome to Ext JS.'
   } ]
  });
}
});

注意在引用js 时 src 路径的写法就可以了 ,同时注意 api 上 name :'extjs4.0',     extjs4.0这里写的项目名

ok 效果是这样的!