一步一步翻译,解说extjs4-------------Getting Started -

guoqingcun

浏览: 55671 次
性别:
来自: 北京

最近访客更多访客>>

ringphone

coollyj

sf89902728

xieh1989

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

一步一步翻译,解说extjs4-------------Getting Started

博客分类：

开发技术

extjs json 框架

1. 要求

1.1 浏览器

Ext JS 4 支持大多主流的浏览器（Ie6~chrome）,在开发时，建议选择以下几种浏览器(with debuger)

Google Chrome10+
Apple Safari5+
Mozilla Firefox4+ with theFirebugWeb Development Plugin

此教程是以Chrome做为开发浏览器。如果你还没有安装Chrome,您需要花点时间安装在本机，再稍微熟悉Chrome的开发工具.

1.2 Web 服务器

安装Apache HTTP Server.

Instructions for installing Apache on Windows
Instructions for installing Apache on Linux
Mac OS X comes with a build in apache installation which you can enable by navigating to "System Preferences > Sharing" and checking the box next to "Web Sharing".

验证安装是否可用，在浏览器中打开localhost. 会看到一个启动页面，说明server已经开装成功.

1.3. Ext JS 4 SDK（）

下载Ext JS 4 SDK.且解压到一个指定目录. 如果你不确定web根目录在哪, 查看服务器手册. 你的web服务器根目录依赖你的操作系统,如果你使用的是Apache服务器，则目录位置如下:

Windows - "C:\Program Files\Apache Software Foundation\Apache2.2\htdocs"
Linux - "/var/www/"
Mac OS X - "/Library/WebServer/Documents/"

如果你安装成功，在浏览器中打开http://localhost/extjs/index.html.如果你看到Extjs4的欢迎界面，说明你已经安装成功.

2. 应用的结构

2.1 基本结构

虽然不是强制性的，下面所列建议，应视为最佳做法，更好的组织您的应用程序，保证更好的扩展性和可维护性。下面是Ext JS的应用程序推荐的目录结构

- appname
    - app
        - namespace
            - Class1.js
            - Class2.js
            - ...
    - extjs
    - resources
        - css
        - images
        - ...
    - app.js
    - index.html

appname：存放全部源代码
app：存放自定义类
extjs：extjs 4 sdk
resources:存放CSS和IMAGE 也保含xml 和json等静态数据
index.html：主页
app.js：应用程序逻辑

目录结构不一定同时建立完成.现在我们建立一个小的可运行的应用程序. 起名叫"helloext". 建立如下的目录和文件.

- helloext
    - app.js
    - index.html

Then unzip the Ext JS 4 SDK to a directory namedextjsin thehelloextdirectory

解压Extjs4且放在helloext的指定目录下，给这个目录起个名叫extjs

编辑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框架所的有样式
extjs/ext-debug.js：extjs最小的可调式代码库
app.js：自定义代码

现在可以写自己的代码。打开app.js写入如下代码：

Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    title: 'Hello Ext',
                    html : 'Hello! Welcome to Ext JS.'
                }
            ]
        });
    }
});

现在打开http://localhost/helloext/index.html。你将看到一个带有“Hello Ext”标题且内容是"welcome"的panel.

2.2 动态载入

打开Chrome 开发工具，单击Console选项.刷新页面，在Console中会看到一个警告信息.看起来像：

在实例化Ext.container.Viewport时，需要加载Viewport.js文件，所以会出现很小的延迟。如果多次create实例，会出现更长的延迟。所以出现上上面的警告提示信息.

在Ext.application这行上面加入如下代码，可以解决问题:

Ext.require('Ext.container.Viewport');

2.3 库共享方法

在解压Extjs4时，你会看到如下文件:

ext-debug.js：开发时用.
ext.js：上线时使用。已经保含了ext-all.js
ext-all-debug.js-此文件包含整个ExtJS库。这可以有助于缩短您最初的学习曲线，然而在大多数情况下，实际的应用程序开发的首选EXT-debug.js。
ext-all.js-这是一个缩小的版本,可以在生产环境中使用，然而，这是不建议，因为大多数应用将不会使用它包含的所有类。

分享到：

Extjs3.3.1 实现翻页后，可记录已经选择的 ... | 一步一步翻译，解说extjs4---------------- ...

2012-01-17 17:55
浏览 957
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

一步一步翻译,解说extjs4-------------Getting Started

1. 要求

1.1 浏览器

1.2 Web 服务器

1.3. Ext JS 4 SDK（）

2. 应用的结构

2.1 基本结构

2.2 动态载入

2.3 库共享方法

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

一步一步翻译,解说extjs4-------------Getting Started

1. 要求

1.1 浏览器

1.2 Web 服务器

1.3. Ext JS 4 SDK（）

2. 应用的结构

2.1 基本结构

2.2 动态载入

2.3 库共享方法

评论

发表评论

相关推荐

extjs3.3 itemselector组件不显示滚动条问题？

extjs 中ie和其它浏览器处理小差异

MyBatis insert操作返回主键 (db2)

extjs3.3 双行tbar的实现

一步一步翻译，解说extjs4-----------------初识

一步一步翻译,解说extjs4-------------Class System

Hibernate使用SchemaExport和AnnotationConfiguration生成表结构

NHibernate(面向.net)之旅：初探SchemaExport工具使用(本文与Hibernate无异)

用sql语句怎么知道一个表的字段信息--------db2

Extjs3.3.1 实现翻页后，可记录已经选择的选项

最近访客更多访客>>