一步一步翻译,解说extjs4-------------Getting Started
来源:互联网 发布:手机淘宝整点购买技巧 编辑:程序博客网 时间:2024/06/10 11:58
1. 要求
1.1 浏览器
Ext JS 4 支持大多主流的浏览器(Ie6~chrome),在开发时,建议选择以下几种浏览器(with debuger)
- Google Chrome 10+
- Apple Safari 5+
- Mozilla Firefox 4+ with the Firebug Web 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 sdkresources
:存放CSS和IMAGE 也保含xml 和json等静态数据index.html
:主页app.js
:应用程序逻辑
目录结构不一定同时建立完成.现在我们建立一个小的可运行的应用程序. 起名叫"helloext". 建立如下的目录和文件.
Then unzip the Ext JS 4 SDK to a directory named- helloext - app.js - index.html
extjs
in the helloext
directory解压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
-此文件包含整个Ext JS库。这可以有助于缩短您最初的学习曲线,然而在大多数情况下,实际的应用程序开发的首选EXT- debug.js。ext-all.js -这是一个缩小的版本,可以在生产环境中使用,然而,这是不建议,因为大多数应用将不会使用它包含的所有类。
- 一步一步翻译,解说extjs4-------------Getting Started
- 一步一步翻译,解说extjs4-----------------初识
- 一步一步翻译,解说extjs4-------------Class System
- mongoose getting started 翻译
- Hive官方手册翻译(Getting Started)
- React中文教程翻译文档 - Getting Started
- Apache ZooKeeper Getting Started Guide 翻译
- Xamarin Getting Started系列翻译一
- Xamarin Getting Started翻译系列八--许可
- [翻译]jMock Getting Started(jMock起步)
- Android官方文档翻译 一 Getting Started
- 翻译 DBFlow Getting Started 入门指南
- JNI官方文档翻译2-Getting Started
- 组复制官方文档翻译(Getting Started)
- Unity说明文档翻译-Getting Started
- Firebase Tutorial: Getting Started 教程翻译
- Getting started
- Getting Started
- ubuntu安装tftp, nfs等
- OpenCV学习笔记(四十三)——存取像素值操作汇总core
- log4j讲解
- gsoap c++ 通过WebService(asp.net)上传文件
- 恼人的伪bug!
- 一步一步翻译,解说extjs4-------------Getting Started
- 最小树形图
- Flash Player 11异步解码Bitmap
- 北京2011下半年软考成绩出来啦
- jar包
- 用一个简单示例来说明C#中的继承、封装和多态
- 如何获取前几天的日期时间值
- Android ADB命令整理
- PPT制作