Ted 谈 ExtJS 4.1 入门

最新推荐文章于 2024-09-22 11:17:00 发布

sp42a

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量5.5k

点赞数

分类专栏： Ext JS 文章标签： extjs javascript 语言 flex object literals

Ext JS 专栏收录该内容

50 篇文章 2 订阅

订阅专栏

Ted 谈 ExtJS 4.1 入门

First Thoughts Learning Ext JS 4.1

January 17, 2012 | Ted Patrick

http://www.sencha.com/blog/first-thoughts-on-ext-js/

翻译： Ext 中文网 ajaxjs.com / sp42 转载请保留本页信息

作为学习 Sencha 的新手，我希望把我学习 ExtJS 4.1的一点一滴过程分享出来。其实在我个人开发人员的职业生涯中，曾接触过不少的开发环境以及应用程序的各种框架与类库，于是我就会做一个横向的比较，拿过去的经验和现在面对着的作比较。总体来说，现在 Sencha 的框架都提供了比较完善的基础平台，让构建复杂的应用程序都比较直接方便，——这点使我觉得十分不错。

解释语言 Interpreted

必须提出，对于我来说，最不容易感觉习惯的就是，包括 ExtJS 框架在内的原生 JavaScript，都是解释性的语言。尽管我表示说，我不是对解释语言很陌生，但我初衷是，存在一个编译器，它能够提示“错误 errors /警告 warnings/标志 flags、语法自动完成、成员变量的强类型、返回值与参数”等等的信息。受到 Java 所带来的影响，边输入边出现自动完成或者提示错误，都是很有效率以及生产力的做法，而这些优点往往只是属于强类型的、编译型的语言而所有！工作中缺乏这些便利的环境与设施让 JavaScript 在 Web 技术发展中显得落伍。不过，随着我慢慢了解到解释语言的本质，我意识到我已经开始享受并沉醉其中：

JavaScript 的灵活性是一把双刃剑，语言的自由性很美好却充满着意想不到的陷阱，须以最佳的实践规避之；
现代浏览器已经提供相当不错的运行时提示。好比说 Chrome 的 Console 和 JavaScript调试器，简直没有它们了不行；
ExtJS 把 JavaScript 看作一门“元语言（metalanguage）”，目的就是为“OOP/MVC/Class/加载/多态”提供支持，这对于开发大型应用程序十分有益。而且这项特性在别的框架中不是很多见。允许扩展组件和采用 MVC 的模式将是对程序员来说十分友好的特性。
采用 JavaScript 对象和 JSON 的数据结构作为数据或组件的实例模型真是非常有效率。也就是说可以远程加载组件，变得十分简单了，即使是一个复杂的组件，将 xtype 赋予到那个 JavaScript 对象（object literals）就可以了。我现在经常注意的一个问题就是，要把代码格式化好，以避免生怕多个逗号，尤其在处理复杂的 object litreal 中。
我选用的 IDE 是 Eclipse VJET Plugin，对于 JavaScript 和 ExtJS 开发都是一款非常顺手的 IDE。不怕价比价，就怕货比货，这款 IDE 可以说在几个开源的 IDE 中自动提示最好的一个。

Ext JS “标准库” Ext JS “StandardLibrary”

ExtJS 本身提供一系列的辅助类和方法使得构建程序简单许多。学会 Ext.Array, Ext.Date,Ext.String,Ext.Object, Ext.Loader 来处理一些数据工作真的很简单。每个应用程序使用到的这些公共库的方法，例如：

Ext.require( [ 'widget.*' , 'layout.*' , 'Ext.data.*' ] );

Ext.Array.each( [ 1, 2, 3, 4 ], function( name ) {console.log( name );});

Ext.Object.getSize( { age:23 , height:6, name:"Ted" });  //3

容器 Containers

ExtJS提供非常多的容器候选使用（Ext.window.Window、Ext.panel.Panel、Ext.container.Container、Ext.grid.Panel，等等），也允许开发者内嵌地使用视图和复杂的应用程序逻辑。ExtJS 中容器布局行为都是可编程，可以在运行时中调整你的容器为“vbox”、“hbox”或者变为其他 Ext.layout.container 类型。另外你也可以动态地调整容器 flex 的配置项为某一数值。

Xtype

Xtype 是 ExtJS 中里面一个宽松的数据格式，就是可以通过一个简单对象去表示复杂的容器层次，并加以控制。十分简单也十分实用，解决掉了许多 UI 组件的问题。我以前搞过 Flex 和 Android，都是用 XML 组件化的形式，但因为同编译器工作流耦合得很紧，实例化和布局组件也十分麻烦。而在解释性系统中，这不复存在，马上就可以动态调整的了，甚至远程加载也变得十分简单。 Xtype 其实就是一个 JavaScript 对象（Object Literal），JavaScript 引擎解析本来就是一点也不费劲。无论在移动端还是桌面端都是十分快速。虽然你也可以一般方式的实例化那对象，不过采用 xtype 的方式真是好处多多。下面是由三个 xtypes 组成的一个数组：

[ { xtype: 'container', html:'First Item', flex:1 } ,

{ xtype: 'splitter' } ,

{ xtype: 'container', html:'Second Item', flex:1,maintainFlex:true } ]

把这数组分配到容器的 item配置项身上，就会渲染几块区域的视图。个人觉得还是简单和优雅，——您说呢？

样式 Styling

我曾在不同的框架中搞过组件样式的问题。ExtJS 把样式方面的问题抽象出来，完全置于 CSS 中去处理，十分强大的说。采用 SASS/Compass 源码的方式来生成 CSS 的一大好处是修改容易。在 Flex 或者 Android 中，就相应缺乏这种手灵活段，它是在编译时写死的。解释语言就是有解释语言这点的好处。简单修改 ExtJS 的基调颜色不算困难，但是深入样式的话，学习好 CSS 还有很长的路要走。

Hello Sencha

这是我在 Sencha.com 的第一篇博文，我想还是尽量要贴一贴简单的例子为好，下面这个例子是创建包含有一张图片的窗体。直接在写字板中贴上下面代码然后在浏览器打开即可。

<!DOCTYPE html>

<html>

  <head>

    <title>Hello Sencha</title>

    <!--styles-->

    <link rel="stylesheet"type="text/css"href="http://cdn.sencha.io/extjs/4.1.0.b1/resources/css/ext-all.css">

    <!--extjs 4.0.2-->

    <scripttype="text/javascript"src="http://cdn.sencha.io/extjs/4.1.0.b1/ext-all.js"></script>

    <!--app-->

    <script type="text/javascript">

      //define the application

     Ext.application({

       launch: function() {

         //create a window

         var win = Ext.create( 'Ext.window.Window' , {

           title: 'Hello Sencha',

           height: 285,

           width: 250,

           layout: 'fit',

           //add an image to the window by an xtype object

           items: {

             xtype: 'image',

             src:'http://www.sencha.com/files/blog/old/blog/wp-content/uploads/2010/06/sencha-logo.png'

           },

           listeners:{

             beforehide: function( com, owner, opt ){

               alert('hiding win');

             }

           }

         });

         //show the window

         win.show();

       }

      });

    </script>

  </head>

  <body></body>

</html>

我会继续记录学习 ExtJS 和 Touch 的旅程。还要学习很多的东西，不一而足，但是如果可以分享到给大家，那么真是最好不过的了。