当前位置: 代码迷 >> HTML/CSS >> Sencha Touch 二 获取 html img 标签
  详细解决方案

Sencha Touch 二 获取 html img 标签

热度:1288   发布时间:2012-07-01 13:15:00.0
Sencha Touch 2 获取 html img 标签


/**
 * @Author sai
 * 内容详细页
 */
Ext.define('SmartMenu.view.dynamic.Details', {
      extend: 'Ext.Panel',
      requires:['SmartMenu.view.dynamic.NewsImg'],
      config: {
	        styleHtmlContent: true,
	        scrollable: 'vertical',
	        layout: 'vbox',
	        items:[],
	        listeners : {
	            painted : function(panel) {
	                var el = panel.element;
	                    el.on('tap', function(e, t) {
	                        var image = e.getTarget('img');
	                        if (image) {
	                        	this.onTap(image.src);
	                           
	                        }
	                    }, panel);
	            }
	        }
	    },
	    initialize: function() {
	    	var  panel=this;
	    	
	    	var urls=this.getData().image_url;
	    	
	    	var h = '<div>' +
                        '<div id="news_detail_title">' + this.getData().title + '</div>' +
                        '<div id="news_detail_time_user">' + this.getData().created + '<span>' + this.getData().user + '</span></div>' ;
	    	h+='<div style="float:right">';
	    	 for(var i=0;i<urls.length;i++){
		    		h+=" <div style='width:100px;'> <img width:100px; height:60px; src='"+urls[i]+"'/> </div>";
		    	}
	    	 h+='</div>';
                    h+=   '<div id="news_detail_desc">' + this.getData().description + '</div>' +
                    '</div>';
	   	    
           var items = [{html:h}];
            this.setItems(items);
	    },
	    onTap:function(url){
	    	if(url){    	
	    		if(!Ext.getCmp('news')){
	    		Ext.create('SmartMenu.view.dynamic.NewsImg',{id:'news'});}
	    		imgPanel=Ext.getCmp('news');
	    		var h = '[img]'+ url+'" style="height:100%; width:100%;[/img]';
	    	    imgPanel.setHtml(h);
	    	    if (!imgPanel.getParent()) {
	                Ext.Viewport.add(imgPanel);
	            }
	    	    imgPanel.show();
	    	}
	    }
	    
});





  相关解决方案