金笛子第88期

extjs5.0入门教程

【Jobeen】

本文仅对Ext JS进行一简单说明,下文将提供一"Hello world"事例.

Hello World

创建一Ext JS项目非常简单,创建一个index.html文件,然后引入ExtJs相关的Javascript和CSS,本文从ExtJs的CDN服务器引用了相关文件.

<!DOCTYPE html>
<html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>Welcome to Ext JS!</title>
       <link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext/gpl/5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
       <script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/5.0.0/build/ext-all.js"></script>   
        <script type ="text/javascript" src="app.js"></script>
    </head>
    <body></body>
</html>

其它Javascript库,像Jquery,AngularJs在使用时一般和HTML标签混用,ExtJs使用了别一种方法,你仅仅使用Javascript和ExtJs内部类,即可完成Web应用程序的开发.下面代码片段即可创建一个Panel.

Ext.create('Ext.Panel', {
     renderTo     : Ext.getBody(),
     width        : 200,
     height       : 150,
     bodyPadding  : 5,
     title        : 'Hello World',
     html         : 'Hello <b>World</b>...'
 });

我们把上面代码保存到app.js文件中,仅仅这么做,可能会创建失败,因为ExtJs框架加载完成后才能使用相应的类.为了避免这个错误可以使用launch()事件函数,此函数将在框架加载完成后被触发.

我们将上面代码放到Ext.application的launch()函数中.
最终的app.js如下所示:

Ext.application({
    name   : 'MyApp',
    launch : function() {
       Ext.create('Ext.Panel', {
            renderTo     : Ext.getBody(),
            width        : 200,
            height       : 150,
            bodyPadding  : 5,
            title        : 'Hello World',
            html         : 'Hello <b>World</b>...'
        });
    }
});

用浏览器打开index.html,你将看到如下页面:

这个示例仅仅教你怎样开始使用ExtJs,你可以查看更多ExtJs官方示例,那里有更多示例,及说明.

ext-all.js

你应该已经注意到Hello world示例中引入了ext-all.js和ext-theme-neptune.css两个CDN文件,这两个文件包含了整个ExtJs框架.这种方法仅适用于学习或实验性质.在发布的产品中,你可能仅需要部分功能,或某些功能使用时再加载.这就需要把ExtJs分隔成多个包含独立功能的小文件.
对于如何创建ExtJs应用,官方还推荐了Sencha Cmd . 功能非常强大,你可以去ExtJs官方开发向导查看更多内容.

下文将对ExtJs做一简单剖析.

类与对象

ExtJs应用使用面向对象的思想开发,两个最关键的东西就是类与对象,每个对象是类的一个实例.

让我们创建另一个示例演示ExtJs的类系统,我们仍然使用index.html和app.js来讨论
我们可以创建一个自己的类,

Ext.define('MyApp.MyPanel', {
    extend : 'Ext.Panel',
    title  : 'Hello World',
    html   : 'Hello <b>World</b>...'
});

使用上述代码,我们创建了一个新类"MyPanel",此类扩展了Panel,然后我们可以以此类为模板,创建MyPanel的实例.

可能你需要两个Panel,两个Panel只有文字不同.我们仅仅需要创建两个实例并赋于不同的文字即可.你的app.js中的代码将如下所示:

Ext.define('MyApp.MyPanel', {
     extend      : 'Ext.Panel',
     width       : 200,
     height      : 150,
     bodyPadding : 5
 });
 Ext.application({
     name   : 'MyApp',
     launch : function() {
         Ext.create('MyApp.MyPanel', {
             renderTo :Ext.getBody(),
             title    : '我的第一个面板',
             html     : '我的第一个面板'
         });
         Ext.create('MyApp.MyPanel', {
             renderTo : Ext.getBody(),
             title    : '我的第二个面板',
             html     : '我的第二个面板'
         });
     }
 });

用浏览器打开index.html你将看到两个内容不同的Panel.