그림을 그리드에 추가 - ExtJS

저는 ExtJS에 익숙하지 않습니다. 그리드의 필드 중 하나에 그림을 추가하려고합니다. Google에서 이미 몇 가지 결과 나 도움말을 찾고 있는데 "렌더링 기능"을 발견했지만 제대로 작동하지 않습니다. (어쩌면 그냥 잘못 사용했을 수도 있습니다)그림을 그리드에 추가 - ExtJS

여기 내 코드는

입니다.

Ext.define('AM.view.user.List' ,{ 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.userlist', 
    title: 'Test ', 
    store: 'Users', 
    initComponent: function() { 
    this.columns = [ 
    {header: 'ID du CPE', dataIndex: 'ID', flex: 1}, 
     {header: 'Modèle', dataIndex: 'Modele', flex: 1}, 
    {header: 'Firmware', dataIndex: 'firmware', flex: 1}, 
    {header: 'Année MeS', dataIndex: 'annee', flex: 1}, 
     {header: 'Statut', dataIndex: 'statut', flex: 1}, 
    {header: 'Alerte', dataIndex: 'alerte', flex: 1} 
    ]; 
    this.callParent(arguments); 
    } 
});

Json 파일은 'Alerte'를 제외한 모든 필드를 채 웁니다. 그리고 여기에 사진을 추가하고 싶습니다 (이 필드에는 텍스트가없고 사진 만).

전진 해 주셔서 감사합니다. 가능한 한 가장 명확하게 생각합니다.

{header: 'Alerte', dataIndex: 'alerte', flex: 1, renderer: function() { 
return '<img src="blablabla"/>'; 
}}

필요한 경우는 실제 기록에 따라 이미지를 사용자 정의 할 수 있도록 얻는 것을 인수 렌더러 확인하기 위해 문서를 참조하십시오 :

빈센트

출처

2013-06-11 Anonymous

은 열 설정에 renderer 추가.

출처

2013-06-11 13:21:35 Greendrake

덕분에, 두 솔루션은 잘 작동 은 여기 내 간단한 예입니다! –

격자의 셀에 표시 아이콘에 actioncolumn을 사용하고 아이콘을 셀에 넣는 renderer 기능을 사용할 수 있습니다. 응용 프로그램에서 CSS 클래스를 사용하는 것이 좋습니다.

    { 
         xtype: 'actioncolumn', 
         width: 70, 
         align: 'center', 
         dataIndex: 'yourDataIndex', 
         menuDisabled: 'true', 
         text: 'sometext', 
         sortable: false, 
         fixed: 'true', 
         renderer: function (value, metadata, record) { 
          metadata.tdCls = 'mycss' 
         } 
        }

및 you'r CSS 클래스 : 빠른 피드백에 대한

.mycss { 
    background-position:center !important; 
    width: auto !important; 
    background-repeat: no-repeat; 
    background-image: url("yourIcon.png") !important; 
}

출처

2013-06-11 14:14:38

빠른 피드백을 보내 주셔서 감사합니다. 두 가지 솔루션 모두 정상적으로 작동합니다. –

그림을 그리드에 추가 - ExtJS

답변

관련 문제