一、搭建Extjs 4.1开发环境

Extjs是个不错的js框架，在企业级开发中有着广泛的应用，但他的一个广受诟病的缺点是太重。

幸运的是，从extjs 4开始引入了dynamic loading(动态加载)的特性，使得这一问题有稍微一些改善。

记得一年多前参与的一个管理系统使用了3.4版本的，现在因工作原因又需要使用extjs，需要重新学习一下。本系列文章将记录extjs重新学习的整个过程，本来想基于django写的，但是又转型到.net开发了，所以本文将以mvc3为学习框架。

首先下载extjs 4.1，解压后在iis或者其他web server中，将解压后的目录添加为一个站点

这样在查看API和Example的时候就非常方便了。

1.了解extjs目录内容

    解压后的目录中有很多内容，达到一百多兆，当然我们开发中使用到的东西不会这么多。

    首先是很多js文件，我们在开发中会经常用到的4个：

    ext.js: 这是压缩后的主文件，222 KB的内容，这种方式是dynamic loading时使用的

    ext-debug.js: 这是ext.js的未压缩代码，509 KB的内容，也是dynamic loading的

    ext-all.js: 这是传统方式的代码，所有内容都放置在一个文件中，适合在初学的时候使用

    ext-all-debug.js： 同上，是可读的代码　

    本系列使用的dynamic loading的方式，在调试过程中，使用ext-debug.js

　 然后是src和resources目录，我们在开发的时候会经常使用到这两个目录的内容

2.开始使用extjs 4.1

    准备工作做好了之后，我们就可以进入开发了。

    首先我们需要一个页面，初始化一些配置，随后将下述代码添入其中

    

<!-- 引入主css文件，extjs样式 -->
    <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/Content/resources/css/ext-all.css" />
    <!-- dynamic loading时使用的主js入口 -->
    <script type="text/javascript" src="http://www.cnblogs.com/Scripts/Ext/ext.js">
    </script>
    <script type="text/javascript">
        //使用extjs的loader功能，动态载入代码
        Ext.Loader.setConfig({
            enabled: true,
            //在项目中使用Ext为命名空间时，在如下路径中寻找代码
            paths: {
                Ext: "http://www.cnblogs.com/Scripts/Ext/src" 
            } 
        }); 
    </script>

    随后我们就可以在项目中自由的使用extjs的强大功能了。

    笔者在加入extjs的resources目录时，并没有将整个目录都复制过来，因为这可能会稍微增大项目的大小，如果你不在意这些冗余而且也懒得手动加入文件的话，就可以直接将整个resources目录复制过来。

    笔者采用的方式是（较繁琐）：建立resources目录，在建立子目录css和themes,将ext-all.css拷入css目录中

    在使用extjs的过程中，使用chrome的控制台查看哪些文件缺失，再将相应的文件拷入。

    至于src目录，其中的代码都是调试的代码，在发布时，可以使用压缩工具压缩后存放。

3. 建立id为logon_div的div标签，插入如下javascript代码，这个是sencha ext js的样例代码

Ext.require([
    'Ext.form.*',
    'Ext.layout.container.Column',
    'Ext.tab.Panel'
]);

Ext.onReady(function () {
    Ext.QuickTips.init();

    var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';

    var simple = Ext.widget({
        xtype: 'form',
        layout: 'form',
        collapsible: true,
        id: 'simpleForm',
        url: 'save-form.php',
        frame: true,
        title: '登录权限管理系统',
        bodyPadding: '5 5 0',
        width: 350,
        fieldDefaults: {
            msgTarget: 'side',
            labelWidth: 75
        },
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'First Name',
            afterLabelTextTpl: required,
            name: 'first',
            allowBlank: false
        }, {
            fieldLabel: 'Last Name',
            afterLabelTextTpl: required,
            name: 'last',
            allowBlank: false
        }, {
            fieldLabel: 'Company',
            name: 'company'
        }],

        buttons: [{
            text: '登录',
            handler: function () {
                this.up('form').getForm().isValid();
            }
        }, {
            text: '取消',
            handler: function () {
                this.up('form').getForm().reset();
            }
        }]
    });

    simple.render(Ext.get('logon_div'));
});

由于使用dynamic loading,在使用控件之前，需要使用Ext.require(['Ext.grid.*']);这一类的代码将js

文件动态引入。

运行，在chrome控制台或者Firebug中查看错误信息，会看到一些文件缺失的提示，按照提示的文件路径，建立相应的目录，并拷入相应的文件（如果你将整个resources目录引入的话，则不需要）。

一个包含三个输入框的界面出来了，前两个为必填项，如果缺失，会有红色线和警示符提醒。