Extjs4循序渐进(一)——开始Ext

  前言

  做前端开发也很长时间了,从写基本的JS到JQ,从easyui、jq-ui等简单的UI插件到自己写插件也经历过不少。目前因项目需要,要用到Extjs做前端,于是用了最新的4.0.7版本。虽然以前也接触过Extjs,但在一段时间的开发过程中依旧感觉到各种无力,特别是在Extjs4.X版本改动较大的情况下,很多东西已经不能只靠百度去寻找了(找到也没用)。在网上关于Extjs4.X的东西少之又少,要么就仅限于官方的那几个demo。在同事和朋友的怂恿下,小弟不才愿意将开发过程中所学到的,用到的,一一记录下来,跟大家一起分享。同时也希望通过博客园能吸引到大牛,帮助小生解决一下一些头疼的问题。

声明:文中有部分资料是来源与网上查找,若是有转载声明则本人会注明,若没有,则是无法获知来源。本人不接受任何形式的跨省。

  国际惯例先获取开发包

         首先在http://www.sencha.com/products/extjs/download/页面,点击“download for Ext JS 4.0.7”下载ext开发包。

         下载后解压,乱78遭的东西忒多了,大概的解释下:

  • builds目录是Extjs压缩后的代码,体积更小,加载更快。
  • docs是Extjs的文档,包括Ext的Api,必备工具。
  • example是官方的示例,学习就从研究这里面的代码开始。
  • locale是多国语言包,ext-lang-zh_CN.js是简体中文。(在项目中如果觉得开发包臃肿,可以把除了zh-cn外的都删除)
  • overview是Extjs功能描述。
  • pkgs是Extjs各部分功能的打包文件。
  • resource是Extjs中要用到的图片和样式表。
  • src目录是未压缩的源代码目录。
  • bootstrap.js是ExtJS库的引导文件, 通过参数可以自动切换ext-all.js和ext-all-debug.js。
  • ext-all.js文件是ExtJS的核心库,是必须要引入的。
  • ext-all-debug.js文件是ext-all.js的调试版。

  新特性

既然要用新的版本,那必然有用新版本的意义。Extjs4.X的版本为我们提供了什么新的便利呢?

 

1 动态加载和类定义

Extjs4.0引入了Ext.define方法,可以通过类的字符串名定义和继承类,这就避免了由于类不存在而报错。类管理器会自动检查类之间的依赖关系。示例:

Ext.define('MyDataModel',{
        extend: 'Ext.data.Model',
        fields:[
                {name: 'id', type: 'string'},
                {name: 'name',  type: 'string'},
                {name: 'email',  type: 'string'},
                {name: 'phone',  type: 'string'}
               ]
});

以上代码声明了一个叫'MyDataModel'的类,他继承了Ext.data.Model。如何调用呢,再看下面代码: 

var myStore = Ext.create('Ext.data.Store', {
    model: 'MyDataModel',
    proxy: {
        type: 'ajax',
        url : 'data.xml',
        reader: {
            type: 'json',
            root: 'data'
        }
    }
});

myStore我们可以理解为一个数据的存储器,以上的代码可以理解为“从data.xml这个路径获取了json形式的数据,数据的根节点为'data'”。

大家应该可以看出来了,Model就像是定义了一个空表,Store为这个空表填充了数据。具体的使用,会在Grid的章节中讲到。

 

2 强大的图表和图形

具体的就不述说了,可以在example/charts这个路径下看到很多demo。常用的柱状图,饼状图,波形图,甚至还有三维图形都有。简单的截一张图:

顺便值得一体的是,如果部分图形或者其他demo看不到或报错的话,请用IIS建一个虚拟目录,将demo都放进虚拟目录中去。

 

  不一样的HelloWorld

  好吧我实在是不想写HelloWorld,但经过各种批评教育后,我表示深深的反省,HelloWorld是程序员的灵魂啊,赞美HelloWorld。

  首先引用JS:

<link rel="stylesheet" type="text/css" href="../ext-4.0.7/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-4.0.7/bootstrap.js"></script>
<script type="text/javascript" src="../ext-4.0.7/locale/ext-lang-zh_CN.js"></script>

bootstrap.js会自行引用ext-all.js文件。接下来贴JS代码: 

<script type="text/javascript">
         Ext.onReady(function(){
                   Ext.MessageBox.alert("Hello World","Hello World!")
         });
</script>

效果图: 

 有神马不一样的?没坑爹,不一样的在下面。申明一个json对象:

var config={
           title:'HelloWorld',
           msg:'确实有点不一样的HelloWorld'
  };

然后将这段替换刚刚的alert()方法:

Ext.MessageBox.show(config);

运行后看到结果的同学请鼓掌。 

  聪明的同学或许已经想到了,json是常用的数据传输手段,而Extjs支持json配置的方式,那么前台只需要放几句简单的代码,就可以通过ajax的方式用后台代码控制前台的页面输出的内容。关于该应用的强大我们会在后面慢慢的体现。

 报错肿么办?

最后教给大家一些调试的方法,前端调试最犀利的莫过于firefox的firebug,必备利器。

众所周知,JS调试是一件恶心到爆的事情,常常因为漏写一个符号、写错字母导致无法运行,而报错信息又让人无法正确定位错误原因,特别是用JQ,Ext等库,调试起来更是让人欲哭无泪。以下是我故意写错后IE报错:

我页面上根本没有什么buttons,完全无法理解这是什么错误。

再用firebug打开,选中“控制台”: 

错误很明确了,位置也知道了。 

没错,我在页面上乱打了个ccc,依赖于ext-all-debug.js将错误输出到了控制面板上,我很轻易的找到了错误。回想一下你在几千行代码中找错误时抓狂的心情吧,表示能够肉眼找出来的朋友肯定是“大家来找茬”的高手。

     顺便值得一说的是,firebug控制台也可以自定义一些调试,代码:

console.log("输出在控制台");

运行后你会在控制台找到输出的内容: 

以前相信很多朋友都是用alert()来弹出消息用以调试,在遇到循环输出需要跟踪每次循环的变化的时候,请问你们是不是一直左手大拇指敲空格呢?可怜下键盘吧,它是程序员的朋友。

 

  小结

本人文笔有限,内容也没有什么大局观,只是站在程序猿的角度上写了些小技巧。从下个章节开始会以项目中的实例来讲述Ext各个组件的使用以及与后台的结合应用(主要是MVC框架的后台)。有错误欢迎指正。

 

PS:顶一下汤姆大叔的深入理解JS系列,您是偶像~

posted @ 2012-04-18 17:10  艾尼路  阅读(11689)  评论(17编辑  收藏  举报