一、搭建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的样例代码

View Code
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目录引入的话,则不需要)。

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

 

转载于:https://www.cnblogs.com/nolink/archive/2012/12/18/2823316.html

不多说,如果你需要学习Extjs或者是不懂Extjs,这门视频能对你有很大的帮助,文件过大,上传乃是下载链接,下面上目录: 1、ExtJs初识及其环境搭建 2、开始ExtJs梦想之旅# n8 }: ~+ d4 X+ V1 c 3、ExtJS工具栏、菜单栏0 Q' y0 E. y E 4、ExtJS最常用的表单之textfield控件4 |4 ]8 ~/ d3 Y& k# X 5、ExtJs最常用表单组件Number、CheckBox、Radio* s, r% ~+ k; y# W 6、ExtJs最常用表单组件ComboBox、time、date 7、ExtJS面板Panel t1 E( w8 g6 ?/ L' A 8、EXtJS布局模式-Auto布局、Fit布局、Accordion布局 9、ExtJS布局模式-Card、Anchor、Absolute( r! k$ G/ Q, u! c' U 11、ExtJS布局模式-Box布局、使用ViewPort布局首页0 j( d' o {. g$ T 12、ExtJS之Ext常用函数4 {, o8 W1 s! I6 ^3 k 13、ExtJS之Ext常用函数(二)' o, e2 G$ D7 @" ?- [! E 14、初识Ajax& i O, A2 I, c6 G: c- Q) K% I 15、ExtJS对Ajax支持-注册用户实例 16、ExtJS对Ajax支持-注册用户实例2 17、ExtJS之Grid组件* w/ o8 _- \. Q! [* R6 s& u0 V 18、ExtJS之ComboBox获取远程数据、网页计算器5 W& ]. W7 ?, V/ Q 19、ExtJS之组件面向对象编程(一) 20、ExtJS之组件面向对象编程(一) 21、项目实战-需求分析、数据字典、数据库设计) r, `+ J( `$ l# d7 I$ h# W: U' r* a 22、项目实战-底层框架搭建、创建实体对象 23、项目实战-数据访问层处理9 W1 _1 m7 _" T. J( N0 T+ k 24、项目实战-数据批处理、分页查询 25、项目实战-业务逻辑层、控制器层 26、项目实战-控制器层、Spring配置文件编写 27、项目实战-Spring配置文件编写、完善底层环境搭建 28、项目实战-在线选课系统用户前端界面3 |/ |- F1 T+ E5 L2 @) l 29、项目实战-在线选课系统用户前端界面(添加、修改、删除)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值