Ext panel custom image refresh,
Recently, it took some time to adapt from management back-to-development. However, to solve the problem from another point of view, it seems to be a good result. Not much nonsense. Recently, EXT js was used in the project, baidu did not find a suitable image component. I wrote an image component that can be refreshed. First, I explained that due to project reasons, only some code can be pasted. This code is for reference only.
Idea: First Delete, then add, and use doLayout () to relay
Prevent reading cached images: Add "'? '+ Math. random () ", will be re-read from the background
The Code is as follows:
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: "+ PicName
+ "'Width = '80px 'height = '80px' style = 'padding: 5px; '> </img>"
});
ImagePanel. add (imageInPanel );
ImagePanel. doLayout ();
}
});
Refresh image: imageBrowsePanel. refresh (picName );
The picName contains the relative path of the image. We recommend that you write the path in the background configuration to facilitate modification.