Ted 谈 ExtJS 4.1 入门-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

Ted 谈 ExtJS 4.1 入门

简介: 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的一点一滴过程分享出来。

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 的旅程。还要学习很多的东西,不一而足,但是如果可以分享到给大家,那么真是最好不过的了。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章