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圖片按鈕相關的資料

友情鏈接