本篇介绍如何创建一个ExtJS应用程序。并通过创建目录、导入文件、编写代码及分析代码等步骤来解释第一个ExtJS程序。

目录

1. 创建程序

　　1.1 创建目录建议

　　1.2 实际目录

　　1.3 index.html

　　1.4 运行图

2. 代码分析

　　2.1 Ext.onReady()

　　2.2 Ext.create()

1. 创建程序

1.1 创建目录建议

根据官方建议，创建一个ExtJS应用程序的目录推荐如下：

- appname

　　| - app

　　　　| - namespace

　　　　　　| - Class1.js

　　　　　　| - Class2.js

　　　　　　| - ...

　　| - extjs

　　| - resources

　　　　| - css

　　　　| - images

　　　　| - ...

　　| - app.js

　　| - index.html

appname目录：应用程序的根目录。

app目录：业务代码。

extjs目录：存放ExtJS各JS文件。

resources目录：资源目录；包含CSS和图片。

app.js文件：应用程序的逻辑js文件。

index.html文件：应用程序的入口点。

可以看出，整个目录只有一个html文件，其他的业务都是通过Js文件创建。

ExtJS非常适合SAP(单页面应用)的程序，除了入口的index.html，其他业务都可通过js文件来进行开发和管理。

1.2 实际目录

可根据需要：

1) 导入ext-4.2.1-gpl.zip里的ext-all.js到项目的 extjs4.2 目录里。

2) 导入ext-4.2.1-gpl.zip中的Resources到项目的 Resources 目录里。

1.3 index.html

index.html文件代码如下：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>ExtJS4.2</title>

	<meta charset="utf-8" />

    <link href="Resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet" />

    <script src="ExtJS4.2/ext-all.js"></script>

    <script src="app.js"></script>

    <script>

        Ext.onReady(function () {

            Ext.create('Ext.panel.Panel', {

                width: '100%',

                title:'Test',

                renderTo: Ext.getBody(),

                items: [

                    Ext.create('Ext.form.Display', {

                        width: '100%',

                        value: '第一个ExtJS程序'

                    })

                ]

            });

        });

    </script>

</head>

<body>

</body>

</html>

　　

1.4 运行图

2. 代码分析

2.1 Ext.onReady()方法

Ext.onReady( fn, [scope], [options]) ：传入一个函数，当DOM和所需要的类都加载完毕后执行此函数。

参数：

①fn {function} ：加载完毕要执行的函数。

②scope {object} 可选 ：回调函数的作用域。

③options {object} 可选 ：在创建事件时，设定创建的机制。此函数最终调用 Ext.util.Event.addListener() 方法；可在里面找到相关的设置。例如 priority 字段表示事件创建是否优先；如第二个顺序加载的Ext.onReady()中options设置为 {priority:true}，那么此Ext.onReady()会在第一个加载的Ext.onReady()之前执行(前提是第一个Ext.onReady()没有设置{priority:true})。

2.2 Ext.create()方法

Ext.create( name, [args] ) ：创建指定类的实例。

参数：

①name {function} ：需要创建实例的类名或别名。

②args {object} 可选 ：初始化实例时的传参。

返回值：

{object} ：返回实例。

2.2.1 Ext.create('Ext.panel.Panel', {})

Ext.create('Ext.panel.Panel', {}) ：表示创建一个 panel 组件。

renderTo: Ext.getBody() ：在Body区域里呈现此组件。

2.2.2 Ext.create('Ext.form.Display', {})

Ext.create('Ext.form.Display', {}) ：创建一个 Display 组件。

在这个示例中，我们把 Display组件放入到 panel 容器里了。

End
菜单加载中...

ExtJS 4.2 第一个程序的更多相关文章

  1. Android开发-之第一个程序：HelloWorld！

    小编觉得不管学习什么编程的时候,第一个程序都是要求打印输出一个"HelloWorld!",那就从最简单的HelloWorld开始吧!哈哈~~~~ 一.创建一个Android工程 1 ...

  2. [Fluent NHibernate]第一个程序

    目录 写在前面 Fluent Nhibernate简介 基本配置 总结 写在前面 在耗时两月,NHibernate系列出炉这篇文章中,很多园友说了Fluent Nhibernate的东东,也激起我的兴 ...

  3. rails再体验（第一个程序）

    掌握redmine plugin开发的目标在2016年未实现,2017年继续. 选择<Ruby on Rails Tutorial>教程,windows安装railsinstaller,该 ...

  4. OpenGL学习笔记1——第一个程序

    学习的参考书基本是按照GL编程指南,如果有消息机制概念,对于GLUT的理解是很自然的.下面就按照自己写的第一个程序详细解释一下GL,还是比较容易上手的. 程序实现的功能是,根据当前随即种子摇出来的结果 ...

  5. Android 第一个程序 及 环境搭配

    一. JDK配置 1.找到jdk安装路径 2.配置环境变量(建议配置在系统变量里面) 1).配置JAVA_HOME变量 2).配置 CLASSPATH 环境变量 CLASSPATH=.;%JAVA_H ...

  6. unix 网路编程（卷一）第一个程序编译过程

    unix卷一去年暑假买的到现在才开始看无比惭愧,而且惭愧第一个程序就断断续续弄了几天,要好好写程序了,马上要找工作了,下面介绍下把本书第一个程序跑起来的过程: 搜各种博客 我用系统的是ubuntu 1 ...

  7. Hadoop学习历程（三、第一个程序）

    根据之前的操作,我们已经可以正常的启动Hadoop了,关于真正的集群我会在之后进行说明.现在我们来看一下第一个程序吧 1. 在eclipse上建立一个java项目 2. 将 /usr/hadoop/s ...

  8. Python2.7.3 学习——第一个程序 Hello Python World

    Hello World 每学一门语言开始的第一程序都是Hello World ,当然了Python也不例外,下面开始我们的Python第一个程序编写: 1,命令行: (1)打开终端,输入python, ...

  9. 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld

    记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...

随机推荐

  1. Npm包的开发

    个人开发包的目录结构 ├── coverage //istanbul测试覆盖率生成的文件 ├── index.js //入口文件 ├── introduce.md //说明文件 ├── lib │   ...

  2. JavaScript权威指南 - 函数

    函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...

  3. SQL Server-表表达式基础回顾（二十四）

    前言 从这一节开始我们开始进入表表达式章节的学习,Microsoft SQL Server支持4种类型的表表达式:派生表.公用表表达式(CTE).视图.内嵌表值函数(TVF).简短的内容,深入的理解, ...

  4. java 利用ManagementFactory获取jvm,os的一些信息--转

    原文地址:http://blog.csdn.net/dream_broken/article/details/49759043 想了解下某个Java项目的运行时jvm的情况,可以使用一些监控工具,比如 ...

  5. 使用SecureCRT连接虚拟机（ubuntu）配置记录

    这种配置方法,可以非常方便的操作虚拟机里的Linux系统,且让VMware在后台运行,因为有时候我直接在虚拟机里操作会稍微卡顿,或者切换速度不理想,使用该方法亲测本机效果确实ok,特此记录. Secu ...

  6. 微信小程序（微信应用号）组件讲解

    这篇文章主要讲解微信小程序的组件. 首先,讲解新建项目.现在有句话:招聘三天以上微信小程序开发,这个估计只能去挖微信的工程师了.技术新,既然讲解,那我们就从开始建项目讲解. 打开微信web开发者工具, ...

  7. Android—基于微信开放平台v3SDK，开发微信支付填坑。

    接触微信支付之前听说过这是一个坑,,,心里已经有了准备...我以为我没准跳坑出不来了,没有想到我填上了,调用成功之后我感觉公司所有的同事都是漂亮的,隔着北京的大雾霾我仿佛看见了太阳~~~好了,装逼结束 ...

  8. Kotlin类：功能更强、而更简洁（KAD 03）

    作者:Antonio Leiva 时间:Dec 7, 2016 原文链接:http://antonioleiva.com/classes-kotlin/ Kotlin类尽可能简单,这样用较少的代码完成 ...

  9. Android中的沉浸式状态栏效果

    无意间了解到沉浸式状态栏,感觉贼拉的高大上,于是就是试着去了解一下,就有了这篇文章.下面就来了解一下啥叫沉浸式状态栏.传统的手机状态栏是呈现出黑色条状的,有的和手机主界面有很明显的区别.这一样就在一定 ...

  10. 「译」JUnit 5 系列：环境搭建

    原文地址:http://blog.codefx.org/libraries/junit-5-setup/ 原文日期:15, Feb, 2016 译文首发:Linesh 的博客:环境搭建 我的 Gith ...