6、手把手教你Extjs5(六)继承自定义一个控件
Extjs的开发都可以遵循OOP的原则,其对类的封装也很完善了。自定义一个控件最简单的办法就是继承一个已有的控件。根据上一节的需要,我做了一个Button的子类。首先根据目录结构,在app目录下建立一个ux目录,将自定义控件都放在这个目录下。在ux目录下建立一个文件ButtonTransparent.js。
/**
* 定义了一个背景透明的Button类,继承于Button
*/
Ext.define('app.ux.ButtonTransparent', {
extend: 'Ext.button.Button', // 继续于Ext.button.Button
alias: 'widget.buttontransparent', // 此类的xtype类型为buttontransparent
// 类初始化时执行
initComponent: function () {
// 设置事件监听
this.listeners = {
// 鼠标移开,背景设置透明
mouseout: function () {
this.setTransparent(document.getElementById(this.id));
},
// 鼠标移过,背景取消透明
mouseover: function () {
var b = document.getElementById(this.id);
b.style.backgroundImage = '';
b.style.backgroundColor = '';
b.style.borderColor = '';
},
// 背景设置透明
afterrender: function () {
this.setTransparent(document.getElementById(this.id));
}
}; this.callParent(arguments); // 调用你模块的initComponent函数
}, setTransparent: function (b) {
b.style.backgroundImage = 'inherit';
b.style.backgroundColor = 'inherit';
b.style.borderColor = 'transparent';
}
});
这个类继续于Button,只加入了3个事件,当鼠标移到此控件上的时候显示背景,鼠标移开过后背景设置为透明。afterrender事件表示在此控件渲染后执行透明。此控件完成之后,需要在Top和Button中引入此文件,并且设置items中控件的默认xtype为buttontransparent。
在Top.js中加入以下几条语句:
uses : ['app.ux.ButtonTransparent'],
defaults : {
xtype : 'buttontransparent'
},
uses引入该控件,defaults属性将会把xtype的值赋给items中创建的类中(如果没有指定xtype)。这样下面的代码都不用改,所有的原来是button的类,都会被指定为ButtonTransparent类。Button.js中同样加入这二个属性值即可。
现在的界面如下:
下面完成另外一个功能,可以隐藏和显示顶部区域和底部区域。
在底部区域的最后一个位置加一个按钮,按下之后,将隐藏顶部和底部区域,同时在最右上角显示一个可以显示顶部和底部的控件。
在Top.js的items的最后部分加上一个按钮,指定handler事件
{
glyph : 0xf102,
handler : 'hiddenTopBottom',
tooltip : '隐藏顶部和底部区域'
}
在MainController.js中加入二个函数:
// 隐藏顶部和底部的按钮事件
hiddenTopBottom : function() {
// 如果要操纵控件,最好的办法是根据相对路径来找到该控件,用down或up最好,尽量少用getCmp()函数。
this.getView().down('maintop').hide();
this.getView().down('mainbottom').hide();
if (!this.showButton) { // 显示顶部和底部的一个控件,在顶部和底部隐藏了以后,显示在页面的最右上角
this.showButton = Ext.widget('component', {
glyph : 0xf013,
view : this.getView(),
floating : true,
x : document.body.clientWidth - 32,
y : 0,
height : 4,
width : 26,
style : ' color: black;">,
listeners : {
el : {
click : function(el) {
var c = Ext.getCmp(el.target.id); // 取得component的id值
c.view.down('maintop').show();
c.view.down('mainbottom').show();
c.hide();
}
}
}
})
};
this.showButton.show();
}, // 如果窗口的大小改变了,并且顶部和底部都隐藏了,就要调整显示顶和底的那个控件的位置
onMainResize : function() {
if (this.showButton && !this.showButton.hidden) {
this.showButton.setX(document.body.clientWidth - 32);
}
}
加了上述代码之后,可以控制底部和底部区域的显示与隐藏。
6、手把手教你Extjs5(六)继承自定义一个控件的更多相关文章
- ExtJs5_继承自定义一个控件
Extjs的开发都可以遵循OOP的原则,其对类的封装也很完善了.自定义一个控件最简单的办法就是继承一个已有的控件.根据上一节的需要,我做了一个Button的子类.首先根据目录结构,在app目录下建立一 ...
- iOS开发之通过代码自定义一个控件
关于控件的继承关系(面试重点): (1)所有的控件都继承自UIView. (2)能监听事件的都是先继承自UIControl,UIControl再继承自UIView.比如UIButton. (3)能整体 ...
- WPF 自定义一个控件,当点击按钮是触发到ViewModel(业务逻辑部分)和Xaml路由事件(页面逻辑部分)
#region - 用于绑定ViewModel部分 - public ICommand Command { get { return (ICommand)GetValue(CommandPropert ...
- 20、手把手教你Extjs5(二十)模块Grid的多列表方案
对于有很多字段的模块在一个grid中显示所有的字段,会显得很臃肿,对于不同的用户其侧重的字段类型也不尽相同,因此就有必要为Grid的列表设计多个方案.在这个自定义系统进行设计的时候,我已经将这部分内容 ...
- 15、手把手教你Extjs5(十五)各种Grid列的自定义渲染
Grid各列已经能够展示出来了.列的类型包括字符型,整型,浮点型,货币型,百分比型,日期型和布尔型,我自定义了各种类型的渲染样式: 1.整型:标题栏居中,数值靠右显示,正数颜色为蓝色,负数颜色为红色, ...
- 24、手把手教你Extjs5(二十四)模块Form的自定义的设计[3]
自定义的Form已经可以运行了,下面改一下配置,把Form里面的FieldSet放在Tab之下.修改一下ModuleModel.js中的data下的tf_FormSchemes下的方案,增加一个属性. ...
- 25、手把手教你Extjs5(二十五)Extjs5常用组件--form的基本用法
Extjs Form是一个比较常用的控件,主要用来显示和编辑数据的,今天这篇文章将介绍Extjs Form控件的详细用法,包括创建Form.添加子项.加载和更新数据.验证等. Form和Form Ba ...
- 【转】手把手教你把Vim改装成一个IDE编程环境(图文)
手把手教你把Vim改装成一个IDE编程环境(图文) By: 吴垠 Date: 2007-09-07 Version: 0.5 Email: lazy.fox.wu#gmail.com Homepage ...
- Android自定义日历控件(继承系统控件实现)
Android自定义日历控件(继承系统控件实现) 主要步骤 编写布局 继承LinearLayout设置子控件 设置数据 继承TextView实现有圆圈背景的TextView 添加Attribute 添 ...
随机推荐
- thunk技术
Thunk : 将一段机器码对应的字节保存在一个连续内存结构里, 然后将其指针强制转换成函数. 即用作函数来执行,通常用来将对象的成员函数作为回调函数. #include "stdafx.h ...
- NSIndexPath 延伸
转载自:http://my.oschina.net/u/2560887/blog/602095?fromerr=Dy4vj5Jd 这个类的实例描述了一个嵌套数组中特定节点的路径,一般叫做索引路径.1. ...
- LoadRunner 技巧之协议分析(五)
在做性能测试的时候,协议分析是困扰初学者的难题,选择错误的协议会导致Virtual User Generator 录制不到脚本:或录制的脚本不完整,有些应用可能需要选择多个协议才能完整的记录 客户端与 ...
- oracle10g遇到ORA-16038日志无法归档问题
SQL> shutdown immediate ORA-01109: 数据库未打开 已经卸载数据库. ORACLE 例程已经关闭. SQL> startup ORACLE 例程已经启动. ...
- 快学Scala-第九章 文件和正则表达式
知识点: 1.读取文件中的所有行,可以调用scala.io.Source对象的getLines方法: import scala.io.Source val source = Source.from(& ...
- Oracle Sql优化之Merge 改写优化Update
1.待改写语句如下 update table1 f )),) ,),)), f.jine2 )),) from table2 e where e.kjqj=f.kjqj=e.gs=f.gs and e ...
- hdu_2222_Keywords Search(AC自动机板子)
题目连接:hdu_2222_Keywords Search 存个自己写的AC自动机 #include<cstdio> #include<cstring> #define F(i ...
- java工程开发之图形化界面之(第五课)
下面我们将: 一)更加完整的解释Graphics类 二)使用方法来更清晰的重新编写前面图形小应用程序之一 三)介绍一些其他的绘图的方法 四)介绍方法init,它是类似于paint但是用于不同用途的另一 ...
- Struts2 语法--action
xml的注释: <!--叨叨叨叨--> web.xml注释格式": <?xml version="1.0" encoding="UTF-8&q ...
- 2016大连网络赛 Weak Pair
Weak Pair Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others) Prob ...