I want to show records field according to its status in ExtJs Grid

Question

I am using ExtJs 4, and added a grid to show my records. Grid is also showing images on each row. To show images I am using templatecolumn xtype. There can be one or two images for each record. its {id}_original.{extension} or {id}.{extension}.

My problem is that if there is just one image, I want to show it in two field on the grid.

Here is my code:

Grid Columns Definition

                    columns: [
                    {
                        text: 'ID',
                        hideable: false,
                        dataIndex: 'id'
                    },
                    {
                        xtype: 'booleancolumn', 
                        text: 'Aktif mi?',
                        dataIndex: 'publishableFlag',
                        trueText: 'Evet',
                        falseText: 'Hayır'
                    },
                    {
                        text: 'Kullanıcı',
                        dataIndex: 'ownerName'
                    },
                    {
                        text: 'Yükseklik',
                        dataIndex: 'fileHeight'
                    },
                    {
                        text: 'Genişlik',
                        dataIndex: 'fileWidth'
                    },
                    {
                        text: 'Ürün',
                        dataIndex: 'productId'
                    },
                    {
                        text: 'Orjinal Fotoğraf',
                        xtype:'templatecolumn',
                        flex: 1,
                        tpl: '<a href="'+path+'{id}_original.{fileExtension}" target="_blank"><img src="'+path+'{id}_original.{fileExtension}" height=100 width=100 /></a>'
                        //checkImageExist(path + '{id}_original.{fileExtension}', this) ? '<a href="'+path+'{id}_original.{fileExtension}" target="_blank"><img src="'+path+'{id}.{fileExtension}" height=100 width=100 /></a>' : 'noldu yaa'
                    },
                    {
                        text: 'Güncellenen Fotoğraf',
                        xtype:'templatecolumn',
                        flex: 1,
                        tpl: '<a href="http://www.kaft.com/static/images/photos/{id}.{fileExtension}" target="_blank"><img src="http://www.kaft.com/static/images/photos/{id}.{fileExtension}" height=100 width=100 /></a>'
                    }
                ]

Here is code to check if an image exit

    function checkImageExist(url, d) 
    {
        console.log(url, d);
        var img = new Image();
        img.src = url;
        return img.height != 0;
    }

I don't need to write rest of the code.

Answer 1

You should be able to do it in two ways.

Either use a plain renderer:

{
    text: 'Orjinal Fotoğraf',     
    flex: 1,
    renderer: function ( aValue, aMetaData, aRecord ) {
        return checkImageExist( path + aRecord.id + '_original.' + aRecord.fileExtension, this) ? '<a href="'+path+' + aRecord.id' +_original.' + aRecord.fileExtension + '" target="_blank"><img src="'+path+ aRecord.id + '.' + aRecord.fileExtension + '" height=100 width=100 /></a>' : 'noldu yaa';
    }

Or user an Xtemplate, something roughly like this:

this.MyTpl = new Ext.XTemplate (
    '<a href="'+path+'{id}_original.{fileExtension}" target="_blank"><img src="'+path+'{id}_original.{fileExtension}" height=100 width=100 /></a>[this.checkImageExist( values.url, values.d )]'

    {
       disableFormats: true,
       checkImageExist: function ( aUrl, aD )
          {
              console.log( aUrl, aD );
              var img = new Image();
              img.src = aUrl;
              return img.height != 0 ? '<a href="'+path+'{id}_original.{fileExtension}" target="_blank"><img src="'+path+'{id}.{fileExtension}" height=100 width=100 /></a>' : 'noldu yaa'
          }
    }
);