`
myokm123
  • 浏览: 32014 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

extjs4.0 第二课

阅读更多

      今天是学习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 。同时弹出了混合的方法,  吼吼吼~~~~大功告成,今天内容有点多,多多复习啊。 

 

 


 

    

 

     

 

 

 

 

 

  • 大小: 4.9 KB
  • 大小: 28.3 KB
  • 大小: 29.1 KB
  • 大小: 15.8 KB
  • 大小: 8.9 KB
  • 大小: 19.4 KB
  • 大小: 10.7 KB
  • 大小: 12.6 KB
  • 大小: 20.9 KB
  • 大小: 19.1 KB
分享到:
评论

相关推荐

    EXTJS4.0视频教程配套代码

    第二讲: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 开发手册源码

    "Extjs4.0 Web应用开发指南(第二版)-源代码"这本书的源码部分,不仅提供了EXTJS4.0的源代码,还提供了书中实例的实现,这对于学习EXTJS4.0的实际开发流程非常有帮助。通过对照书中的讲解和源码,开发者可以更深入地...

    EXTJS4.0视频教程 30集 下载地址

    - **下载EXTJS 4.0**:可以从官方提供的链接或第三方平台下载。 - **环境搭建**:确保本地开发环境支持HTML、CSS和JavaScript。推荐使用现代浏览器进行测试。 - **引入EXTJS**:在HTML文件中通过`&lt;script&gt;`标签引入...

    免费 Extjs4.0教程视频

    #### 第二讲:Extjs 4.0的新特性 - **新特性概览**: - MVC架构支持,使开发更加模块化、易于维护。 - 性能优化,提高渲染速度和响应性。 - 改进的布局管理器,提供更丰富的布局选项。 - 更强大的数据管理功能,...

    Extjs4.0学习指南(中文)

    ### Extjs4.0 学习指南核心知识点详解 #### 一、获取与安装Extjs4.0 **1.1 获取Extjs4.0** - **官方资源**: 访问官方网站 [http://extjs.org.cn/](http://extjs.org.cn/) 下载最新版本的Extjs4.0及相关文档和支持...

    EXTJS4.0的概述和HELLOWORD程序

    2. **MVC模式**:EXTJS4.0引入了增强的Model-View-Controller(MVC)架构,这使得代码组织更加清晰,提高了代码的可维护性和可扩展性。 3. **数据绑定**:EXTJS4.0的数据绑定机制允许UI组件与数据模型之间进行双向...

    Extjs4.0视频教程和源代码,另附文档翻译

    #### 第二讲: Extjs4.0的新特性 - **新特性概览**:介绍了Extjs4.0相对于前几个版本的主要改进之处,如新的UI组件、增强的性能、更好的响应式设计支持等。 - **演示与实践**:通过多个实例展示了这些新特性的具体...

    Extjs教程源码

    第二讲: EXTJS4.0的新特性 第三讲: EXTJS4.0数据模型——Model 第四讲: EXTJS4.0的数据代理——Proxy 第五讲: EXTJS4.0的读写器Reader, Writer 第六讲: EXTJS4.0的数据集Store 第七讲: EXTJS4.0的事件机制Event 第八...

    EXTJS4.0 教程实例~讲解

    - 可以在 `Ext.create()` 的第二个参数中指定 `Window` 组件的配置选项。这些配置选项包括但不限于 `width`、`height`、`x`、`y`、`plain` 和 `headerPosition` 等。 2. **`Window` 组件的配置选项**: - **`...

    ExtJs4.0学习指南(中文)

    ExtJS 4.0 是一个强大的JavaScript框架,用于构建富客户端Web应用程序。它提供了一整套组件、布局管理和数据绑定机制,使得开发者可以构建复杂的用户界面。本学习指南旨在帮助初学者快速掌握ExtJS 4.0的核心概念和...

    Extjs4.0学习指南(简体中文)

    3. 编写第一个ExtJS程序 创建一个名为`helloworld.js`的文件,里面包含一个简单的ExtJS应用。应用的核心是`Ext.application`方法,它定义了应用的名称和启动函数。启动函数内,我们创建了一个全屏的容器(`Ext....

    ExtJs4.0跨行合并(按照指定列合并)(Ext.net 2.0)

    文档中的"ExtJs4.0跨行合并.doc"文件应该包含了完整的代码示例和详细说明,包括如何配置GridPanel、数据源以及实现跨行合并的逻辑。建议仔细阅读这份文档,以便更好地理解和应用这个功能。 总的来说,跨行合并是...

    Extjs4.0学习指南(中文).docx

    ### Extjs4.0 学习指南 #### 一、Extjs简介与获取 Extjs是一款基于JavaScript的前端框架,用于构建复杂的Web应用程序。它提供了一系列丰富的用户界面组件和工具,帮助开发者快速创建功能强大的应用。 - **获取...

    extjs4中文视频下载地址

    #### 二、ExtJS 4.0 新特性 - **模块化架构**:ExtJS 4.0 引入了模块化架构,使得开发者可以按需加载特定的功能模块,提高了应用程序的性能。 - **主题引擎**:新增的主题引擎支持动态更换界面风格,使得应用的外观...

    web开发前端技术教程 JavaScript框架 Extjs4.0学习指南 跨浏览器的RIA框架 共225页.pdf

    ### Web开发前端技术教程:JavaScript框架Extjs4.0学习指南 #### 一、Extjs简介与初步了解 ##### 1.1 Extjs概述 Extjs是一款基于JavaScript的开源前端框架,专注于创建丰富的互联网应用程序(RIA)。它提供了一...

    MyEclipse8.5安装Spket插件支持Extjs 4.0

    2. 备份MyEclipse配置:在进行插件安装前,建议备份MyEclipse的工作空间和配置文件,以防安装过程中出现问题,能够快速恢复。 3. 安装插件:关闭MyEclipse,然后找到下载的Spket插件文件,通常是一个.zip或.jar格式...

    ExtJS Web应用程序开发指南(第2版)

    《ExtJS Web应用程序开发指南(第2版)》共18章和1个附录,是对第1版的全面升级,增补了大量ExtJS 4.0中的新特性。从基本的ExtJS功能开始讲解RIA Web开发,从而引出用户体验丰富的ExtJS技术。接着通过经典的“Hello ...

Global site tag (gtag.js) - Google Analytics