ext panel 自訂圖片重新整理,
最近從管理迴歸開發,著實是花了些功夫適應,不過換個角度處理問題,貌似效果不錯,廢話不多說,最近項目用到了EXT js,百度大神裡面沒找到一個合適的圖片組件,自己寫了個可以重新整理的圖片組件,先說明:由於項目原因,只能貼出部分代碼,此代碼僅供參考
思路:先刪除,再添加,使用doLayout()重布局
防止讀取緩衝中圖片: 在圖片連結後面加上" '?' + Math.random()",會從後台重新讀取
代碼如下:
imagePanel = new Ext.Panel(
{
region : 'center',
title : '',
id : 'imagePanel',
name : 'imagePanel',
width : 105,
height : 105,
border : false,
bodyStyle : {
padding : '10px'
},
refresh : function(picName) {
picName = picName + '?' + Math.random();
imagePanel.removeAll();
var imageInPanel = new Ext.Panel(
{
region : 'center',
title : '',
id : 'imageInPanel',
name : 'imageInPanel',
border : false,
width : 95,
height : 95,
html : "<img src='"
+ picName
+ "' width='80px' height='80px' style='padding:5px;'></img>"
});
imagePanel.add(imageInPanel);
imagePanel.doLayout();
}
});
重新整理圖片:imageBrowsePanel.refresh(picName);
picName中包括圖片相對路徑,建議路徑寫在後台配置中,方便修改