1. #1
    Sencha User inisource's Avatar
    Join Date
    Apr 2012
    Location
    Macau
    Posts
    2
    Vote Rating
    0
    inisource is on a distinguished road

      0  

    Default Unanswered: Check the image file is existing or not before use it in the html !

    Unanswered: Check the image file is existing or not before use it in the html !


    I use the following "CheckImageExist" function to check the image file (url) is correct or not.

    Code:
        fillPawnshopDetails : function ( indexid ) {
            var store=Ext.getStore('Pawnshop');
            var panelDetails1=Ext.getCmp('details1');
            var htmlDetails = new String;
            var htmlCardImage = new String;
            var url = this.GenImageUrl(indexid);
            var result = this.CheckImageExist(indexid);
                              
            htmlDetails = '<div id="detail" class="detail">' + store.getAt(indexid).get('alias') +'<br>';        
    
            if (result) {
                 var url = this.GenImageUrl(indexid);
                htmlDetails = htmlDetails + '<img src="' + url +'" width="360" /></a></div></div><br><br>';
            };
                
            panelDetails1.setHtml(htmlDetails);        
                    
        },
    But I can not change the 'result' value inside the "Ext.img" Listener. How can I fix it to complete this function ?

    Code:
        GenImageUrl : function ( indexid) {
            var store = Ext.getStore('Pawnshop');         
            var finalno= store.getAt(indexid).get('nodeid');
            while (finalno.length < 3) {  
                finalno = "0" + finalno;
            };
            var url= 'http://www.macauindex.com/pawnshop/images/namecard/card'+ finalno +'.jpg';        
            return url;
        },
    
        CheckImageExist: function(indexid) {
            var url = this.GenImageUrl(indexid);            
            var result = new Boolean(false);
              var logo = Ext.create('Ext.Img', {
                src: url,
                listeners: {
                    load: function (img, evt) {
                        result=true;
                        Ext.Msg.alert('1');
                    }, // load
                    error: function (img, evt) {
                         Ext.Msg.alert('0');
                         result=false;          
                    } // error
                } // listeners                        
            }); // create()
            
            logo.destroy;
            console.log ('Return ' + result.toString());   //No matter the listeners is Load / Error , the result value is 'false'
            return result;         
         },

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,631
    Answers
    3452
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    What I do is use the image component and if the error event fires then I set the source to a base64 string of an error image as a place holder.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User inisource's Avatar
    Join Date
    Apr 2012
    Location
    Macau
    Posts
    2
    Vote Rating
    0
    inisource is on a distinguished road

      0  

    Default


    Dear Sir,

    I already solved my problem with another solution. I prefer to hide the image when the image file is not exist.

    Code:
          var panelDetails1 = {
                xtype: "panel",  
                id: 'details1',
                   scrollable: {
                    direction: 'vertical'
                },
                style: 'background-color: #FFFAF0',
                items: [
                {
                    xtype: 'label',
                    docked: 'top',             
                    height: 40,
                    html: 'alias',
                    id: 'labelalias',
                    style: {
                        'margin-left' : '20px',    
                         'margin-top': '10px',
                         'width': '400px',
                         'text-align' : 'center',
                         'font-family' : '微軟正黑體,Georgia,Serif'
                    }
                },
                {
                    xtype: 'image',
                    height: 250,
                    width: 400,
                    style: {
                        'background-size' : '100%',
                        'margin-left' : '20px'    
                    },
                    hidden: false,
                    id: 'imagenamecard',
                    ui: 'light',
                    listeners: {
                    load: function (img, evt) {
                        this.setHidden(false);
                      }, // load
                    error: function (img, evt) {
                        this.setHidden(true);
                    } // error
                } // listeners    
                    
                }]
                                
            };
    Thank you very much.

Thread Participants: 1

Tags for this Thread