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. JavaScript两种方法来定义一个函数

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Facebook HHVM 和 Hack 手册 --- 2. HHVM能做什么

    HHWM简介: HHWM(HipHop VM) 是Facebook推出的用来执行PHP代码的虚拟机,它是一个PHP的JIT(Just-In- Time)编译器,同时具有产生快速代码和即时编译的优点. ...

  3. SOA面向服务架构

    SOA面向服务架构 风尘浪子 只要肯努力,梦想总有一天会实现 随笔分类 - SOA面向服务架构 结合领域驱动设计的SOA分布式软件架构 摘要: 领域驱动设计DDD的总体结构,Repository层使用 ...

  4. MonkeyImage API 实践全记录

    1.    背景 鉴于网上使用MonkeyImage的实例除了方法sameAs外很难找到,所以本人把实践各个API的过程记录下来然自己有更感性的认识,也为往后的工作打下更好的基础.同时也和上一篇文章& ...

  5. Installshield获取安装包版本的系统变量是IFX_PRODUCT_VERSION

    原文:Installshield获取安装包版本的系统变量是IFX_PRODUCT_VERSION Installshield获取安装包版本的系统变量为IFX_PRODUCT_VERSION 当笔记记下 ...

  6. Python什么是值或引用函数参数

    这篇文章是Python前往遇到有疑问的功能. 下面一段是原有的基础教程Python函数. 按值传递參数和按引用传递參数 全部參数(自变量)在Python里都是按引用传递.假设你在函数里改动了參数,那么 ...

  7. Fizzler

    Fizzler 抓取网站数据不再是难事了,Fizzler(So Easy)全能搞定 首先从标题说起,为啥说抓取网站数据不再难(其实抓取网站数据有一定难度),SO EASY!!!使用Fizzler全搞定 ...

  8. 图文详解ReSharper 8.1功能变化

    ReSharper 8.1版本已经发布有段时间了,被广大开发者购买和试用,今天小编就ReSharper 8.1功能变化就行详细的解说. 支持TypeScript 突出了重构(重命名,引入变量).导航. ...

  9. 深入了解jsonp解决跨域访问

    在这个项目中,我们做的充分利用jsonp这是一个特点跨界,完成简单的单点登录认证和权限控制的统一.道,各有各的优点.各有各的优点,选择什么方式实现全然取决于我们自己或者项目经理的开发经验,对各种框架的 ...

  10. psql: FATAL: role “postgres” does not exist 解决方案

    当时想做的事情,是运行一个创建数据库的脚本.找到的解决方案差不多和下面这个链接相同. http://stackoverflow.com/questions/15301826/psql-fatal-ro ...