ext 3.x 查看图片 完美解决。

直接上源码,跟同事研究了一整天。很坑。

图片视频一样,先看图片。

var showPig = {
			text: '查看工单图片',
			width: 85,
			disabled: false,
			iconCls: 'download',
			handler:function() {
				var	selectedRecord = grid.getSelectionModel().getSelected();
	            if(selectedRecord == null)
	            {
	                showAlertMsg("没有选择记录",grid);
	                return;
	            }
	            var imgPath = selectedRecord.data.imgPath;//这里是后台返回的图片地址
	            var html = '<div style="width:100%;height:100%;"><img id="videoSource" style="width:100%;height:100%;" src="'+Ext.contextPath+imgPath+'" /><div>';//这里直接是html标签,可以是视频 可以是图片 也可以是音乐mp3
	            songPlayer.show();
	            Ext.getCmp("playerPanel").body.update(html); //这里是关键 ,定义的名字为songPlayerwindow的窗口必须先展示(show)否则老是报update -- undefined.这里是清空html重新放置,不然视频图片出来以后,查看别的记录,无法重新加载,
//Ext.getCmp('imgsrc').initialConfig.autoEl.src = Ext.contextPath+imgPath;
//这种方式无法重新赋值wiodows中 html的内容

			}
	};

 var playerForm=new Ext.Panel({  
	        xtype : 'panel',  
	        id : 'playerPanel',  
	        width:600,  
	        height:600, 
	        html:""
//	        html : '<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" type="audio/mpeg" width="310">'  
//	                + '<param name="fileName" value="‪‪‪E:\all_download\mp4\lts12.mp4"/>' +  
//	             '<embed width="420" height="360" type="application/x-mplayer2" src="‪‪‪E:\all_download\mp4\lts12.mp4"></embed></object>'  
	    })
var songPlayer = new Ext.Window({  
        layout : 'fit',  
        width:600,  
        height:600,  
        modal : true,  
        frame: true,
        closable : false, 
//        html:"",
        items : [playerForm]  ,
    	buttons: [{
			id : 'ensure2',
			text: '确定',
			handler: function() {
                 songPlayer.hide();
				 Ext.getCmp("playerPanel").body.update("");  
				
				//Ext.getCmp('playerPanel').remove();
//				var oVideo = document.getElementById('videoSource');
//				oVideo.pause();
//				  Ext.getCmp('playerPanel').html ="";
//				  Ext.getCmp('playerPanel').removeAll();
//				  Ext.getCmp('playerPanel').doLayout(true);  
				  
			}
		},{
			text: '关闭',
			handler: function() {
                  Ext.getCmp('playerPanel').html ="";
				  Ext.getCmp("playerPanel").body.update("");  
//			
				songPlayer.hide();
//				Ext.getCmp('playerPanel').remove();
//				var oVideo = document.getElementById('videoSource');
//				oVideo.pause();
//				
			}
		}]
    }); 

// 菜单集合
var menuArr = new Array();
menuArr.push(showPig);

	
 var playerForm=new Ext.Panel({  
	        xtype : 'panel',  
	        id : 'playerPanel',  
	        width:600,  
	        height:600, 
	        html:""
//	        html : '<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" type="audio/mpeg" width="310">'  
//	                + '<param name="fileName" value="‪‪‪E:\all_download\mp4\lts12.mp4"/>' +  
//	             '<embed width="420" height="360" type="application/x-mplayer2" src="‪‪‪E:\all_download\mp4\lts12.mp4"></embed></object>'  
	    })
var songPlayer = new Ext.Window({  
        layout : 'fit',  
        width:600,  
        height:600,  
        modal : true,  
        frame: true,
        closable : false, 
//        html:"",
        items : [playerForm]  ,
    	buttons: [{
			id : 'ensure2',
			text: '确定',
			handler: function() {
                 songPlayer.hide();
				 Ext.getCmp("playerPanel").body.update("");  
				
				//Ext.getCmp('playerPanel').remove();
//				var oVideo = document.getElementById('videoSource');
//				oVideo.pause();
//				  Ext.getCmp('playerPanel').html ="";
//				  Ext.getCmp('playerPanel').removeAll();
//				  Ext.getCmp('playerPanel').doLayout(true);  
				  
			}
		},{
			text: '关闭',
			handler: function() {
                  Ext.getCmp('playerPanel').html ="";
				  Ext.getCmp("playerPanel").body.update("");  
//			
				songPlayer.hide();
//				Ext.getCmp('playerPanel').remove();
//				var oVideo = document.getElementById('videoSource');
//				oVideo.pause();
//				
			}
		}]
    }); 

猜你喜欢

转载自blog.csdn.net/somdip/article/details/89810600
ext