ExtJS学习之路第一步:对比jQuery,认识ExtJS

最近纷杂的事情比较多了,奔波ing!所以,Node.js 和Canvas动画系列都停止了,等稳定了再重拾书本继续学习!因为某种原因最近在看ExtJS,分享下学习的心得,希望对同道中人有所帮助。

第一用ExtJS的时候还是比较震撼的,这个颜色这些控件经常看到有没有?!先前用过Drupal,觉得二者有某种相似性,Container,Panel,Layout某些概念上,只不过Drupal是操作,ExtJS是代码。ExtJS,是开发RIA的利器,功能强大,非常简单的代码呈现的效果却复杂。对jQuery很熟,拿熟悉的东西来类比新的,容易上手。如果你跟我一样的想法,不妨跟着我的思路来认识认识。

一、如何配置ExtJS环境?

可以去官网看Getting Started 

翻译版本的ExtJS入门-http://extjs.io/blog/2012/06/19/extjs-4-getting-started/

配置开发ExtJS环境-http://www.cnblogs.com/youring2/archive/2013/01/25/2876439.html

二、如何看API

相对于jQuery每个属性和函数的面面俱到,ExtJS相对要节省点,需要花点时间测试下某某方法是不是就是这样用的呀之类~~

官网在线API 然后选择相应的版本

看懂ExtJS的API-http://www.cnblogs.com/youring2/archive/2013/03/05/2944004.html

或者是把刚才配置环境中下载的ExtJS文件放置到localhost中,直接访问http://localhost/ext-4.2.1-gpl/index.html

点击API Doc,本地查看文档。

三、让我们来看个小例子吧

我用的工具是Sublime Text2,截图FastStone Caputer--[测量距离的利器]

层级结构:

index.html

<!DOCTYPE html>
<html>
<head>
    <title>just a test</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" >
    <script type="text/javascript" src="extjs/ext-all-debug.js" ></script> 
    <script type="text/javascript" src="app.js"></script>     
</head>
<body>
<div id="myDiv" class="test">This is a test div.</div>
</body>
</html>

app.js

Ext.onReady(function() {  
    var myDiv = Ext.get(‘myDiv‘);
    myDiv.highlight(); 
});

效果就是myDiv高亮了一下!

Ext.onReady,是当需要的类和DOM都加载完毕开始执行函数。是否类似jQuery的$(function(){});

Ext.get(‘myDiv‘)类似$(‘#myDIv‘)或者document.getElementById?这样你是否熟悉了呢?

这是调用Loader对象的onReady方法,在Loader.js中可找到如下定义:

如何找到这个文件本地方法:ext-4.2.1-gpl\src\class

在线API搜索onReady,定位到Ext.Loader点击右边的Files.js

 onReady: function(fn, scope, withDomReady, options) {
            var oldFn;
            if (withDomReady !== false && Ext.onDocumentReady) {
                oldFn = fn;
                fn = function() {
                    Ext.onDocumentReady(oldFn, scope, options);
                };
            }
            fn.call(scope);
}

重点是最后一句,call(scope)!

比如

var tempFunction={
  scopeTest:function(){
   Ext.Msg.alert(‘Scope‘,‘Just a test!‘);
  }
};
Ext.onReady(function() {  
    var myDiv = Ext.get(‘myDiv‘);
    myDiv.highlight(); 
    this.scopeTest();
},tempFunction);

这个时候是会弹出消息框,标题Scope,内容Just a test!

如果说是用jQuery模拟弹出框,那是不是要用层,定位,之类的或者你引用个插件,但是Ext仅仅是一句话,神奇否?

补充一下,Loader.js 提示,可以在onReady之前加上

Ext.require(‘Ext.window.Window‘);
Ext.require(‘Ext.layout.container.Border‘);

这样就可以提前引用相关的类了,加载速度会快点哦!

怎么样?感觉是不是熟悉了点?

PS:参考文献,已经穿插在文中!非常感谢这些作者!

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。