本文转载自ExtJS官网,由原作者翻译自官方文档(点击查看原文)
第一步 - 入门
想必您已经听说过 Ext、浏览了在线演示,并且尝试阅读API文档。不过,面对复杂的API文档,您却不如何下手?!
第二步 - 起步
通览过API文档,并且找到了所要立刻尝试的功能,面对混杂的网页源代码,如何开始一个简单的测试页面?那么……
不论您的目标是什么,您都可以依照本文快速的开始使用Ext。不,不用搭建服务器,您所需要的仅仅是Firefox浏览器和Firebug调试插件。如果还没有安装,那么现在就是一个好机会。
第三步 -牛刀小试
打开Ext API文档,您已经上路!
单击 F12 打开 Firebug 控制台。
如果您的 firebug 控制台处于单行模式(以 ‘>>>’ 开头),那么请单击右下角的红色上箭头以开启多行编辑模式。
输入以下代码,并敲击 Ctrl-Enter 来运行:
Ext.get(document.body).update('<div id="test"></div>');
上边这行代码的作用是将当前DOM body元素用一个ID为test的div元素替换。刚才那些API文档已经被删除,但 Ext 代码依旧生效,并且随时为您效劳。
现在,我们假设您希望简单的添加一个面板元素(Panel),但对Ext.Panel的API冗繁的说明无能为力。那么试着将这些代码添加到 firebug 的控制台中:
Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
renderTo: 'test',
width: '200px',
title: 'My Title',
html: 'My HTML content'
});
再次敲击 Ctrl-Enter 。嗨!您的面板元素已经诞生。
很好,不过如果修改一些选项呢?用下边的代码替换刚才的那些代码:
Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
renderTo: 'test',
width: '200px',
title: 'My Title',
html: 'My HTML content',
collapsible: true
});
敲击 Ctrl-Enter 。怎么样,一个可以伸缩的面板就配置好了。(注意面板右上角的小图标)
每次敲击 Ctrl-Enter ,第一行代码都会移除现有的内容,这样您就可以有一个干净的调试环境。这是一个简单的小技巧,十分方便您尝试各种配置选项。
您可以为update()函数添加所需要的 HTML 代码,无论多少。然后编写或多或少的 Javascript 来探索 Ext API。
还等什么?现在就去亲自实践 Ext Api 吧。
Ext Programmer’s API Documentation
Ext User Forums
分享到:
相关推荐
EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用
extjs资料extjs资料extjs资料extjs资料extjs资料
Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子
ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS...
xtJs已经升级到了5.0了,目前可能多数应用还在使用ExtJs 3.系列。 从开发大型的web后台或者企业管理系统来看,ExtJs3的缺陷还是比较明显的,从ExtJs4 开始引入了MVC架构,从而能够从容的组织系统的JS文件了。 从...
extjs电子书,extjs电子书,extjs电子书,extjs电子书
EXTJS实例 EXTJS树,可以编辑的EXTJS,EXTJS3.0
extJs3升级extjs4方案, extJs3升级extjs4需要修改大量代码
extjsapi,extjs文档,api手岫
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
JBPM4 SSH EXTJS JBPM SSH EXTJS JBPM4 SSH EXTJS JBPM SSH EXTJS JBPM4 SSH EXTJS JBPM SSH EXTJS JBPM4 SSH EXTJS JBPM SSH EXTJS 希望对大家有帮助。
适合ExtJs开发人员extjs技术上手以及深入
包含各种类型的extjs小图标,Extjs4小图标
一 Extjs 基础 EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) ...
里面包含Extjs 2.2和Extjs 3.2.1版本两个文件
开始ExtJS之旅的第一步是要获得开发包,可以从官方网站www.ExtJS.com下载,以保证获 得最新版本。其下载地址是http://www.ExtJS.com/download,下载成功后的开发包是ExtJS- 2.0.2.zip,有6.08MB大。不过不用担心,这...
ExtJS 是一个很不错的Ajax 框架,可以用来开发带有华丽外观的富客户端应用,ExtJS 是一个用javascript 编写,与后台技术无关的前端ajax 框架。可以把ExtJS 用在.Net、Java、Php 等各种开发语言开发的应用中。教程...
项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议
适用于ExtJS4、ExtJS5 MD5加密算法!
ExtJS 7.6 SDK trial