2011-07-11 5 views
6

GridPanelでは、セルをカスタマイズするために列設定でrendererを指定できることがわかっています。今私はセルに描画するためにカスタマイズされたビジュアルプログレスバー(キャンバス)を構築する必要があるこの特別なケースがあります、私の質問はelを得る方法ですか?レンダラコールバックでExtJS 4 GridView - セルのtdまたはdivを取得するにはどうすればいいですか?

、利用可能な値はvaluemetadatarecordrowIndexcolumnIndexstore、及びviewあります。私はview.getNodeまたはview.getCellをまだ試してみました。

ありがとうございます!

/ライオネル・

EDIT

は、さらにいくつかの採掘後、私は私のノードはレンダラが呼び出された時点で準備ができていないという事実である実現、つまり、view.getNodeview.getCellが実際にある作業します遅延しています(常にnullを返します)

回避策は、setTimeoutを使用して、ノードの準備が整った後に要素をレンダリングします。これは間違いなくケースを扱う最善の方法ではありません。任意の提案はとにかく歓迎します:)

/ライオネル・

+0

私はこのケースに対処する方法があると信じています。しかし、これが正しい方法でない場合に備えて、どんな提案も歓迎します。 –

+0

css class – atian25

+0

でDOMクエリーを使用しようとしないでくださいクリーナー方法はありませんか?私は彼らが 'view 'のどこかにelを公開すると思った。 –

答えて

7

は、この質問に対する答えは、ノードは、いくつかの遅延の後に正しく追加できるように、いくつかの遅延をシミュレートするsetTimeoutを使用することであることが判明しました。

これは私のrenderer

renderer = function (v, meta, rec, r, c, store, view) { 

    setTimeout(function() { 
     var row = view.getNode(rec); 

     //Capturing the el (I need the div to do the trick) 
     var el = Ext.fly(Ext.fly(row).query('.x-grid-cell')[c]).down('div'); 

     //All other codes to build the progress bar 
    }, 50); 
}; 

醜いですが、それは動作します。他の回答がない場合、私はそれを次の2日間で有効な回答として受け入れます。

乾杯

/ライオネル・

1

私はsetTimeoutコールの必要性を回避する、少しすっきり解決策を持っています。

基本的に私のrendererは、カスタムコンテンツを入れるセルにclassを追加します。次に、listenersの組み合わせを使用して、グリッドがページにある後にそのセルにカスタムコンテンツをレンダリングします。グリッド上の

renderer: function (value, metaData, record) { 
    metaData.tdCls = metaData.tdCls + ' customContentCell'; 
    return ''; 
} 

私は順番にGridViewのにrefreshリスナーを追加しafterrenderリスナーを追加します。私は、viewreadyやその他のイベントを使用するのが好きでしたが、4.0.2aを使っているextのバージョンでは動作しないようです。そのrefresh機能で

listeners: { 
    afterrender: function (grid) { 
     var view = this.getView(); 
     if (view) 
      view.on('refresh', gridRenderCustomContent, this); 
    } 
} 

私は、すべてのレコードをループし、細胞内にコンテンツをレンダリング。次のような、単にセルにextコンテナを追加するだけで、基本として動作するはずです。

関連する問題