`
dayone
  • 浏览: 366242 次
  • 性别: Icon_minigender_1
  • 来自: xian
社区版块
存档分类
最新评论

Ext学习入门及资料

阅读更多

【附件】ExtJs学习资料(包括:EXT+中文手册.chm、电子书、实例等)

 

转载自Ext中文社区:http://extjs.com/learn/Tutorial:Playing_With_Ext_The_Easy_Way_(Chinese)

 

EXT新手建议:建立自己的工具箱(Toolkit)

我认为学习EXT开发最好的方法是,在真正开发之前,掌握好高级JavaScript知识, 就像鱼儿游在水里一样对JS运用自如。

自己可以创建JavaScript的类、明白类原型(class's prototype)的原理, 和明白函数的作用域都是有益的帮助。 明白Ajax为什么要异步方式也是其中的一个知识点。

论坛上50%所提出的问题很大原因是对JavaScript知识不牢固所至,而不是EXT API的问题。 当真正开始用EXT做开发了,那么安装目录下examples/*的文件夹超过70个例子便是研究的好对象, 这些例子为你展示了你日后将会使用的大多数技巧或方法。 接着,最好就是先拿examples/*的文件夹中例子练一练手,做一些简单、轻型的小项目。 如果直接拿EXT结合到程序去开发,很可能你会因为越来越复杂的问题泥足深陷。

把每一项的 知识点/技巧 都做成可单独运行文件,这样以便你以后参考,还有一个好处是,可以发到论坛上,然后我们放到examples/*的文件夹,以便我们的测试并协助你。 如果能按照以上的建议去做,我相信这是一个很好的累积。而且按照我的角度看,整个UI就是这样一点一点构建起来。

 

 

第一步 - 入门

想必您已经听说过 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学习资料 20篇详细学习笔记 初学者ext学习的文档

    这份"ext学习资料 20篇详细学习笔记 初学者ext学习的文档"是针对EXT初学者的一份宝贵资源,旨在帮助初学者快速入门EXT开发。 EXT的学习通常包括以下几个核心部分: 1. **EXT基础**:首先,你需要了解EXT的基本概念...

    Ext JS学习资料

    ### Ext JS 学习资料详解 #### 一、Ext JS 概述 Ext JS 是一款基于 JavaScript 的前端框架,主要用于构建复杂的企业级 Web 应用程序。它提供了一套丰富的 UI 组件库以及一系列用于数据处理、应用架构设计等功能...

    Ext学习资料适合入门

    【标题】与【描述】中提到的"Ext学习资料适合入门"是指ExtJS框架的学习资源,适合初学者使用。ExtJS是一个用于构建富客户端Web应用的JavaScript库,它提供了丰富的组件和API,能够帮助开发者创建功能强大的交互式...

    EXT 2.0学习资料

    EXT 2.0学习资料 关于EXT的基本入门学习的PDF

    EXT学习,入门资料

    Ext学习,入门教程,由浅入深,不断更新中。。。。

    最好的gwt-ext学习资料

    尤其对于初学者而言,Gwt-Ext不仅简化了复杂的前端开发流程,还提供了丰富的组件和API,使其成为学习和实践RIA开发的理想之选。 #### Gwt-Ext概述 Gwt-Ext的核心优势在于其对GWT和ExtJs的深度融合。GWT作为一套...

    gwtext学习三部曲

    无论是对GWT感兴趣的新手,还是希望提升GWT Ext使用技能的开发者,这份《gwtext学习三部曲》都将是一份宝贵的参考资料。 通过这份资料,你可以系统地掌握gwtext和GWT Ext的核心技术,提升你的GWT开发能力,为构建...

    EXT框架入门学习及总结

    学习EXT的入门知识和实际应用指南 为格式DOC文档

    Ext Demo, Ext学习入门

    Ext Demo 是一个专门为初学者设计的 ExtJs 学习资源,它涵盖了 ExtJs 的基本概念、组件使用以及与其他技术如 Spring 和 Struts2 的集成。这个压缩包中的 ChatRoom 文件很可能是实现了一个简单的聊天室应用,以此来...

    不错ext学习网站~~~~~

    在探讨“不错ext学习网站”这一主题时,我们首先需要明确“ext”在这里指的是什么。在IT领域,“ext”通常与Linux文件系统有关,比如ext2、ext3、ext4等,但根据提供的链接和上下文,这里的“ext”更可能指的是Ext ...

    ext JS 源码和学习资料

    本压缩包包含EXT JS的多个版本源码,如ext-3.2.0、ext3.3.1和ext4,以及对应的中文API文档和实用学习资料,对于想要深入理解EXT JS或提升EXT JS开发技能的人来说是宝贵的资源。 一、EXT JS 源码分析 EXT JS 的源码...

    ext 学习资料

    本篇内容基于一位经验丰富的开发者分享的学习资料——《Ext JS 6 By Example》,该资料详细介绍了Ext JS 6的核心概念和使用方法,旨在帮助初学者快速上手并深入理解Ext JS 6的各项特性。 #### 二、Ext JS 的优势 1...

    ext js资料 ext基础

    ext 学习资料 ext基础知识,基础教程。

    ext PPT,EXT 教程,EXT 中文帮助手册,EXT 中文手册,ext_教程(入门到精通),Ext技术程序文档大全.

    4. **EXT学习文档**:这份文档可能提供了EXT的进阶学习路径,包括性能优化、无障碍访问性(Accessibility)以及EXT与其他技术(如PHP、Java等后端框架)的集成。 5. **EXT技术程序文档大全**和**ext_教程(入门到...

    ext开发学习的好资料

    可作为ext学习的基础资料。详细介绍了ext的开发的主要内容。是学习ext的好资料。

    Ext2.0学习入门

    资源名称:Ext2.0学习入门资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

    ext学习手册(中英文版)

    "EXT学习手册"是针对EXT库的学习资源,分为中英文两个版本,主要涵盖了EXT的常用方法、属性以及整个EXT框架的介绍。对于初学者和有经验的开发者来说,这都是一个非常有价值的参考资料。 CHM(Compiled HTML Help)...

Global site tag (gtag.js) - Google Analytics