Ext Js入门第1篇-Ext环境搭建

来源：互联网发布：visual basic编程手机编辑：程序博客网时间：2024/06/05 02:07

Ext Js是一套全面的前端界面库，它不仅对JavaScript前端开发进行简化，而且提供了丰富的用户组件，适合企业应用前端开发

1.下载Ext Js,我使用的是4.4.1版本 Ext Js4.1.1下载

2.下面对Ext里面的文档做个介绍

docs:存放Ext Js的说明文档

examples:存放Ext Js示例

locale:存放Ext Js国际化javaScript库，比如ext-lang-zh_CN.js

resources:Ext Js运行的各种CSS资源，图片资源

src:存放Ext Js的各种资源文件

ext.js，ext-all.js，ext-all-dev.js等javaScript库，其中主要的是ext-all.js，是压缩过的Ext Js库

3.下面进行快速的入门

（1）.导入所需要的javaScript文件到html

<script type="text/javascript" src="../js/ext-all.js" ></script><script type="text/javascript" src="../js/bootstrap.js" ></script><script type="text/javascript" src="../js/ext-lang-zh_CN.js" ></script><script type="text/javascript" src="../js/jquery.js" ></script>

（2）导入所需要的样式CSS文件

<link rel="stylesheet" href="../css/ext-all.css" />

（3）好了，一切准备工作就绪了，开始一个小例子，感受一下ext js强大之处，这是我的代码，大家可以稍微修改

<html><head><meta charset="UTF-8"><script type="text/javascript" src="../js/ext-all.js" ></script><script type="text/javascript" src="../js/bootstrap.js" ></script><link rel="stylesheet" href="../css/ext-all.css" /><script type="text/javascript" src="../js/ext-lang-zh_CN.js" ></script><script type="text/javascript" src="../js/jquery.js" ></script><title></title></head><body><div id="removed">将要被删除的元素</div><div id="a" style="border: 1px solid black;height: 80px;">fkajva</div><div id="b" style="background: #faa;">最后添加的内容</div></body><script>    Ext.onReady(function()    {    //被删除的元素    Ext.fly("removed").remove();    //在id为a的元素前部添加    Ext.fly("a").insertFirst(    {    tag:"div",    html:"添加的内容",    style:"background-color:#faa;"    });        //将ID为b的元素追加到ID为a的元素中        Ext.fly('a').appendChild('b');    });</script></html>

阅读全文

0 0