extjs - グリッドセルには画像とテキストの両方があります

Question

Ext js 4グリッドパネルのセルに画像とテキストの両方を配置する方法はありますか？

手伝ってくれてありがとう。

ck

Answer 1

はい、できます。ただし、どちらを選択するかは要件によって異なります。

1. CSSを使用します。列を定義するときは、「tdCls」プロパティを設定します。

   {
       header: 'Image and text column',
       tdCls: 'img-col',
       dataIndex: 'Text'
   }
   

   CSSファイル：

   td.img-col  {
       background-image: url(images/pic.png); /*16px*/
       background-repeat: no-repeat;
   }
   
   td.img-col .x-grid-cell-inner {
       margin-left: 16px;
   }
   

2. テンプレート列を使用します。

   {
       xtype: 'templatecolumn',
       header: 'Image and text column',
       tpl: [
           '<img src="{ImgPath}"></img>',
           '<div>{Text}</div>'
       ]
   }
   

   そして、あなたのモデルはImgPathプロパティを持っている必要があります