`
slowman
  • 浏览: 38380 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

extjs开发环境搭建

阅读更多

一 、要求

1, extjs4虽然支持所有主流浏览器,但是开发过程还是建议使用Google Chrome10+,Apple Safan5+ Firefox4+。
2,服务器
官方文档强烈建议使用web Server打开extjs4.0 sdk,否则一直处在loading状态,尽管有XHR可以跨过浏览器限制。本人采用的tomcat6.0,将extjs4.0 sdk解压后放在webapp下面,然后在IE里面打开,就可以看到帮助文档了。
3,应用工程结构
虽然不是必须,但是EXTJS4.0建议采用如下开发结构,从而使用工程易于组织和维护。
- appname
    - app
        - namespace
            - Class1.js
            - Class2.js
            - ...
    - extjs
    - resources
        - css
        - images
        - ...
    - app.js
    - index.html
  • appname  工程的根目录,包含所有的源文件。
  • app :包含所有的类文件
  • extjs :包含 Ext JS 4 SDK 文件
  • resources :CSS,图片,JSON等资源文件
  • index.html:HTML文档的入口点
  • app.js :包含应用程序的所有业务逻辑
二,Hello extjs---第一个extjs程序
1,在webapp下面建文件荚 helloext,helloext下面再建一个extjs文件,将extjs4.0 sdk解压到extjs下面。目录如下:
- helloext    
    - extjs  
    - app.js
- index.html
用editplus打开index.html,输入以下内容:
<html>
<head>
    <title>Hello Ext</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
说明:
  • extjs/resources/css/ext-all.css 样式信息
  • extjs/ext-debug.js :extjs核心类库最小集
  • app.js :应用程序代码
在浏览器输入http://localhost:8080/helloext/index.html,看看效果吧。

三,动态加载特性
上例子中,Ext.create 实例化了 一个Ext.container.Viewport. 当Ext.create调用的时候,extjs加载器将会先检查是否定义了Ext.container.Viewport对象,如果没有定义,它将会首先加载包含Ext.container.Viewport.的js文件。程序将一直等着Ext.container.Viewport成功加载。这将导致一点延时,在Ext.application前加入下面这行代码可以解决这个问题:
Ext.require('Ext.container.Viewport');
它可以保证包含Ext.container.Viewport的文件在应用运行前加载。

四,如何引用extjs库
在extjs sdk中包括以下文件:
  1. ext-debug.js - 调试用,包含extjs运行的最小核心类库

  2. ext.js - :与ext-debug.js 一样,只不过是运行时用。

  3. ext-all-debug.js -包含整个extjs类库,开发时用。

  4. ext-all.js - 运行时用,但不建议直接包括这个文件,因为很多类一般用不到。

     
























分享到:
评论

相关推荐

    windows下Extjs开发环境搭建说明

    ### Windows 下 Extjs 开发环境搭建说明 #### 一、概述 本文档旨在详细介绍如何在 Windows 操作系统环境下搭建 Extjs 的开发环境,并通过 Spket 实现代码智能提示功能,最后通过一个简单的 HelloWorld 示例来验证...

    ExtJS开发环境搭建(Eclipse)

    ExtJS是一种基于JavaScript的前端框架,用于...以上就是搭建ExtJS开发环境的详细步骤,通过这个过程,你将能够在Eclipse中有效地进行ExtJS应用的开发、调试和管理。记得保持环境的更新,以便充分利用最新的工具和技术。

    extjs4环境搭建

    本文将详细介绍如何搭建ExtJS4的开发环境。 首先,你需要下载ExtJS4的版本。ExtJS4.x的发布包含了多个版本,例如4.0、4.1、4.2等,根据项目需求选择适合的版本进行下载。下载完成后,解压缩文件到本地文件系统中。 ...

    ExtJS开发实战

    #### 三、ExtJS开发环境搭建 1. **安装Node.js**:推荐使用最新版本的 Node.js,这有助于更好地管理项目依赖。 2. **安装Ext JS SDK**:可以通过 npm 安装官方提供的 Ext JS SDK,命令如下: ```bash npm install...

    建立ExtJS环境所需全部文件

    总的来说,这个压缩包提供了一个完整的ExtJS开发环境搭建方案,包括了Eclipse和Spket的适配文件,以及ExtJS 4.1的核心库。开发者可以通过这个环境快速开始构建ExtJS应用,同时享受Eclipse和Spket带来的高效开发体验...

    Extjs环境搭建

    搭建ExtJS开发环境需要安装Node.js和Sencha Cmd,下载并解压ExtJS框架,创建项目,配置项目信息,启动开发服务器,编写和调试代码,最后通过Sencha Cmd构建并部署应用。在整个过程中,熟悉Sencha Cmd的命令和ExtJS的...

    extjs 简单框架搭建

    同时,确保你的开发环境中已经安装了HTML、CSS和JavaScript的基础开发工具,如Sublime Text、Visual Studio Code或IntelliJ IDEA等。 2. **创建基本结构**:新建一个项目文件夹,然后在这个文件夹中创建基础的目录...

    2015年最新的搭建MyEclipse10+Spket+ExtJS的开发环境介绍

    搭建MyEclipse10+Spket+ExtJS的开发环境是一项关键步骤,特别是对于初学者而言,这将为JavaScript开发打下坚实的基础。本文将详细解释如何进行这一配置。 首先,我们来安装Spket插件。Spket是一个强大的JavaScript...

    搭建利用Extjs库开发的环境

    为了更好地利用Extjs进行开发,本文将详细介绍如何在Spket IDE中配置Extjs开发环境,使得开发者能够享受到强大的代码提示与调试支持,提高开发效率。 #### 二、准备工作 在开始配置前,请确保以下条件已满足: 1. ...

    extjs入门教程

    ### ExtJS 入门教程详解 ...通过上述内容的学习,开发者可以逐步掌握 ExtJS 的基本概念、开发环境搭建、核心概念以及一些常用的工具和 API。这些知识对于快速上手并利用 ExtJS 构建高效、美观的用户界面至关重要。

    Extjs之Eclipse及spket的开发环境的搭建

    ### Extjs之Eclipse及spket的开发...通过以上步骤,您可以成功搭建起一套完整的Extjs开发环境,并且利用Eclipse和spket插件大大提高您的开发效率。同时,借助这些社区资源,您将能够在遇到问题时获得及时的帮助和支持。

    extjs入门文档

    #### 三、ExtJS 开发环境搭建 - **开发工具**:推荐使用 Visual Studio Code 或者 WebStorm 进行开发。 - **版本管理**:建议使用 Git 进行代码版本控制。 - **构建工具**:可以使用 Gulp 或者 Webpack 来构建项目...

    搭建好的EXTJS和SSH环境

    EXTJS和SSH是两种在开发Web应用程序时常用的技术。EXTJS是一个基于JavaScript的富客户端框架,用于构建桌面级的Web应用,提供丰富的用户界面组件和交互体验。SSH(Struts2、Spring、Hibernate)则是一种Java后端的...

    ExtJS_MVC框架的搭建实例

    #### 三、项目环境搭建 为了更好地理解整个项目的构建流程,下面将详细介绍如何搭建一个基于SSM + ExtJS MVC框架的项目环境。 **1. 项目jar包简介** 在正式开始项目搭建之前,首先了解一下项目中会使用到的主要jar...

    EXTJS(搭建环境)学习笔记.doc

    这篇学习笔记主要涉及EXTJS的环境搭建,特别关注EXTJS 4.1和5.1版本,适合测试工程师进行学习和实践。 在EXTJS 4.1和5.1的API文档中,提供了详细的类、方法和属性参考,对于开发和调试非常有帮助。中文API地址可以...

    ExtJS6.0开发培训

    ExtJS6.0的环境搭建,和Eclipse集成开发,JAVAWEB工程

    ExtJS类库开发环境部署

    此压缩包中,包含ExtJs4.0类库,spket破解版,以及Myeclipse下ExtJs开发环境的搭建,和一个用ExtJs写的HelloWorld,相信有了它,你可以进行基础开发了

Global site tag (gtag.js) - Google Analytics