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



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

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

组件最常见的几项功能包含initComponent()、render()、show()和hide(),无论是哪一种组件都是通过初始化、渲染、显示、隐藏来实现其整个生命周期的。PVj思考者日记网-束洋洋个人博客

作为基类Ext.Component本身不包含任何格式,我们需要在使用时为它指定渲染的HTML内容,通过HTML参数传入。PVj思考者日记网-束洋洋个人博客

下面给个例子:PVj思考者日记网-束洋洋个人博客

<%@ 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:absolute',  
        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>

 PVj思考者日记网-束洋洋个人博客

 PVj思考者日记网-束洋洋个人博客

QQ截图20131106230131.jpgPVj思考者日记网-束洋洋个人博客

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

QQ截图20131106230406.jpgPVj思考者日记网-束洋洋个人博客

Ext4.2运用了扁平化的设计,我很喜欢。希望学习愉快!PVj思考者日记网-束洋洋个人博客

 PVj思考者日记网-束洋洋个人博客

ExtJS4.2全部章节汇总目录


 PVj思考者日记网-束洋洋个人博客

ExtJS4.2学习(一)Ext自定义类PVj思考者日记网-束洋洋个人博客

ExtJS4.2学习(二)Ext统一组件模型PVj思考者日记网-束洋洋个人博客

ExtJS4.2学习(三)Grid表格PVj思考者日记网-束洋洋个人博客

ExtJS4.2学习(四)Grid表格中文排序问题PVj思考者日记网-束洋洋个人博客

ExtJS4.2学习(五)表格渲染与复选框PVj思考者日记网-束洋洋个人博客

ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据PVj思考者日记网-束洋洋个人博客

ExtJS4.2学习(七)EditorGrid可编辑表格PVj思考者日记网-束洋洋个人博客

ExtJS4.2学习(八)表格限制输入数据的类型PVj思考者日记网-束洋洋个人博客

ExtJS4.2学习(九)属性表格控件PropertyGridPVj思考者日记网-束洋洋个人博客

ExtJS4.2学习(10)分组表格控件--GroupingGridPVj思考者日记网-束洋洋个人博客

ExtJS4.2学习(11)可拖放的表格PVj思考者日记网-束洋洋个人博客

ExtJS4.2学习(12)基于表格的右键菜单PVj思考者日记网-束洋洋个人博客

ExtJS4.2学习(13)基于表格的扩展插件---rowEditingPVj思考者日记网-束洋洋个人博客

ExtJS4.2学习(14)基于表格的扩展插件(2)PVj思考者日记网-束洋洋个人博客

ExtJS4.2学习(15)树形表格PVj思考者日记网-束洋洋个人博客

 ExtJS4.2学习(16)制作表单PVj思考者日记网-束洋洋个人博客

ExtJS4.2学习(17)表单基本输入控件Ext.form.FieldPVj思考者日记网-束洋洋个人博客

 ExtJS4.2学习(18)时间控件PVj思考者日记网-束洋洋个人博客

 ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditorPVj思考者日记网-束洋洋个人博客

ExtJS4.2学习(20)动态数据表格之前几章总结篇1 PVj思考者日记网-束洋洋个人博客

 ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2PVj思考者日记网-束洋洋个人博客

ExtJS4.2学习(22)登录界面PVj思考者日记网-束洋洋个人博客

ExtJS4.2学习(23)textFiled后追加按钮PVj思考者日记网-束洋洋个人博客

ExtJS4.2学习(24)TreeStore使用详解PVj思考者日记网-束洋洋个人博客

ExtJS4.2学习(25)终结篇,实战项目PVj思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  • 感谢主机屋提供网站空间;
  • 感谢万网阿里云提供域名解析;
  • 感谢EmpireCMS提供CMS系统;
  • 感谢bootstrap展示本站前端页面;
  • 感谢Glyphicons Halflings提供字体;
  • 感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈