Ext.data.DataProxyを継承してGearsのデータベースに対応するProxyを作る


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側でやれば速いんだろうけどなあ