Ext.Gridの個人的な覚書

表示したときに、データに依存した背景色などでレコードを表示したいとき。
まずはそのスタイルを定義。

				<style type='text/css'>
					/* ステータスに対応するスタイル 例：OK */
					.ok_style {
						background-color: red;
					}
				</style>
			

次に、GridPanelのviewConfig、getRowClassで行のスタイルクラスを動的に変える。

				var grid = new Ext.grid.GridPanel({
					/*・・・略・・・*/
					viewConfig: {
						getRowClass : function (rec, index, params, store) {
							var cls = '';
							var status = rec.get('データレコード定義のstatusカラム名');
							if (status == 'OK') {
								cls = 'ok_style'; /* スタイルで定義した名前を設定 */
							}
							return cls; /* スタイルを戻す */
						}
					}
				});
			

おわり。

デフォルトでは行をクリックすると選択色になりますが、これを殺したい。
Ext処理の最後の方に

				Ext.onReady(function(){
					var grid = new Ext.grid.GridPanel({
						/*・・・略・・・*/
					)};
					/*・・・略・・・*/
					grid.getSelectionModel().selectRow = Ext.emptyFn;
				});
			

Ext.emptyFnで上書きしちゃうわけね。
おわり。

スタイルx-grid3-row-overを上書き。

				<style type='text/css'>
					/* マウスカーソルが上にあるときの行スタイル */
					.x-grid3-row-over {
						background: blue;
					}
				</style>
			

おわり。

JavaScriptで現在表示しているレコード位置をサーバーに送って、戻りで設定する処理がほしかったのですが。

				var store = null;
				function hoge() {
					/* store.lastOptions.params.startで取れます */
					alert(store.lastOptions.params.start);
					/* TODO store.lastOptions.params.startをサーバーにPost */
				}
				Ext.onReady(function(){
					var jsonData = piyopiyo;
					/*・・・略・・・*/
					store = new Ext.data.Store({
						/*・・・略・・・*/
					});
					/*・・・略・・・*/
					if (jsonData != null) {
						/* ターゲット設定 */
						grid.render('画面のグリッドID');
						/* データ取得定義 */
						store.load({
							/* ページング設定開始終了 */
							params: {
								start: hogehoge /* ← TODO サーバーから戻ったときに、ここに設定 */
								limit:10
							}
						});
					}
				});
			

おわり。

Ext.ux.data.PagingMemoryProxyなどでメモリ上のデータをグリグリし、
Ext.PagingToolbarでページングしちゃう場合、リフレッシュボタンは微妙。。。
消してみました。

				Ext.onReady(function(){
					var grid = new Ext.grid.GridPanel({
						/*・・・略・・・*/
					)};
					/*ツールバーのリフレッシュを隠す*/
					grid.bottomToolbar.refresh.hidden = true;
					/*・・・略・・・*/
				});
			

おわり。

意外にもこんなことが出来ない?
ホントは簡単に出来るのかな。。。
fields:のrenderでinputのcheckboxってしちゃった方が楽なんだけど、見栄えがね。Extじゃなくなっちゃう。。。
で、セットしてみました。
下の例ではpostするときの値の取得もこんな感じです。

				var sm;	/*CheckboxSelectionModel*/
				function hoge() {
					/* 選択されたレコードはこんな感じで取得、あとはpostするだけ*/
					var records = sm.getSelections();
					for (var i = 0; i < records.length; i++) {
						alert(records[i].data);
					}
				}
				Ext.onReady(function(){
					/*・・・略・・・*/
					var reader = new Ext.data.JsonReader({
						root: 'root',
						/* データレコード定義 */
						fields: [
							{name: 'flg',        type: 'boolean'},
							/*・・・略・・・*/
						]
					});
					/*・・・略・・・*/

					/*CheckboxSelectionModel*/
					sm = new Ext.grid.CheckboxSelectionModel({
						dataIndex: 'flg' /* データインデックス。このフラグで設定したいのだが。 */
					});
					/*データグリッド定義*/
					var grid = new Ext.grid.GridPanel({
						sm: sm,
						/* データ取得定義 */
						store: store,
						/* グリッドカラム定義 */
						columns: [
							sm,
							/*・・・略・・・*/
						],
						/*・・・略・・・*/
					})
					/*チェックボックス初期、選択済設定*/
					grid.on('viewready', function(grid) {
						var count = grid.store.getCount();
						var dataIndex = grid.getSelectionModel().dataIndex;
						for (var i = 0; i < count; i++) {
							var dataIndexValue = grid.getStore().getAt(i).data[dataIndex];
							if (dataIndexValue) {
								grid.getSelectionModel().selectRow(i, true);
							}
						}
					});
				});
			

グリッドの描画完了イベント「viewready」で、各行にgetSelectionModel().selectRowでセットしてあげなきゃならない。。。
メンドクサ。。。
で、これだと、1ページ目しか設定されない。ページングをしている場合は、ちょっと変更。

				var sm;	/*CheckboxSelectionModel*/
				function hoge() {
					/* 選択されたレコードはこんな感じで取得、あとはpostするだけ*/
					var records = sm.getSelections();
					for (var i = 0; i < records.length; i++) {
						alert(records[i].data);
					}
				}
				Ext.onReady(function(){
					/*・・・略・・・*/
					var reader = new Ext.data.JsonReader({
						root: 'root',
						/* データレコード定義 */
						fields: [
							{name: 'flg',        type: 'boolean'},
							/*・・・略・・・*/
						]
					});

					/*・・・略・・・*/
					/*CheckboxSelectionModel*/
					sm = new Ext.grid.CheckboxSelectionModel({
						dataIndex: 'flg' /* データインデックス。このフラグで設定したいのだが。 */
					});
					/*データグリッド定義*/
					var grid = new Ext.grid.GridPanel({
						sm: sm,
						/* データ取得定義 */
						store: store,
						/* グリッドカラム定義 */
						columns: [
							sm,
							/*・・・略・・・*/
						],
						/*・・・略・・・*/
						/* ページング処理定義 */
						bbar: new Ext.PagingToolbar({
							/*・・・略・・・*/
							/* チェックボックス初期、選択済設定 */
							,listeners: {
								change: function(obj, d) {
									var count = grid.store.getCount();
									var dataIndex = grid.getSelectionModel().dataIndex;
									for (var i = 0; i < count; i++) {
										var dataIndexValue = grid.getStore().getAt(i).data[dataIndex];
										if (dataIndexValue) {
											grid.getSelectionModel().selectRow(i, true);
										}
									}
								}
							}
						})
						/*・・・略・・・*/
					})
					/*チェックボックス初期、選択済設定*/
					grid.on('viewready', function(grid) {
						grid.bottomToolbar.doRefresh();
					});
				});
			

Ext.PagingToolbarにlistenersを設定し、changeイベントのたびにセットしてあげるような感じになります。
グリッドの描画完了イベント「viewready」の方は、ツールバーのリフレッシュdoRefresh()を
呼び出す感じにしてあげると、doRefresh()でchangeが呼び出されます。

ただこれだとページ遷移ごとに初期化されてしまいます（チェック内容を保管してない）。
必要に応じてbeforechangeイベントで値を保管してあげたりする必要があります。

おわり。