Results 1 to 5 of 5

Thread: How to check if image source is available?

  1. #1
    Sencha User
    Join Date
    Nov 2013
    Posts
    60
    Answers
    2

    Default How to check if image source is available?

    Can I somehow check if a given image source is existing or add a listener for possible errors?

    My script includes an image with listeners for "error" events but this doesn't include empty or incorrect sources:

    PHP Code:
    xtype'image',listeners: {    'error': function (objeeOpts) {         obj.hide();    }} 
    How to check if the given source exists?

  2. #2
    Sencha User
    Join Date
    Aug 2012
    Posts
    65
    Answers
    7

    Default

    The error listener should be called whenever the loading of the image is unsuccessful, including empty or invalid sources. Maybe you have an error in another part of your application? Can you post your full code?

  3. #3
    Sencha User
    Join Date
    Nov 2013
    Posts
    60
    Answers
    2

    Default

    Code:
    Ext.define('BeatFirst.view.StreamChannel', {
    	extend: 'Ext.Container',
    	alias: 'widget.StreamChannel',
    	
    	config: {
    		//Custom properties
    		//
    		channelTitle: null,
    		channelColor: null,
    		channelLogo: null,
    		
    		//Default properties
    		//
    		styleHtmlContent: true,
    		itemId: 'streamChannel',
    		cls: 'streamChannel',
    		padding: 0,
    		margin: 0,
    		
    		showAnimation: {
    		    type: 'fadeIn'
    		}, 
    		hideAnimation: {
    		    type: 'fadeOut'
    		}, 
    		
    		items: [
    			{
    				xtype: 'label',
    				itemId: 'streamChannelTitle',
    				cls: 'streamChannelTitle'
    			},
    			{
    				xtype: 'container',
    				layout: 'hbox',
    				padding: 0,
    				margin: 0,
    				
    				items: [
    					{
    						xtype: 'image',
    						itemId: 'channelLogo',
    						cls: 'streamChannelLogo',
    						hidden: true,
    						listeners: {
    							'error': function (obj, e, eOpts) { 
    								obj.hide();
    							}
    						}
    					},
    					{
    						xtype: 'container',
    						cls: 'streamCarousel',
    						styleHtmlContent: true,	
    						padding: 0,
    					
    						layout: {
    							type: 'hbox',
    							align: 'stretch'
    						},
    		
    						scrollable: {
    							direction: 'horizontal',
    							directionLock: true
    						}
    					}
    				]
    			}
    		]
    	},
    	
    	updateChannelTitle: function(newTitle) {
    		this.down('[itemId=streamChannelTitle]').setHtml(newTitle);
    	},
    	
    	updateChannelId: function(newId) {
    		this.down('[cls=streamCarousel]').setItemId('streamCarousel' + newId);
    	},
    	
    	updateChannelColor: function (newColor) {
    		if (newColor != '' && newColor != null) {			
    			this.down('[itemId=streamChannelTitle]').setStyle('background-color: ' + newColor);
    		}
    	},
    	
    	updateChannelLogo: function (newLogo) {
    		if (newLogo != '' && newLogo != null) {
    			var isImageRightType = BeatFirst.util.Config.checkImageFileType(newLogo);
    			if (isImageRightType) {
    				this.down('[itemId=channelLogo]').setSrc(newLogo);
    				this.down('[itemId=channelLogo]').setHidden(false);				
    			}
    		}
    	}
    	
    });

  4. #4
    Sencha User
    Join Date
    Aug 2012
    Posts
    65
    Answers
    7

    Default

    Maybe the problem is this line:
    Code:
    this.down('[itemId=channelLogo]').setHidden(false);
    If the source is invalid, your listener hides the image, but that line shows it again.

  5. #5
    Sencha User
    Join Date
    Sep 2015
    Location
    Antwerp
    Posts
    12
    Answers
    1

    Default

    I think the problem could be this:

    listeners: {
    'error': function (obj, e, eOpts) {
    obj.hide();
    }

    --> 'error' should be error (without '')

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •