/**
* 定义图片按钮
*
* @param {}
* cfg
*/
Ext.ux.ImageButton = function(cfg) {
Ext.ux.ImageButton.superclass.constructor.call(this, cfg);
};
Ext.extend(Ext.ux.ImageButton, Ext.Button, {
url : this.url || "",
// disabled : false,
imgWidth : 20,
imgHeight : 20,
onRender : function(ct, position) {
this.disabledImgPath = this.disabledImgPath || this.imgPath;
var tplHTML = '<div id="{id}" class="imageBtn_item"><table border="0" cellpadding="0" cellspacing="0" '
+ ' class="bossTool-x-btn-wrap">'
+ '<tbody><tr>'
+ ' <td class="bossTool-x-btn-left"><i> </i></td>'
+ ' <td class="bossTool-x-btn-center"><em unselectable="on">'
+ ' <img id="{id}_img" src="{imgPath}" border="0" '
+ ' width="{imgWidth}" height="{imgHeight}"'
+ ' style="cursor: {cursor};background:transparent"/>'
+ ' </em></td>'
+ ' <td class="bossTool-x-btn-right"><i> </i></td>'
+ '</tr>'
+ '<tr><td class="toolbtnText" colspan="3" align="center">{imgText}</td></tr>'
+ '</tbody></table></div>';
var tpl = new Ext.Template(tplHTML);
var btn, targs = {
imgPath : this.disabled ? this.disabledImgPath : this.imgPath,
imgWidth : this.imgWidth || "",
imgHeight : this.imgHeight || "",
imgText : this.text || "",
cursor : this.disabled ? "default" : "pointer",
// tooltip : this.tooltip || "",
id : this.id || "_image_default_id" + getImageId()
};
btn = tpl.append(ct, targs, true);
btn.on("click", this.onClick, this);
if (this.cls) {
btn.addClass(this.cls);
}
this.el = btn;
if (this.hidden) {
this.hide();
}
new Ext.ToolTip({
target : this.id,
html : this.tooltip
});
},
disable : function(newImgPath) {
var replaceImgPath = newImgPath || this.disabledImgPath;
if (replaceImgPath) {
// this.el.dom.firstChild.src = replaceImgPath;
Ext.fly(this.id + "_img").dom.src = replaceImgPath;
Ext.fly(this.id + "_img").dom.style.cursor = "default";
}
this.disabled = true;
},
enable : function(newImgPath) {
var replaceImgPath = newImgPath || this.imgPath;
if (replaceImgPath) {
// this.el.dom.firstChild.src = replaceImgPath;
Ext.fly(this.id + "_img").dom.src = replaceImgPath;
Ext.fly(this.id + "_img").dom.style.cursor = "pointer";
}
this.disabled = false;
}
});
Ext.reg('imagebutton', Ext.ux.ImageButton);
CSS如下:
.imageBtn_item{
padding-top:15px;
padding-bottom:10px;
}
.bossTool-item-wrapper{
margin:5px;
padding:5px;
}
.bossTool-x-btn-center {
/*background:transparent url(../images/button/button_center.gif) repeat-x;*/
font-size:12px;
/*text-align:center;*/
vertical-align:middle;
white-space:nowrap;
background-position:0;
/*height:23px;
width : 75px;*/
}
.bossTool-x-btn-right{
/*background:transparent url(../images/button/button_right.gif) no-repeat;*/
width:3px;
background-position:center right;
height:23px;
}
.bossTool-x-btn-left {
/*background:transparent url(../images/button/button_left.gif) no-repeat;*/
width:3px;
background-position:0;
height:23px;
}
.bossTool-x-btn-text{
background-position:center;
background-repeat:no-repeat;
font-size:12px;
color:#FFFFFF;
cursor:pointer;
white-space:nowrap;
padding:0;
}
.bossTool-x-btn em {
font-size:12px;
font-style:normal;
font-weight:normal;
}
.bossTool-x-btn-center em {
font-size:12px;
font-style:normal;
font-weight:normal;
}
.toolbtnText{
font-weight:bold;
text-align :center;
}
分享到:
相关推荐
WPF自定义图片按钮[ImageButtonWPF] 更多资源: http://cleopard.download.csdn.net
android下的自定义图片按钮,ImageButton
android 自定义图片按钮 很实用
VS2008 使用VB.Net 开发基于wince6.0系统的自定义图片按钮控件
1.ExtJS自定义组件,图片按钮为例. 2.此图片按钮背景完全为图片,没有边框,需要使用者提供2张图片,一张初始化用,一张点击后用,可在'imgPaths:'属性里填写,格式为'01.jpg~02.jpg' 3.解压后请将所有附件放置您extjs...
课时210【Python+VBA混合开发】【自定义按钮工具栏】4.自定义图片按钮.mp4
Android开发小知识_在Android中使用自定义图片按钮
自定义按钮,可设置为纯文本 、纯图片,或者文本和图片的组合,可自定义文本和图片的对齐方式。文本颜色 、边框也可自定义。适合用来做导航按钮 、操作按钮等。源码借鉴大神,是在大神的基础上做了一些修改。
C#实现 WINCE 用户控件的应用和实现
ckeditor_4.x 基于4.x版的自定义按钮控件 可自定义图片按钮、文本按钮 - 详细配置
用自定义图片上传按钮代替原来的图片上传按钮,实现即时上传插入。覆盖原ckeditor。修改ckeditor.js中imgupload()的上传接口路径。根据接口返回自定义 success: function 中的代码解析出图片路径。
mfc自定义按钮代码实现,实现图片按钮代码
Example: ButtonSpriteNode *_fight = [[ButtonSpriteNode alloc] initWithImageName:@"fire_btn1.png" selected:@"fire_btn2.png" disable:@"fire_btn3.png"]; _fight.position = CGPointMake(self.frame....
C#自定义按钮源码,封装CustomButton类,可以自定义按钮背景图片,当然,仅仅只是抛砖引玉,可以沿着该思路设计出其它功能的用户自定义控件,开发环境vs2010。
纯swing的自定义图片按钮,可以放各种形状图片 纯swing的自定义图片按钮,可以放各种形状图片 纯swing的自定义图片按钮,可以放各种形状图片 纯swing的自定义图片按钮,可以放各种形状图片
uni-app自定义弹窗组件,支持自定义图片,文本、按钮等功能。
图形按钮,可自定义各个状态的图片,支持jpeg格式
uni-app自定义弹窗组件指令部分,支持自定义图片,文本、按钮等功能。