ExtJs Grid의 상태에 따라 레코드 필드를 표시하고 싶습니다.

Question

ExtJs 4을 사용하고 있습니다. 내 레코드를 표시하는 표가 추가되었습니다. Grid는 또한 각 행에 이미지를 보여줍니다. 이미지를 표시하려면 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' 
      } 
    } 
);