ExtJSの画像ボタンのグリッドを追加するには

Question

私はExtJSに新しく、お気に入りのボタンのようなものをデータグリッドの各行に追加したいと思います。私は多くのグーグルの後にほとんどすべてのソースを通過したが、私は何も見つけ出していない。もしこれがどうやってできるか分かっている人は、私に知らせてください。

Answer 1

最初にExtJSコンポーネントをグリッド内に追加することはデフォルトではサポートされていません。私が見たチュートリアルはちょっとハッキリです。これが私のやり方です。

1. グリッドがストアにバインドされており、ストア内の各レコードがグリッド内の行であると仮定します。
2. 私は、レコードの "fav"ステータスを表すフィールドが各レコードにあると仮定します（おそらくブール値です）。

上記の仮定に該当する場合、私は前にこのような何かをやった：dataIndexがFAVフィールドを指しているID「FAV-COL」であなたのグリッドの列を追加

• あなたの店の

{ 
    id : 'fav-column', 
    dataIndex : 'fav', 
    sortable : true, 
    hideable : false, 
    menuDisabled : true, 
    fixed : true, 
    width : 20, 
    renderer : renderFav 
} 

• 行がfav'edれる場合応じて異なるHTMLをレンダリングし、その列にレンダラを追加します。

function renderFav(favAdded, metaData, record){ 
    if (favAdded === true){ 
     return 'fav added'; //something to represent already added to favourite ; 
    }else{ 
     return 'fav not added'; //something to represent non-fav'ed row; 
    } 
}

• 、グリッド上で「cellclick」イベントにリスナーを追加でクリックされたセルがFAVセルであるかどうかをチェックして、レコードのFAV値を切り替え、グリッドが自動的に再レン​​ダリングされます店舗内のデータが変更されると、

cellclick : function(grid, cellEl, cellIdx, record, rowEl, rowIdx, evtObj){ 
    if (this.columns[cellIdx].getId() === 'fav-col'){ 
     record.set('fav', !record.get('fav')); //toggle the fav state 
     grid.getStore().sync(); //if the store is a REST store, update backend 
     record.commit(); //commit the record so the red triangle doesn't show 
     this.doLayout(); //might not need this. 
    } 
}