0

を使用してExtJs 4おり、レコードを表示するグリッドを追加しました。グリッドも各行に画像を表示しています。私が使用している画像を表示するにはtemplatecolumn xtype。レコードごとに 1 つまたは 2 つの画像を含めることができます。その{id}_original.{extension} or {id}.{extension}。

私の問題は、画像が 1 つしかない場合、グリッド上の 2 つのフィールドに表示したいということです。

これが私のコードです：

グリッド列の定義

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

残りのコードを記述する必要はありません。

4

1 に答える 1

1

2つの方法でそれを行うことができるはずです。

単純なレンダラーを使用するか:

{
    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'
          }
    }
);
于 2012-12-17T17:50:51.317 に答える