我想根据 ExtJs Grid 中的状态显示记录字段

Question

我正在使用ExtJs 4，并添加了一个网格来显示我的记录。网格还在每一行上显示图像。为了显示图像，我使用了templatecolumn xtype。每条记录可以有一个或两个图像。它的{id}_original.{extension} or {id}.{extension}。

我的问题是，如果只有一张图片，我想在网格上的两个字段中显示它。

这是我的代码：

网格列定义

                    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>'
                    }
                ]

这是检查图像是否退出的代码

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

我不需要编写其余的代码。

Answer 1

您应该能够通过两种方式做到这一点。

要么使用普通渲染器：

{
    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';
    }

或者用户一个Xtemplate，大致是这样的：

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'
          }
    }
);