今天是学习EXTJS4.0的第二课,主要学习了6点知识,内容有点多,但是非常简单。在这里,简单的梳理一下今天的学习的6个知识点:
1、 JS类的声明和对象的创建
2、用EXTJS new 创建一个window
3、用create创建一个window,并用一个按钮进行触发显示
4、用queries异步加载JS,提高运行速度
5、用Ext.class中的config来为属性自动设置set()和get()方法
6、用Ext.class中的mixins来混合类,实现多继承
以上6点是我今天的学习内容,不多说,实践一下就知道有多简单!!!。。。。。。。。。。。
在昨天的项目中做如下添加:
添加完了 不要忘记在index.jsp中添加 lesson2.html的<a>标签哦!
在lesson2.html网页中添加如下代码。(今天调整了一下css的路径,路径按照你需要的设置即可),如下图:
这里主要是添加了一个button标签,用于触发的作用。
在createClass.js中添加如下JS代码:
在index界面中,点击 第二课 超链接 ,运行结果是:会弹出3个对话框,内容分别是:“caixen”,“123@qq.com”,“caixen---23”
好了,第一个成功! 下面进入第二个知识点。注释掉以上的代码,在下面键入以下代码:
运行一下,是不是点击 按钮 就会弹出对话框呢? O(∩_∩)O~
成功后,我们进入第三个知识点。用craete创建window窗体,不用new关键字了。。。。。
注释掉上面的代码,在下面键入:
这里运行一下,就会看到一个对话框弹出。
好了,我们进入4的一个知识点:用requires异步加载JS(要使用的时候才加载相应的JS,提高运行速度)
在这里,当我们点击按钮时,它才加载我们的 mywin.js这个js文件,没有点击时是没有加载的哦~~~
注释掉上面的代码,在下面键入如下代码:
这时,我们切换到mywin.js文件下,键入如下code:
运行一下,用浏览器跟踪一下,看是不是在点击 按钮之后,才加载的mywin.js ~~~
好了,我们终于到了5的一个知识点了:运用Ext.class中的config来为属性自动设置get()与set()方法
这个很简单,其实就是在mywin.js中加入一个config的属性,就直接可以调用了。非常方便,不用自己写方法调用。如下:
蓝色标出的就是添加的!!!!
这时我们在createClass.js下,注释掉刚刚的代码,在下面键入code如下:
是不是能弹出price啊~~~ 很简单吧。
哎。。终于到了最后一点了,使用Ext.class中的mixins来多继承。直接上图就OK!
注释掉mywin.js下载代码,重新键入code如下:
运行一下,OK 。同时弹出了混合的方法, 吼吼吼~~~~大功告成,今天内容有点多,多多复习啊。
相关推荐
第二讲:extjs4.0的新特性(附件较大做了分包压缩大家只要下载3个包运行001就ok了) [02]EXTJS4.0的新特性.003.zip (14.41M)[02]EXTJS4.0的新特性.002.zip (50.00M)[02]EXTJS4.0的新特性.001.zip 第三讲:extjs4.0...
"Extjs4.0 Web应用开发指南(第二版)-源代码"这本书的源码部分,不仅提供了EXTJS4.0的源代码,还提供了书中实例的实现,这对于学习EXTJS4.0的实际开发流程非常有帮助。通过对照书中的讲解和源码,开发者可以更深入地...
- **下载EXTJS 4.0**:可以从官方提供的链接或第三方平台下载。 - **环境搭建**:确保本地开发环境支持HTML、CSS和JavaScript。推荐使用现代浏览器进行测试。 - **引入EXTJS**:在HTML文件中通过`<script>`标签引入...
#### 第二讲:Extjs 4.0的新特性 - **新特性概览**: - MVC架构支持,使开发更加模块化、易于维护。 - 性能优化,提高渲染速度和响应性。 - 改进的布局管理器,提供更丰富的布局选项。 - 更强大的数据管理功能,...
### Extjs4.0 学习指南核心知识点详解 #### 一、获取与安装Extjs4.0 **1.1 获取Extjs4.0** - **官方资源**: 访问官方网站 [http://extjs.org.cn/](http://extjs.org.cn/) 下载最新版本的Extjs4.0及相关文档和支持...
2. **MVC模式**:EXTJS4.0引入了增强的Model-View-Controller(MVC)架构,这使得代码组织更加清晰,提高了代码的可维护性和可扩展性。 3. **数据绑定**:EXTJS4.0的数据绑定机制允许UI组件与数据模型之间进行双向...
#### 第二讲: Extjs4.0的新特性 - **新特性概览**:介绍了Extjs4.0相对于前几个版本的主要改进之处,如新的UI组件、增强的性能、更好的响应式设计支持等。 - **演示与实践**:通过多个实例展示了这些新特性的具体...
第二讲: EXTJS4.0的新特性 第三讲: EXTJS4.0数据模型——Model 第四讲: EXTJS4.0的数据代理——Proxy 第五讲: EXTJS4.0的读写器Reader, Writer 第六讲: EXTJS4.0的数据集Store 第七讲: EXTJS4.0的事件机制Event 第八...
- 可以在 `Ext.create()` 的第二个参数中指定 `Window` 组件的配置选项。这些配置选项包括但不限于 `width`、`height`、`x`、`y`、`plain` 和 `headerPosition` 等。 2. **`Window` 组件的配置选项**: - **`...
ExtJS 4.0 是一个强大的JavaScript框架,用于构建富客户端Web应用程序。它提供了一整套组件、布局管理和数据绑定机制,使得开发者可以构建复杂的用户界面。本学习指南旨在帮助初学者快速掌握ExtJS 4.0的核心概念和...
3. 编写第一个ExtJS程序 创建一个名为`helloworld.js`的文件,里面包含一个简单的ExtJS应用。应用的核心是`Ext.application`方法,它定义了应用的名称和启动函数。启动函数内,我们创建了一个全屏的容器(`Ext....
文档中的"ExtJs4.0跨行合并.doc"文件应该包含了完整的代码示例和详细说明,包括如何配置GridPanel、数据源以及实现跨行合并的逻辑。建议仔细阅读这份文档,以便更好地理解和应用这个功能。 总的来说,跨行合并是...
### Extjs4.0 学习指南 #### 一、Extjs简介与获取 Extjs是一款基于JavaScript的前端框架,用于构建复杂的Web应用程序。它提供了一系列丰富的用户界面组件和工具,帮助开发者快速创建功能强大的应用。 - **获取...
#### 二、ExtJS 4.0 新特性 - **模块化架构**:ExtJS 4.0 引入了模块化架构,使得开发者可以按需加载特定的功能模块,提高了应用程序的性能。 - **主题引擎**:新增的主题引擎支持动态更换界面风格,使得应用的外观...
### Web开发前端技术教程:JavaScript框架Extjs4.0学习指南 #### 一、Extjs简介与初步了解 ##### 1.1 Extjs概述 Extjs是一款基于JavaScript的开源前端框架,专注于创建丰富的互联网应用程序(RIA)。它提供了一...
2. 备份MyEclipse配置:在进行插件安装前,建议备份MyEclipse的工作空间和配置文件,以防安装过程中出现问题,能够快速恢复。 3. 安装插件:关闭MyEclipse,然后找到下载的Spket插件文件,通常是一个.zip或.jar格式...
《ExtJS Web应用程序开发指南(第2版)》共18章和1个附录,是对第1版的全面升级,增补了大量ExtJS 4.0中的新特性。从基本的ExtJS功能开始讲解RIA Web开发,从而引出用户体验丰富的ExtJS技术。接着通过经典的“Hello ...