ExtJS4.2学习(二)Ext统一组件模型-阿里云开发者社区

ExtJS4.2学习(二)Ext统一组件模型

2014-02-17 860

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 学而不思则罔，思而不学则殆。虽然Ext组件拥有几乎完美的对象继承模型，但是这毕竟属于底层架构的一部分，我们日常开发时候接触最多的还是各种组件与布局，通过组件、布局的各种组合最终才形成了功能强劲的应用，所以有必要首先对Ext的组件模型有所了解。

学而不思则罔，思而不学则殆。虽然Ext组件拥有几乎完美的对象继承模型，但是这毕竟属于底层架构的一部分，我们日常开发时候接触最多的还是各种组件与布局，通过组件、布局的各种组合最终才形成了功能强劲的应用，所以有必要首先对Ext的组件模型有所了解。

Ext中所有的可视组件都继承自Ext.component，这种单根继承的模型保证所有组件都拥有相同的通用方法与生命周期，这样在后续对这些组件进行维护管理时将更加便捷，同时也保证了在进行布局时的便利。

组件最常见的几项功能包含initComponent()、render()、show()和hide()，无论是哪一种组件都是通过初始化、渲染、显示、隐藏来实现其整个生命周期的。

作为基类Ext.Component本身不包含任何格式，我们需要在使用时为它指定渲染的HTML内容，通过HTML参数传入。

下面给个例子：

 
         <code id=
         "code0"
         ><%@ page language=
         "java" 
         contentType=
         "text/html; charset=UTF-8"
         pageEncoding=
         "UTF-8"
         %> 
        
         <!DOCTYPE html PUBLIC 
         "-//W3C//DTD HTML 4.01 Transitional//EN"
         "http://www.w3.org/TR/html4/loose.dtd"
         > 
        
         <html> 
        
         <head> 
        
         <meta http-equiv=
         "Content-Type" 
         content=
         "text/html; charset=UTF-8"
         > 
        
         <title>Hello Extjs4.2</title> 
        
         <link href=
         "../ExtJS4.2/resources/css/ext-all-neptune.css" 
         rel=
         "stylesheet"
         > 
        
         <!-- <script src=
         "../ExtJS4.2/locale/ext-lang-zh_CN.js"
         ></script> --> 
        
         <script src=
         "../ExtJS4.2/ext-all.js"
         ></script> 
        
         <script type=
         "text/javascript"
         > 
        
         /* Start ExtJS 中自定义类 **/ 
        
         //整体生命周期为：初始化、渲染、显示、隐藏 
        
         /*Ext.onReady(function(){ 
        
         var box = new Ext.Panel({ 
        
         el: 'test', 
        
         title:'测试标题', 
        
         floating:true, 
        
         draggable:true, 
        
         html:'测试内容', 
        
         pageX:100, 
        
         pageY:50, 
        
         width:200, 
        
         height:150 
        
         }); 
        
         box.render(); 
        
         });*/ 
        
         Ext.onReady(
         function
         (){ 
        
         var 
         box = 
         new 
         Ext.Component({ 
        
         el: 
         'test'
         , 
        
         style:
         'background-color:red;position:absoulte'
         , 
        
         pageX:100, 
        
         pageY:50, 
        
         width:200, 
        
         height:150 
        
         }); 
        
         box.render(); 
        
         }); 
        
         /* END ExtJS 中自定义类 **/ 
        
         </script> 
        
         </head> 
        
         <body> 
        
         <h1>我的ExtJS4.2学习之路</h1> 
        
         <hr /> 
        
         作者：束洋洋 
        
         开始日期：2013-11-05 22:35:38 
        
         <h2>深入浅出Extjs之统一的组件模型</h2> 
        
         <div id=
         "test"
         ></div> 
        
         </body> 
        
         </html>  </code>