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

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

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


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


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


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


下面给个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<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>

7d0e7736426faf4a261d8d567444c490.jpg

上为例子显示效果。注释部分为第二个效果,Ext.Panle是Ext中经常用到的一个组件,它直接继承自Ext.Container。与上面些组件不同的是,Ext.panel无须继承就可以直接使用。下图为效果:

4f1f95b21cf1ca6819e65f39f3a33f15.jpg

Ext4.2运用了扁平化的设计,我很喜欢。希望学习愉快!

连载中,请大家继续关注!本文出自我的个人网站思考者日记网

本文出自 “On My Way” 博客,请务必保留此出处http://shuyangyang.blog.51cto.com/1685768/1329021

相关文章
|
JavaScript 前端开发 测试技术
ExtJS前端实现过程
从无到有的实现过程
1958 0
|
Web App开发 JavaScript 测试技术
|
JavaScript 测试技术 容器
ExtJS组件 的代码和运行效果
已经决定前端还是要介入,原因有两个: 1.显得专业,原因么,你懂得; 2. 不想做无用功; 本来想用VUE但是毕竟,人家已经用了Ext,咱们不能落下。 ExtJS 这个技术呢,有个包,有个开发环境,也有Doc或者API之类的。
1726 0
|
JavaScript 前端开发 数据格式
《Ext JS实战》——1.3 框架概览
Web远程调用是一种让JavaScript可以(远程地)执行服务器端定义的方法的一种手段,也叫做远程过程调用或者RPC。对于那些希望把服务器端的方法暴露给客户端,又不想被烦人的Ajax方法管理所困扰的开发环境来说,Web远程调用是很方便的。
1790 0