Ext panel custom image refresh

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; '> http://blog.csdn.net/xulei_19850322/article/details"
});
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.