http://d.hatena.ne.jp/fits/20080217/1203260584
Ext JS の DataGrid でページング処理を実装
を参考にした(というかほぼそのまま…)
var db = google.gears.factory.create('beta.database', '1.0'); db.open("hoge"); db.execute( 'CREATE TABLE IF NOT EXISTS items('+ 'id INTEGER PRIMARY KEY NOT NULL,'+ 'name TEXT NOT NULL'+ ')' ); db.execute('INSERT OR IGNORE INTO items values(NULL,"item1")'); db.execute('INSERT OR IGNORE INTO items values(NULL,"item2")');
のようなテーブルがあるとする
これが本体
SqlProxy = function(sql){ SqlProxy.superclass.constructor.call(this); this.sql = sql; }; Ext.extend(SqlProxy, Ext.data.DataProxy, { load : function(params, reader, callback, scope, arg){ var result; try { var rows = []; try{ var rs = db.execute(this.sql); while (rs.isValidRow()) { var row = []; for(var i = 0, i_n = rs.fieldCount(); i < i_n; i++){ row.push(rs.field(i)); } rows.push(row); rs.next(); } rs.close(); }catch(ex){} result = reader.readRecords(rows); var tempList = result.records; var newList = new Array(); var start = params.start; var end = start + params.limit; if (end > tempList.length) { end = tempList.length; } for (var i = start; i < end; i++) { newList.push(tempList[i]); } result.records = newList; } catch(e) { this.fireEvent("loadexception", this, arg, null, e); callback.call(scope, null, arg, false); return; } callback.call(scope, result, arg, true); }, update : function(params, records){} });
使い方
var ds = new Ext.data.Store({ proxy: new SqlProxy('SELECT * FROM items'), reader: new Ext.data.ArrayReader( {},[ {name: "id"}, {name: "name"} ]) }); var grid = new Ext.grid.GridPanel({ store: ds, columns: [ {header: 'id', sortable: true, dataIndex: 'id'}, {header: 'name', sortable: true, dataIndex: 'name'} ], bbar: new Ext.PagingToolbar({ pageSize: 10, displayInfo: true, store: ds }) }); var oWindow = new Ext.Window({ layout:'fit', width: 600, height: 400 }); oWindow.add(grid); oWindow.show(); ds.load({params:{start:0, limit:10}});
今日が初ExtJSだったんだがここまでで終了
loadのたびにいちいちデータベースから取ってくるのは無駄っぽいが、そんなに大量なデータは扱わないのでOKとしよう
ソートとかフィルタとかGears側でやれば速いんだろうけどなあ