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

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()来弹出消息用以调试，在遇到循环输出需要跟踪每次循环的变化的时候，请问你们是不是一直左手大拇指敲空格呢？可怜下键盘吧，它是程序员的朋友。