2011-02-09 16 views
1

に書式設定を適用する、:ExtJSにはExtJSのではグリッド列

xtype: 'grid', 
store: 'someStore', 
flex: 1, 
frame: true, 
loadMask: true, 
titleCollapse: true, 
cls: 'vline-on', 
ref: '../someGrid', 
id: 'someGrid', 
columns: [ 
      { 
      xtype: 'gridcolumn', 
      header: 'ID', 
      dataIndex: 'someID', 
      sortable: true, 
       width: 100 
      } 

をこの列にいくつかの書式を適用する方法はありますか?たとえば、このフィールドは数値で、小数点精度を設定したい場合はできますか?または、ストアが自分のJavaファイルにロードされているときにフォーマットを適用する必要がありますか? 私の推測は後者ですか?

答えて

9

「レンダラー」オプションを使用します。そこではあなたが定義することができます。例えば、私はいくつかのタグに包まれsomeIDを表示したい:

columns: [ 
     { 
     xtype: 'gridcolumn', 
     header: 'ID', 
     dataIndex: 'someID', 
     sortable: true, 
     width: 100, 
     renderer: function(value) { 
      // your logic here 
      return "<b>" + value + "</b>"; 
     } 
     } 
+0

ありがとう、私はこれを試してみます。 – Victor

+0

extデザイナを使用してui.jsファイルにレンダラ属性を指定する方法はありますか? ui.jsファイルを手作業で編集すると、次回にデザイナーが上書きするためです。また、.jsファイルに 'renderer'を追加すると、列定義全体をコピーする必要があると思います。 – Victor

+0

わかりません。私はExt Designerを使用しません。私は手動でコードを書いています。 – KomarSerjio

1

あなたはグリッド列内の小数点以下の桁数を表示したい場合は、「フロート」タイプのお店でdataindexを定義する必要があります。

... 
, {name: 'column_data_name', type: 'float'} 
... 

次に、グリッド列の定義の中で、KomarSerjioが示唆するようにレンダラーを指定して使用する必要があります。

function floatRenderer(value) { 
    if (value) { 
     var val = value.toFixed(2); 

     return addSeparatorsNF(val, '.', ',', '.'); 
    } 
    else return ""; 
} 
... 
, { id:'column_data_name', header: 'label', dataIndex: 'column_data_name' , renderer: floatRenderer , align: 'right' } 
... 

機能addSeparatorsNFhereが示唆されています。単にあなたの列にコードの下に使用したいポイントの後に2数にかまで制限するために、あなたのグリッド小数点値をフォーマットするため

0

: レンダラ:Ext.util.Format.numberRenderer('00 .00' )私が試した

0

レンダラーはKomarSerjioの設定を提案し、Sencha Ext JS 6を使用しているときは私にとって巧みに働いていました。私はそれを使って24時間のプレフィックスゼロを欠いていたデータをゼロにしました。だから私は次のことを試してみました。ありがとうございました。

Ext.define('ViewLL.view.main.List', { 
    extend: 'Ext.grid.Panel', 
    xtype: 'mainlist', 
    reference: 'mainList', 
    flex: 1, 


    requires: [ 
     'ViewLL.store.Datastore' 
    ], 

    title: 'Records', 

    store: { 
     type: 'datastore' 

    }, 

    columns: 
     { text:'Pln On Site Time', 
      dataIndex:'plnOnSiteTime', 
      renderer: function (number) { 
      if (number<=2400) { number = ("000"+number).slice(-4); } 
      return number; 
      } 
     } 

}); 

レンダラーの設定より前に、グリッドに値が表示されていました。レンダラーを使用して機能を追加すると、グリッドの表示値が設定されます。 0926、0800、1000

関連する問題