`
小杨学JAVA
  • 浏览: 904255 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

在项目中使用ExtJS(转)

 
阅读更多

转:http://www.cnblogs.com/willick/p/3168809.html

今天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

一个简单示例

<html xmlns="http://www.w3.org/1999/xhtml">
<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
                        });
                    }
                }
                ]
            });
            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-json-数据转换

    使用ExtJs获取后台json格式的数据必须的七个jar包,commons-beanuti-1s-1.7.0.jar,commons-collections-3.1.jar,commons-lang-2.5.jar,commons-logging-1.0.4.jar,ezmorph-1.0.4.jar,json-lib-2.1.jar,...

    Highstock与ExtJs结合使用

    接着,创建一个ExtJS的容器组件,比如面板(Panel),并在其配置中指定使用Highstock的图表类型。 在配置Highstock时,你需要定义系列(series)、x轴(xAxis)和y轴(yAxis)的详细信息。系列通常对应于你要展示的...

    Extjs5手动搭建MVVM项目demo

    在ExtJS 5中,可以使用Store和Model组件来管理数据。Store用来存储数据,它可以连接到各种数据源,如JSONP、Ajax或本地存储。Model定义了数据字段和验证规则,与Store中的数据进行交互。 2. **View(视图)**:视图...

    extjs4中文视频下载地址

    - **Proxy 原理**:Proxy 在 ExtJS 4.0 中扮演着数据传输者的角色,负责数据的读取和存储。 - **代理类型**:包括内存代理(Memory)、AJAX 代理(Ajax)、REST 代理(Rest)等多种类型,每种代理适用于不同的场景。...

    Extjs+Gride使用方法

    在本篇文章中,我们将深入探讨如何使用ExtJS与Gride进行交互,创建功能丰富的数据网格。 首先,理解ExtJS Grid的基本结构至关重要。Grid由以下几个主要部分组成: 1. **Store**: 存储数据的容器,可以是本地数据...

    ExtJS 配置和表格控件使用

    在本文中,我们将探讨ExtJS的配置以及如何使用表格控件(Grid)。 首先,让我们了解如何配置ExtJS。你可以从官方网站www.extjs.com下载所需版本。在这里,我们以2.2版本为例。下载后,将其解压缩,并在本地文件系统...

    JAVAWEB企业OA项目源码(ExtJS+4.2+Hibernate+4.1.7+Spring+MVC+3.2.8)

    这是一个基于JavaWeb技术的企业级办公自动化(OA)项目的源代码,使用了丰富的技术和框架组合,包括ExtJS 4.2、Hibernate 4.1.7、Spring MVC 3.2.8。该项目提供了完整的数据库源码,使得部署过程无需密码,可以直接...

    extjs模拟excel表格

    在本文中,我们将深入探讨如何使用ExtJS来模拟Excel表格,以及实现Excel的各种功能。 首先,ExtJS中的GridPanel组件是实现模拟Excel表格的核心。GridPanel允许我们展示大量数据,并提供了诸如排序、过滤、分页等...

    ASP.NET 调用EXTJS

    在实际项目中,为了提高性能和用户体验,通常会使用EXTJS的Store组件来管理数据,并配合Proxy来处理与服务器的通信。Proxy可以配置为使用Ajax方式,指向ASP.NET的API接口,实现自动加载、保存、删除等操作。 总的来...

    ExtJS中文手册.pdf

    - **规划流程**:在开发之前做好规划是非常重要的,包括确定项目需求、设计架构等。 - **示例应用**:本文档提供了一个具体的示例应用,展示了如何从零开始构建一个完整的ExtJS应用。 - **权限管理**:包括公共、...

    ExtJS poi 导入excel

    在导入Excel的场景中,可能使用ExtJS来设计用户界面,如上传按钮、表格展示导入的数据等。通过ExtJS的Ajax接口,可以发送请求到服务器,将Excel文件上传到后端进行处理。此外,它还支持数据绑定,可以将服务器返回的...

    extjs 导入导出 Exel

    在EXTJS 中,导入和导出Excel 文件是常见的需求,特别是在处理大量数据时,Excel 的格式化和编辑能力非常有用。 ### 导出到Excel EXTJS 提供了多种方式来实现数据到Excel 的导出。一种常见的方式是通过服务器端...

    extjs bug 图标大全

    "extjs bug 图标大全" 指的是在ExtJS框架中与错误或问题相关的图标集合。这些图标通常用于表示程序中的错误状态、警告信息或者调试标志,帮助开发者和用户更好地理解应用的状态。 在ExtJS中,图标通常通过CSS类来...

    Extjs的loading效果

    在ExtJS中,我们可以使用`Ext.LoadMask`类来创建一个全局或者局部的加载遮罩。加载遮罩会在指定元素上覆盖一层半透明的背景,并显示一个加载图标或文字。例如,我们可以为整个页面设置加载遮罩: ```javascript ...

    extjs实现的带标签、翻页动画的书

    在本项目中,“extjs实现的带标签、翻页动画的书”显然利用了ExtJS的组件化特性和动画功能,创建了一个模拟真实书籍阅读体验的应用。 首先,我们来看看“标签”这一概念。在Web应用中,标签(Tab)通常用来组织和...

    ExtJs4.1+Jbpm4+SSH2+Oracle10g实际项目源码

    实战与demo的区别我不再多说,在以前工作中走过一些弯路,一些实现都是靠自己想象或者听其他人应该怎么实现才是项目中真正需要的。JBPM书上是讲解以工作流为核心去开发应用,那并不是我们想要的,我们想要的是在我们...

    EXTJS 强大的图片查看器 仿windows照片查看器

    在给定的“EXTJS 强大的图片查看器 仿windows照片查看器”项目中,我们可以了解到,这个组件是EXTJS框架的一个扩展,旨在提供类似Windows操作系统中照片查看器的功能。下面将详细阐述EXTJS图片查看器的关键知识点。 ...

    ExtJs6 导出excel(包含分组、分组合计行、二重表头)

    在描述中提到的"example里的方法",可能是指ExtJS官方示例中的一些代码片段,这些示例通常会演示如何实现特定功能,开发者可以参考并修改它们以适应自己的项目需求。 总之,ExtJS6的导出Excel功能结合了分组、分组...

    ExtJS实现Excel导出

    在ExtJS中实现Excel导出通常涉及到以下几个关键步骤: - **数据收集**:首先,需要从服务器或本地数据源获取待导出的数据。这可以通过Ajax请求或其他数据获取方式实现。 - **数据格式化**:获取到的数据需要...

    Extjs生成主界面

    1. **新建项目**:首先打开Sencha Architect,选择新建项目,并指定使用Extjs 4.2.X版本。 2. **创建Viewport**:Viewport是Extjs中的顶级容器,它管理着页面的所有内容。在Sencha Architect中,选择创建一个新的...

Global site tag (gtag.js) - Google Analytics