extjs如何設置圖片

Ⅰ Extjs 怎麼在文字前添加圖片啊 (小弟剛接觸Extjs)

上面說的加css是一個辦法。但是有點畫蛇添足的感覺。
extjs 按鈕等圖標，都已經有屬性。
比如一個button
var button = new Ext.Button({
text : 'newbutton',
icon : 'image/xxx/xxx.png',
handler : function(){
xxxxx ;
}
})
這樣就可以了

Ⅱ extjs怎麼使圖片上傳時顯示預覽

這個我做過，不難，思路給你

1.是當文本框內容發生改變的時候就將圖片上傳到伺服器（如果圖片小，用戶是感覺不到你已經做了上傳操作的。）

2.當伺服器接受到這個圖片的時候，將其放入到一個臨時文件夾中並返回給前台一個圖片路徑（圖片流也可以）。

3.Ajax請求會有一個相應，在伺服器端成功接受到上傳的圖片後，返回給Ajax一個Reponse，這個Reponse里包含一個圖片路徑。

4.ExtJS在前台獲取success里的responseText之後（也就是圖片路徑）將默認圖片的src指向從後台反饋回來的圖片路徑。

現在圖片就會現實出來

流程是：

用戶選擇圖片-->
觸發文本框改變事件--->
在事件中通過AJAX將圖片上傳給伺服器--->
伺服器將圖片名稱修改為UUID以免重復，並將此圖片的路徑返回給前台--->
前台AJAX請求的回調函數中獲取responseText，也就是圖片路徑--->
設置默認圖片的src為responseText---->
用戶重新選擇的時候（例如用戶不喜歡這張圖）--->
在文本框改變事件中通過AJAX將圖片上傳（包括先前上傳的圖片名稱）--->
後台根據參數先刪除臨時圖片--->
重復以上的步驟直到用戶確定

需要注意的問題：
1.當用戶改變了圖片之後，需要把上一次的臨時圖片文件刪除掉，以免出現垃圾圖片過多。

2.每次上傳圖片的時候要在後面跟上一個隨機參數（因為如果請求路徑和參數相同，瀏覽器不會再繼續發送請求）。通常情況下使用new Date()就可以了例如
"uploadImag.do?method=uploadImage&randomParam="+new Date()

3.圖片太大的話，效果不是很好。

4.當用戶點擊確定後，將臨時文件里的圖片放置到你的正式圖片存放目錄下即可。

5.圖片上傳到後台使用UUID改名字，否則可能有重復

Ⅲ extjs GridPanel怎麼設置圖片按鈕點擊事件

你這樣的最好使用 actioncolumn , 顯示效果一樣...但是設置點擊事件要方便的多, 可以查看下API

//下面代碼是直接復制的API例子
Ext.create('Ext.data.Store',{
storeId:'employeeStore',
fields:['firstname','lastname','seniority','dep','hired'],
data:[
{firstname:"Michael",lastname:"Scott"},
{firstname:"Dwight",lastname:"Schrute"},
{firstname:"Jim",lastname:"Halpert"},
{firstname:"Kevin",lastname:"Malone"},
{firstname:"Angela",lastname:"Martin"}
]
});

Ext.create('Ext.grid.Panel',{
title:'ActionColumnDemo',
store:Ext.data.StoreManager.lookup('employeeStore'),
columns:[
{text:'FirstName',dataIndex:'firstname'},
{text:'LastName',dataIndex:'lastname'},
{
xtype:'actioncolumn',
width:50,
items:[{
//這里直接通過URL設置圖標
icon:'extjs/examples/shared/icons/fam/cog_edit.png',
tooltip:'Edit',
//這里是圖標的點擊事件
//參數中有點擊行的record,所以很方便做處理
handler:function(grid,rowIndex,colIndex){
varrec=grid.getStore().getAt(rowIndex);
alert("Edit"+rec.get('firstname'));
}
},{
icon:'extjs/examples/restful/images/delete.png',
tooltip:'Delete',
handler:function(grid,rowIndex,colIndex){
varrec=grid.getStore().getAt(rowIndex);
alert("Terminate"+rec.get('firstname'));
}
}]
}
],
width:250,
renderTo:Ext.getBody()
});

Ⅳ 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中如何顯示圖片列表

EXTJS中顯示圖片方法
userInfoForm.superclass.constructor.call(this, {
bodyStyle: 'padding:10px 10px 10px',
width:250,
region:'west',
closeAction:'true',
title:'個人信息',
buttonAlign:'center',
items:[
{xtype:'panel',
width : 200,
Height : 160,
border:false,
html:'<img src="qing.jpg">'}, 可以顯示
{xtype : 'textfield',
fieldLabel : '個人照片',
width : 150,
Height : 180,
inputType : 'image',
fieldLabel :'笑臉豆豆<font color=red>*</font>',
anchor:'97%',
listeners : { // 該項被載入時載入照片
'render' : function(_filed) {
_filed.getEl().dom.src = "qing.jpg";//這里圖片的路徑可以預先從store中讀取，賦給變數然後給它
} //動態顯示圖片
}
},{

xtype : 'box',
id : 'browseImage',
fieldLabel : "用戶頭像",
autoEl : {
width : 300,
height : 350,
tag : 'img',
// type : 'image',
src : Ext.BLANK_IMAGE_URL,
style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);',
complete : 'off',
id : 'imageBrowse'
}
}
]
});
}
Ext.extend(userInfoForm ,Ext.form.FormPanel,{
});

Ⅵ 怎麼設置EXTJS 的win的網頁背景圖片

div設置背景圖放最底層，或者PS一張這樣的圖然後定位文本框，
extjs速度真的很慢，慎用~

Ⅶ ext js 顯示圖片

首先創建一個panel，它的html屬性為<img src="javascript:" id="preview"/>
第一種：Ext.get("preview").set("src","images/xxx.jpg");
第二種：通過base64編碼顯示，即Ext.get("preview").set("src","image/jpg base64 *");

Ⅷ extjs怎樣自定義圖片，並把它變成iconcls類

iconCls類?? 比如一個按鈕的圖標??
這個你參考一下就可以了...
比如在css里定義一個
.ico_add {background-image:url(../ico/add.png)}
然後再Js中
{xtype:"button" , text:"添加" , iconCls:"ico_add}
就可以顯示上面的圖標了...當然圖標尺寸一般16X16就可以

Ⅸ 用了個extjs的panel,然後其中不是有個title的屬性嗎然後我想要在title前面加一張圖片怎麼加在字前加圖

CSS中加入代碼（如圖）：

Ⅹ extjs 如何給label 添加背景圖片

label有個html屬性，寫入：<img src='圖片地址' />
這樣就可以了。