`
shaohan126448
  • 浏览: 115825 次
  • 来自: 北京
社区版块
存档分类
最新评论

第 1 章 闪烁吧!看看extjs那些美丽的例子。

阅读更多

.1. 一切从extjs发布包开始

 

非常幸运的是,我们可以免费去extjs.com下载ext发布包,里边源代码,api文档,例子一应俱全。不过要是想访问svn获得最新的代码,就要花钱了。不过我们现阶段只要这个免费的发布包就可以了,通过里边的范例,可以让我们体验一下ext的风范。

下载地址:http://www.extjs.com/download。到写文档的此时此刻,咱们可以选择ext-1.1.1或者是ext-2.0下载。明显可以看出来ext-2.0的版本高,12月4日终于正式发布了,尚未经过详细测试,所以不敢说什么。下面我们把两个版本都介绍一点儿。

1.2. 看看ext-1.1.1的文档

 

docs目录下是api文档,基本上所有的函数,配置,事件都可以在里边找到,直接打开index.html就可以查看,左侧菜单还包含了对examples目录下例子的引用,不过有些例子需要使用json与后台做数据交换,必须放到服务器上才能看到效果。还有一些后台代码是使用php编写的,如果想看这些例子的效果,还需要配置php运行环境。

如果你用java,而且jdk在1.5以上,不如直接装个resin-3方便,它可以跑php呢。

1.3. 看看ext-2.0的文档

 

api文档依然在docs目录下,虽然可以看到左边的菜单,但是点击之后,右侧的api页面都是靠ajax获得的,所以不能直接在本地查看了,你必须把整个解压缩后的目录放到服务器上,通过浏览器访问服务器,才能看到。

问为什么docs打不开,只能看到一直loading的兄弟,都是因为没把这些东西放到服务器上的原因。

2.0中的api文档中没有例子的链接了,你需要自己去examples目录下找你需要的例子,然后打开看,当然还是有一些例子需要放在服务器上才能看到效果。

1.4. 为什么有的例子必须放在服务器上才能看到效果?

 

因为有些例子里,用到Ajax去后台读取数据,如果没在服务器上,Ajax返回的状态一直是失败,也无法获得任何数据,所有就看不到正确的效果。不过以前在extjs.com论坛上看到过有人写了localXHR,可以让ajax从本地文件系统获得数据,这样也许就可以摆脱服务器的束缚了。

1.5. 为什么自己按照例子写的代码,显示出来总找不到图片

 

ext里经常用一个空白图片做占位符号,然后用css里配置的背景图片做显示,这样有利于更换主题。这个空白图片的名字就是Ext.BLANK_IMAGE_URL,默认情况下它的值是BLANK_IMAGE_URL : "http:/"+"/extjs.com/s.gif"。虽然图片很小,也要去网上下载,一旦下载失败就显示找不到图片了。

看到这里可能有人奇怪了,为什么examples下的例子没有找不到图片的问题呢?看来你没有仔细看例子那些代码呢,每个例子都引用了../examples.js。在examples.js里设置了Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';。所以要解决自己写的例子找不到图片的问题,只需要照examples.js里修改s.gif的本地路径就可以了。很简单吧?

1.6. 我们还需要什么?

 
  1. 介于本人对firefox的喜爱,以及firebug在调试js过程中的便利,隆重向您推荐firefox+firebug的开发组合。再说了ext开发者也都是倾向于firefox开发的,所以一般都是在firefox上跑的好好的,放到ie上就出问题。这也跟ie自身的问题有些关系,可是目前ie占据90%的浏览器市场,最后我们还是需要让自己的项目在ie上跑起来,所以要求我们能写出跨浏览器的js来。

    firebug的好处在于,可以显示动态生成的dom,你甚至可以在firebug里直接对dom进行修改,而这些修改会直接反应到显示上。太厉害了

    firebug提供的console,可以直接执行js脚本,配置console.debug,console.info,console.error等日志方法更便于跟踪。

    对于ajax发送接收的数据,firebug都可以显示出来,并且可以查看发送的参数,以及返回的状态和信息。

1.7. 入门之前,都看helloworld。

 

为了照顾连最基本应用都跑不起来的同志,我们给出两个入门版helloworld范例,并结合讲解,领你入门呢。

1.7.1. 直接使用下载的发布包

 
  1. 先去http://www.extjs.com/download下载zip格式的发布包

  2. 随便解压缩到什么目录下,不管目录名是什么,最后应该看到里边是这样的目录结构。

  3. 现在我们利用它的目录结构,写一个helloworld例子。

    进入上图中的examples目录,新建一个helloworld目录,helloworld目录下新建一个helloworld.html文件,将下列内容复制进index.html文件中。

    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="../examples.js"></script>
    
    <script>
    Ext.onReady(function(){
        Ext.MessageBox.alert('helloworld', 'Hello World.');
    });
    </script>
  4. 双击helloworld.html打开页面,效果如下:

很高兴的告诉您,咱们的helloworld范例已经正确的执行了,下一步你最好把examples目录下的例子都看一看,再看看里边的代码怎么写的,好好感受一下ext的风范,再继续下去。

1.7.2. 只把必要的东西放进项目中

 

想把ext放入自己的项目,需要自己整理一下,因为发布包里的东西并非都是必要的,比如文档,比如例子,比如源代码。

必要的最小集合是这样:ext-all.js,adapter/ext/ext-base.js,build/locale/ext-lang-zh_CN.js和整个resources目录。

  1. ext-all.js,adapter/ext/ext-base.js就包含了ext的所有功能,所有的js脚本都在这里了。

  2. build/locale/ext-lang-zh_CN.js是中文翻译。

  3. resources目录下是css样式表和图片。

自己的项目里只需要包含这些东西,就可以使用ext了。使用时,在页面中导入:

<link rel="stylesheet" type="text/css" href="${放置ext的目录}/resources/css/ext-all.css" />
<script type="text/javascript" src="${放置ext的目录}/ext-base.js"></script>
<script type="text/javascript" src="${放置ext的目录}/ext-all.js"></script>
<script type="text/javascript" src="${放置ext的目录}/ext-lang-zh_CN.js"></script>

请注意js脚本的导入顺序,其他的就可以自由发挥了。

 

PS:语言项包可以采用这种方式导入,注意里面的语言包先转码成UTF-8或者GBK

<script type="text/javascript">

var lan = window.navigator.systemLanguage;
document.write("<script language=\"javascript\" src=\"ext/locale/ext-lang-"+lan+".js\"><\/script>");

</script>

分享到:
评论

相关推荐

    EXT2.0 简明教程!(chm)

    看看extjs那些美丽的例子。 第 2 章 震撼吧!让你知道ext表格控件的厉害。 第 3 章 歌颂吧!只为了树也要学ext。 第 4 章 祝福吧!把表单和输入控件都改成ext的样式。 第 5 章 雀跃吧!超脱了一切的...

    ExtJS入门.rar

    第 1 章闪烁吧!看看extjs那些美丽的例子。 1.1. 一切从extjs发布包开始 非常幸运的是,我们可以免费去extjs.com下载ext发布包,里边源代码,api文档,例子一应俱 全。不过要是想访问svn获得最新的代码,就要花钱...

    Extjs例子Extjs例子

    Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子

    图文并茂的Ext JS教程

    闪烁吧!看看extjs那些美丽的例子。 震撼吧!让你知道ext表格控件的厉害。 ›

    Ext简明教程

    第 1 章 闪烁吧!看看extjs那些美丽的例子。 第 2 章 震撼吧!让你知道ext表格控件的厉害。 第 3 章 歌颂吧!只为了树也要学ext。 第 4 章 祝福吧!把表单和输入控件都改成ext的样式。 。。。。

    Extjs3.1例子源代码

    Extjs3.1例子源代码Extjs3.1例子源代码Extjs3.1例子源代码vv

    Extjs4.1 小例子(适合extjs初学者学习使用)

    标题中的"Extjs4.1 小例子"意味着这个压缩包包含了一些基础的示例代码,旨在帮助初学者快速入门。通过这些小例子,你可以了解如何使用ExtJS 4.1来创建用户界面,包括布局管理、组件系统、数据绑定、事件处理等核心...

    Extjs Extjs4.2.1 例子

    Extjs Extjs4.2.1 入门小例子 test1.jsp test2.jsp test3.jsp

    extjs官方例子

    extjs官方例子

    EXTJS扩展例子集

    因此,这个"EXTJS扩展例子集"对于那些希望深入EXTJS开发或者需要解决特定问题的开发者来说,是一个宝贵的资源库。通过研究源代码,我们可以学习到EXTJS的最佳实践,同时也能为自己的项目找到灵感和解决方案。

    extjs小例子

    标题"EXTJS小例子"可能是指一个包含EXTJS基本使用示例的项目,帮助初学者理解EXTJS的工作原理和基本用法。这个项目可能包含了一些简单的EXTJS代码片段,演示了如何创建和配置EXTJS组件,以及如何组织和布局页面。 ...

    初学extjs的小例子

    这里面有三个extjs的小例子,其中testb.html和testc.html所实现的效果是一样的,只不过testb.html里面的控件全是用extjs创建的,而testc.html是extjs与jsp的结合。例子很简单,主要记录自己每天的成长经历!

    ExtJs4 详细、讲解例子

    ExtJs4 详细、讲解例子,网上搜索的一些例子,拉下来的

    ExtJs完整例子ext+dwr

    ExtJs完整例子ext+dwr,希望能给需要地兄弟提供帮助

    Extjs4的TreeGrid例子

    在"Extjs4的TreeGrid例子"这个主题中,我们将深入探讨TreeGrid的各种特性,以及如何在实际项目中应用这些示例。 1. **多语言支持**:描述中提到的"多语言"功能在ExtJS 4中通常通过i18n(国际化)实现。开发人员可以...

    extjs简单例子

    这个“extjs简单例子”教程集合,显然旨在帮助初学者快速上手并理解ExtJS的基本概念和功能。下面,我们将详细探讨这些文件所涵盖的知识点。 1. **《TutorialIntroduction to Ext 2.0 (Chinese)》** 这个文档可能...

    extjs的例子

    这个是一个测试的etcjs例子,让人能简单的看懂怎么使用extjs的框架

    Java ExtJs小例子

    Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子

    extJs源代码及例子

    extJs源码以及很多例子,供初学者学习

    EXT 教程

    看看extjs那些美丽的例子。_files 第 2 章 震撼吧!让你知道ext表格控件的厉害。_files 第 3 章 歌颂吧!只为了树也要学ext。_files ………… 第 8 章 哭泣吧!现在才开始讲基础问题。.htm

Global site tag (gtag.js) - Google Analytics