ExtJS初接触 - 在项目中使用ExtJS

今天ExtJS官网发布了ExtJS最新正式版4.2.1。Ext JS 4.2.1 正式版 下载

ExtJS为开发者在开发富客户的B/S应用中提供丰富的UI组件，具有统一的主题，便于快速开发，提高效率。但显然它并不适合互联网站的开发。

主要目录文件介绍

builds：压缩后的ExtJS代码，体积更小，更快；
docs：开发文档；
examples：官方演示示例；
locale：多国语言资源文件；
pkgs：ExtJS各部分功能的打包文件；
resource：ExtJS所需要的CSS与图片文件；
src：未压缩的源代码目录；
bootstarp.js：ExtJS库引导文件,可自动切换ext-all.js与ext-all-debug.js；
ext-all.js：ExtJS核心库；
ext-all-debug.js：ExtJS核心库的调试版,调试时使用。
ext-all-debug-w-comments.js：带注释的ExtJS核心库调试版。

如何引入文件

在项目中使用ExtJS，以下文件必需的：1 整个resources文件夹
2 ext-all.js或ext-all-debug.js或ext-all-debug-w-comments.js文件
3 ext-lang-zh_CN.js文件

在页面中用到ExtJS至少引入以下文件：

1 resources\css\ext-all.css
2 ext-all.js（如果要对ExtJS代码进行调试或学习可引入ext-all-debug.js或ext-all-debug-w-comments.js）
3 ext-lang-zh_CN.js

一个简单示例

<head>
    <title>ExtJs</title>
    <link href="ExtJs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="ExtJs/ext-all-debug-w-comments.js" type="text/javascript"></script>
    <!-- <script src="ExtJs/ext-all.js" type="text/javascript"></script> -->
    <script src="ExtJs/ext-lang-zh_CN.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
            //创建一个窗体
            var win = new Ext.Window({
                width: 300,
                height:300,
                items: [],
                modal: true,
                buttonAlign: 'center',
                buttons: [{
                    text: '测试', id: 'btnTest', handler: function () {
                        Ext.Msg.show({
                            title: '询问',
                            msg: '您喜欢 ExtJs 吗？',
                            fn: processResult,
                            icon: Ext.Msg.QUESTION,
                            buttons: Ext.Msg.YESNO,
                            animEl: 'btnTest'
                        });
                    }
                }
                ]
            });
            win.show();
        });
 
        //询问对话框处理Handler
        function processResult(btn) {
            Ext.Msg.alert('结果', btn);
        }
    </script>
</head>
<body>
    <div>
    </div>
</body>
</html>

　　

PS：公司的新项目中要求用ExtJS，所以我这几天展开了对ExtJS的学习。刚接触几天，发现ExtJS对开发B/S应用确实是个不错的选择。后续文章我会写一些关于ExtJS学习的心得和总结，并通过这希望能和对此感兴趣的朋友一起学习和交流。

 
 
分类: ExtJS
标签: ExtJS

ExtJS初接触 - 在项目中使用ExtJS的更多相关文章

  1. ExtJS初探：在项目中使用ExtJS

    注意:本文写作时间是 2013 年,所讲的 ExtJS 如今早已过时,请勿学习! -------------------------------- 今天ExtJS官网发布了ExtJS最新正式版4.2. ...

  2. ExtJS初接触 —— 了解 Ext Core

    ExtJS初接触 —— 了解 Ext Core Ext Core是一款和jQuery媲美的轻型JS库,基于MIT许可.对于Dom的操作,我个人还是比较喜欢用jQuery.当然如果项目中用的是ExtJS ...

  3. 在项目中使用ExtJS

    主要目录文件介绍 builds:压缩后的ExtJS代码,体积更小,更快:docs:开发文档:examples:官方演示示例:locale:多国语言资源文件:pkgs:ExtJS各部分功能的打包文件:r ...

  4. 在VS2008中加入ExtJS智能提示

    在VS2008中加入ExtJS智能提示   在VS2008中加入ExtJS智能提示—>(方法一) 关于如何在VS2008中加入ExtJS的智能提示的方法,我这里有2种方法,相对于第二种方法,第一 ...

  5. extjs6整合到web项目中

    最近有一个项目需要应用extjs作为前端界面,因此研究了一下如何将extjs 6引入到项目中.以下是操作步骤 extjs6下载地址 extjs 6有gpl版本的,下载地址https://www.sen ...

  6. Autofac在项目中应用的体会，一个接口多个实现的情况

    在本人接触的项目中Autofac应用的比较多一些,我理解的他的工作原理就是  注册类并映射到接口,通过注入后返回相应实例化的类! 下面说说我在项目中的实际应用 先来简单介绍下Autofac的使用 1. ...

  7. Extjs 项目中常用的小技巧，也许你用得着(2)

    接着来,也是刚刚遇到的 panel怎么进行收缩 collapsible: true, 这会panel就会出现这个 点这个就可以收缩了 panel怎么随便拉伸,也就是让那个小黑三角出现 split: t ...

  8. Extjs 项目中常用的小技巧，也许你用得着(1)

    我在项目中遇到的一些知识点: 1.在GridPanel中显示图片,效果 对应的代码实现 { text: '是否启用', width: 80, // xtype: 'checkcolumn', data ...

  9. ExtJS配置与入门项目创建

    Sencha Cmd下载:http://cdn.sencha.com/cmd/6.5.2/jre/SenchaCmd-6.5.2-windows-64bit.zip ExtJS-6.2.0下载:htt ...

随机推荐

  1. java程序连接MongoDB副本集测试

    三个节点有一个节点挂掉也不会影响应用程序客户端对整个副本集的读写! public class TestMongoDBReplSet { public static void main(String[] ...

  2. jquery自己主动旋转的登录界面的背景代码登录页背景图

    在其他网站上看到比较爽Web登录界面.背景图片可以自己主动旋转. 介绍给大家.有兴趣的可以改改下来作为自己的系统登录界面. 如图: watermark/2/text/aHR0cDovL2Jsb2cuY ...

  3. 认识TDD

    初步认识TDD TDD,测试驱动开发(Test Driven Development)是极限编程中倡导的程序开发方法,以其倡导先写测试程序,然后编码实现其功能得名.本文将对TDD有一个较为系统的认识. ...

  4. ASP.NET MVC局部视图

    使用ASP.NET MVC局部视图避免JS拼接HTML,编写易于维护的HTML页面   以前使用ASP.NET WebForm开发时,喜欢使用Repeater控件嵌套的方式开发前台页面,这样就不用JS ...

  5. Linux分配给该用户没有权限登陆

    Linux分配给该用户没有权限登陆 sudo visudo username ALL=(ALL) NOPASSWD:ALL 版权声明:本文博客原创文章,博客,未经同意,不得转载.

  6. three.js 源代码凝视（七）Math/Euler.js

    商域无疆 (http://blog.csdn.net/omni360/) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:商域无疆 -  本博客专注于 敏捷开发 ...

  7. jmeter java请求

    demo下载地址http://yun.baidu.com/share/link?shareid=4277735898&uk=925574576 1.引用jmeter的jar包 到jmeter的 ...

  8. DDD分层架构之值对象（层超类型篇）

    DDD分层架构之值对象(层超类型篇) 上一篇介绍了值对象的基本概念,得到了一些朋友的支持,另外也有一些朋友提出了不同意见.这其实是很自然的事情,设计本来就充满了各种可能性,没有绝对正确的做法,只有更好 ...

  9. CentOS 7 结构体GCC 4.8.2 32位编译环境

    centos 7 结构体gcc 32位编译环境 1介绍 1.1背景 学习新 C++ 2011和C11标准. 1.2使用软件 CentOS 7(Linux version 3.10.0-123.el7. ...

  10. 零基础学习iOS开发

    零基础学习iOS开发不管你是否涉足过IT领域,只要你对iOS开发感兴趣,都可以阅读此专题. [零基础学习iOS开发][02-C语言]11-函数的声明和定义 摘要: 在上一讲中,简单介绍了函数的定义和使 ...