extjs图片按钮_extjs 34中怎么给htmlEdit添加图片插件实现图片上传功能

『壹』 Extjs下的按钮的背景色和文字的颜色具体应该如何设置呢

你要是调试下看下Ext的button是什么样，大概就知道怎么改了

Ext原来的样式不也挺好看的么

Ext.onReady(function () {

Ext.create('Ext.Button', {

text: 'Click me',

id:'mine',

renderTo: Ext.getBody(),

handler: function() {

alert('You clicked the button!');

}

});

Ext.create('Ext.Button', {

text: 'Click me',

renderTo: Ext.getBody(),

handler: function() {

alert('You clicked the button!');

}

});

//背景色方式1，使用渐变色

Ext.getCmp('mine').el.setStyle('background-image','-webkit-linear-gradient(top,red,yellow 40%,yellow 30%,red)');

//背景色方式2

//Ext.getCmp('mine').btnEl.setStyle('background-color',"yellow");

//字体颜色

Ext.getCmp('mine').btnInnerEl.setStyle('color',"green");

})

『贰』怎样为extjs写的表中的列中的按钮添加方法。

menuDisabled: true,
sortable: false,
xtype: 'actioncolumn',
width: 50,
items: [{
iconCls: 'sell-col',
tooltip: 'Sell stock',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
Ext.Msg.alert('Sell', 'Sell ' + rec.get('company'));
}
}, {
getClass: function(v, meta, rec) {
if (rec.get('change') < 0) {
return 'alert-col'
} else {
return 'buy-col'
}
},
getTip: function(v, meta, rec) {
if (rec.get('change') < 0) {
return 'Hold stock'
} else {
return 'Buy stock'
}
},
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex),
action = (rec.get('change') < 0 ? 'Hold' : 'Buy');
Ext.Msg.alert(action, action + ' ' + rec.get('company'));
}

可以看看官方提供的样例，写的很清楚~~~

『叁』 extjs box控件放置图片后点击事件

ext3.4-

<!doctypehtml>
<htmllang="en">
<head>
	<metacharset="UTF-8">
	<title>extjs3.4demo2</title>
	<linkrel="stylesheet"href="../resources/css/ext-all.css">
	<scriptsrc="../adapter/ext/ext-base.js"></script>
	<scriptsrc="../ext-all.js"></script>
	<script>
	
		=function(){
			
			//设置跳转
			alert(1);
			location.href='#';
			
		}
	
		Ext.onReady(function(){
		
			newExt.Panel({
			
				title:'main',
				width:600,
				height:300,
				items:{
				
					xtype:'box',
					width:200,
					height:200,
					autoEl:{
					
						tag:'img',
						src:'',
						onclick:'clickHandler()'
					}
				
				},
				renderTo:Ext.getBody()
			
			});

		});
		
	
	</script>
</head>
<body>
	
</body>
</html>

ext4+

<!doctypehtml>
<htmllang="en">
<head>
	<metacharset="UTF-8">
	<title>Extjs4.2demo2</title>
	<linkrel="stylesheet"href="../resources/css/ext-all.css">
	<scriptsrc="../bootstrap.js"></script>
	<script>
	
		Ext.onReady(function(){
		
			newExt.Panel({
			
				title:'main',
				width:600,
				height:300,
				listeners:{
					el:{
						click:function(){
							//设置跳转
							alert(1);
							location.href='#';
						}
					}
				},
				items:{
					xtype:'box',
					width:200,
					height:200,
					autoEl:{
					
						tag:'img',
						src:'',
					}			
				},
				renderTo:Ext.getBody()
			
			});

		});

		
	</script>
</head>
<body>
	
</body>
</html>

『肆』如何定义extjs里按钮的大小以及改变鼠标经过时和点击后的样式

var
btn
=
new
Ext.Button({
width:200,
overCls:''//CSS类名
});
点击后的样式比较麻烦，有很多种做法，我提供一种简单的方法供参考
btn.on('click',function(){
btn.getEl().setStyle(.....);//具体参考API
Ext.Element
},btn,{single:true});
上面代码的意思就是点击的时候修改btn的样式，single:true表示只执行一次

『伍』 extjs 3.4中怎么给htmlEdit添加图片插件实现图片上传功能

首先要使用extjs自带的HTMLEditor，然后在原有的工具条上添加一个图片按钮，点击这个图片按钮要弹出窗口，这个窗口负责实现上传功能，实现上传后，要将上传的图片路径添加到HTMLEditor的光标处，并且要以<IMG></IMG>的方式，这样HTMLEditor才能解析出来。实现代码如下：

前台JSP页面

fieldLabel : '商品特性',
id : 'shopSp.spTxms',

name : 'shopSp.spTxms',
xtype : 'StarHtmleditor',
anchor : '93%'

这其中引用了StarHtmleditor，StarHtmleditor.js的代码如下，直接将代码复制下来，然后新建个JS，全复制进去就行了。

var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
addImage : function() {
var editor = this;
var imgform = new Ext.FormPanel({
region : 'center',
labelWidth : 55,
frame : true,
bodyStyle : 'padding:5px 5px 0',
autoScroll : true,
border : false,
fileUpload : true,
items : [{
xtype : 'textfield',
fieldLabel : '选择文件',
id : 'UserFile',
name : 'UserFile',
inputType : 'file',
allowBlank : false,
blankText : '文件不能为空',
anchor : '90%'
}],
buttons : [{
text : '上传',
handler : function() {
if (!imgform.form.isValid()) {return;}
imgform.form.submit({
waitMsg : '正在上传......',
url : 'HTMLEditorAddImgCommonAction.action',
success : function(form, action) {
var element = document.createElement("img");
element.src = action.result.fileURL;
if (Ext.isIE) {
editor.insertAtCursor(element.outerHTML);
} else {
var selection = editor.win.getSelection();
if (!selection.isCollapsed) {
selection.deleteFromDocument();
}
selection.getRangeAt(0).insertNode(element);
}
//win.hide();//原始方法，但只能传一个图片
//更新后的方法
form.reset();
win.close();
},
failure : function(form, action) {
form.reset();
if (action.failureType == Ext.form.Action.SERVER_INVALID)
Ext.MessageBox.alert('警告','上传失败',action.result.errors.msg);
}
});
}
}, {
text : '关闭',
handler : function() {
win.close(this);
}
}]
})

var win = new Ext.Window({
title : "上传图片",
width : 300,
height : 200,
modal : true,
border : false,
iconCls : "picture.png",
layout : "fit",
items : imgform

});
win.show();
},
createToolbar : function(editor) {
HTMLEditor.superclass.createToolbar.call(this, editor);
this.tb.insertButton(16, {
cls : "x-btn-icon",
icon : "picture.png",
handler : this.addImage,
scope : this
});
}
});
Ext.reg('StarHtmleditor', HTMLEditor);

JS的第一句var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, 网上是没有var的，不用var不知道为什么总是报错，另外JS一定要与JSP的编码方式一致，要不然报莫名其妙的错误，而且错误都没有显示。

后台java代码

/****
* HTMLEditor增加上传图片功能：
* 1、上传图片后，需要将图片的位置及图片的名称返回给前台HTMLEditor
* 2、前台HTMLEditor根据返回的值将图片显示出来
* 3、进行统一保存
* @param 上传图片功能
* @return JSON结果
* @throws IOException
*/
public void HTMLEditorAddImg() throws IOException {
if(!"".equals(UserFile) && UserFile != null && UserFile.length() > 0){
File path = ImportImg(UserFile, "jpg");
UserFilePath = "../" + path.toString().replaceAll("\\", "/").substring(path.toString().replaceAll("\\", "/").indexOf("FileImg"));
}
this.getResponse().setContentType("text/html");
this.getResponse().getWriter().write("{success:'true',fileURL:'" + UserFilePath + "'}");
}

特别要注意的是路径问题，路径问题主要有2点需要注意：

1、前台页面引用StarHtmleditor.js的路径一定要正确；

2、Htmleditor上传的图片路径一定要改，因为上传之后图片路径变为http://localhost:8080/，在正常使用中图片不显示，要将该地址替换为服务器的IP地址；替换方法如下：

//获取本地IP地址,因为extjs的htmleditor上传的照片路径有问题，需要将路径替换为本机IP地址
InetAddress inet = InetAddress.getLocalHost();
shopSp.setSpTxms(shopSp.getSpTxms().replace("localhost", inet.getHostAddress().toString()));

这样基本就完成了这个HTMLEditor上传图片功能。

如图：

『陆』 extjs怎么显示图片

显示图片可以直接使用 Ext.Img...

//下面代码直接从API例子回中复答制
varchangingImage=Ext.create('Ext.Img',{
src:'http://www.sencha.com/img/20110215-feat-html5.png',
renderTo:Ext.getBody()
});

//
changingImage.setSrc('http://www.sencha.com/img/20110215-feat-perf.png');

『柒』 extjs bbar 中怎么让按钮凸显出来要看着是按钮的样子不要鼠标放上去才知道是按钮

这个要改下ext-all.js了，你先在ext-all.js中找到Ext.Button=Ext.extend(Ext.BoxComponent,{

然后找到里面的

onMouseOut:function(b){

vara=b.within(this.el)&&b.target!=this.el.dom;

//this.el.removeClass("x-btn-over"); //把这个注释了或者直接删掉

this.fireEvent("mouseout",this,b);

if(this.isMenuTriggerOut(b,a)){

this.fireEvent("menutriggerout",this,this.menu,b)

}

最后在这个方法里，把刚注释的那句话添里面

initButtonEl:function(b,c){

this.el=b;

this.setIcon(this.icon);

this.setText(this.text);

this.setIconClass(this.iconCls);

if(Ext.isDefined(this.tabIndex)){

c.dom.tabIndex=this.tabIndex

}

if(this.tooltip){

this.setTooltip(this.tooltip,true)

}

if(this.handleMouseEvents){

this.mon(b,{

scope:this,

mouseover:this.onMouseOver,

mousedown:this.onMouseDown

})

}

this.el.addClass("x-btn-over"); //这里，添加刚才注释那句话

if(this.menu){

this.mon(this.menu,{

scope:this,

show:this.onMenuShow,

hide:this.onMenuHide

})

}

if(this.repeat){

vara=newExt.util.ClickRepeater(b,Ext.isObject(this.repeat)

?this.repeat

:{});

this.mon(a,"click",this.onRepeatClick,this)

}else{

this.mon(b,this.clickEvent,this.onClick,this)

}

改完保存就哦了

『捌』 extjs中，如何在textfield后面加一个按钮，并且点击按钮要调用后台方法

Ext.form.TriggerField 这个类是 TextField的子类,你创建他的实例的时候可以设定下面的属性.这个属性就是后面的图片

triggerClass : String

举个简单例子：

var comNam = new Ext.form.TriggerField({
name : 'comNam',
allowBlank: false,
blankText:"请点击文本框，进行公司选择",
fieldLabel :net.uni.in1.notBlankMark+ '公司名称',
readOnly:true,
cls:"ux-readOnly", //增加此样式，可以变灰
enableKeyEvents: true,
listeners:{
'focus': function(){
chooseCust();
}
},
triggerClass : 'view',
anchor : '90%'
});
}

『玖』 extjs 在代码中触发button

不懂你的调用是什么意思，要是是创建的话

varconfig={
id:'xxx',
xtype:'button',
text:'button',
handler:function(){
alert('123456');
}
};

//xxx为目标元素的id号，如果目标元素允许加入的话，该按钮就会加入到该元素中
Ext.getCmp('xxx').add(config);

『拾』 extjs 要在选择按钮后增加一个上传按钮，

单个按钮的话，参考如下，如果你是想通过两个按钮来表达开关稍作扩展即可：回

new Ext.Button ({
scale:'Large',
fieldLabel :'是否',
iconAlign : 'left',
id : 'ynButton',
tag : 'Y',
handler :function(button){
if(button.tag == 'N'){
button.tag = 'Y';
Ext.getDom(button.getId()).innerHTML ='Y图片答';
}else if(button.tag=='Y'){
button.tag= 'N';
Ext.getDom(button.getId()).innerHTML ='N图片';
}
}
})

导航:首页 > 编程语言 > extjs图片按钮

extjs图片按钮

与extjs图片按钮相关的资料

友情链接