今日はジョギングしようと思ってたら子供の寝かしつけでぐっすりと。
ビール片手にコーディングです。
ExtJs８６でフォームに搭載するコントロールの定型句は決めたので
あとは実装を。
Gridと同様、コントローラとモデルを「わざわざ」作ってあくまでFormPanelを実装から
切り離してみたかった。
で、モデルの基底クラスはこんな感じで固めた。
///
Ext.ns('Fwx.BasicCrud');
//abstract class
//config: class Config
//コンストラクタでinitializeメソッドコールすること。
Fwx.BasicCrud.FormModel = function () {
};
Fwx.BasicCrud.FormModel.prototype = {};
(function() {
var me = this;
me.form = {};
me.configGenerator = {};
//config:formpanel.getform()=Ext.form.Basicform
me.initialize = function(config) {
var me = this;
me.configGenerator = config;
};
me.loadFailcallback = function(store, action, result, tran, r) {
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert('エラー', 'クライアントサイドでの異常。');
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert('エラー', '通信エラーが発生しました。');
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert('エラー', action.result.msg);
}
};
me.loadSuccesscallback = function(r, options, success) {
//Ext.Msg.alert('Failure', action.result.msg);
};
me.saveFailcallback = function(store, action, result, tran, r) {
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert('エラー', '入力されたフォーム情報に不備があります。');
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert('エラー', '通信エラーが発生しました。');
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert('エラー', action.result.msg);
}
};
me.saveSuccesscallback = function(r, options, success) {
Ext.Msg.alert('成功', '保存しました。');
};
me.deleteFailcallback = function(store, action, result, tran, r) {
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert('エラー', 'クライアントサイドでの異常');
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert('エラー', '通信エラーが発生しました。');
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert('エラー', action.result.msg);
}
};
me.deleteSuccesscallback = function(r, options, success) {
var me = this;
Ext.Msg.alert('成功', '削除しました。');
me.doReset();
};
me.doLoad = function(params) {
var me = this;
me.form.load({
url: me.configGenerator.getFormAPIs().read,
params: params,
waitTitle: 'サーバ接続中',
waitMsg: '読み込んでいます...',
success: me.loadSuccesscallback,
failure: me.loadFailcallback
});
};
me.doSave = function(params) {
var me = this;
me.form.submit({
clientValidation: true,
url: me.configGenerator.getFormAPIs().write,
params: params,
waitTitle: 'サーバ接続中',
waitMsg: '保存しています...',
success: me.saveSuccesscallback,
failure: me.saveFailcallback
});
};
me.doDelete = function(params) {
var me = this;
me.form.submit({
clientValidation: true,
url: me.configGenerator.getFormAPIs().destroy,
params: params,
waitTitle: 'サーバ接続中',
waitMsg: '削除しています...',
success: me.deleteSuccesscallback,
failure: me.deleteFailcallback
});
};
me.doReset = function() {
var me = this;
me.form.reset();
};
me.setForm = function(form) {
var me = this;
me.form = form;
};
}).apply(Fwx.BasicCrud.FormModel.prototype);
で、コントローラはこんなかんじだろうと。
Ext.ns('Fwx.BasicCrud');
//abstract
//config: { model: Model };
//コンストラクタでinitializeメソッドコールすること。
Fwx.BasicCrud.FormControl = function () {};
Fwx.BasicCrud.FormControl.prototype = {};
(function() {
var me = this;
//初期化処理
me.initialize = function(config) {
var me = this;
me.model = config.model;
};
me.onSave = function(params) {
var me = this;
me.model.doSave(params);
};
//Loadイベントハンドラ
me.onLoad = function(params) {
var me = this;
me.model.doLoad(params);
};
//Deleteイベントハンドラ
me.onDelete = function(params) {
var me = this;
me.model.doDelete(params);
};
//Resetイベントハンドラ
me.onReset = function() {
var me = this;
me.model.doReset();
};
}).apply(Fwx.BasicCrud.FormControl.prototype);
動かせてないからなぁ。
これから継承した具象クラス作って。
サーバサイドをちょいちょい組んで。それから動作確認ってってあれ？２４時。。
でももうチョイ。
これとGrid用とForm用のConfigパラメータクラスを作った。
Ext.ns('Owx.Crud');
Ext.ns('Fwx.BasicCrud');
//abstract
//config class for crud
Fwx.BasicCrud.Config = function () {};
Fwx.BasicCrud.Config.prototype = {};
(function() {
var me = this;
me.columnModelConfig = {};
me.readerConfig = {};
me.proxyAPIs = {};
me.formAPIs = {};
me.defaultRecord = {};
me.extGridPanelConfig = {};
me.extStoreConfig = {
autoLoad: {},
autoSave: {},
proxy: {},
reader: {},
writer: {}
};
me.pageSize = 0;
//TODO:
me.getColumnModelConfig = function() {
var me = this;
return me.columnModelConfig;
};
me.getReaderConfig = function() {
var me = this;
return me.readerConfig;
};
me.getProxyAPIs = function() {
var me = this;
return me.proxyAPIs;
};
me.getFormAPIs = function() {
var me = this;
return me.formAPIs;
}
me.getDefaultRecord = function() {
var me = this;
return me.defaultRecord;
};
me.getExtStoreConfig = function() {
var me = this;
return me.extStoreConfig;
};
me.getExtGridPanelConfig = function() {
var me = this;
return me.extGridPanelConfig;
};
me.getPageSize = function() {
var me = this;
return me.pageSize;
};
}).apply(Fwx.BasicCrud.Config.prototype);
Owx.Crud.BasicTableConfig = function() {
var me = this;
me.columnModelConfig = [
{ name: 'id', mapping: 'id', dataIndex: 'id', header: 'id', width: 100, sortable: true, hidden: false, hideable: true },
{ name: 'charCol', mapping: 'charCol', dataIndex: 'charCol', header: 'charCol', width: 100, sortable: true, hidden: false, hideable: true, editor: new ExtWrapper.TextField(), allowBlank: true },
{ name: 'datetimeCol', mapping: 'datetimeCol', dataIndex: 'datetimeCol', header: 'datetimeCol', width: 100, sortable: true, hidden: false, hideable: true, editor: new ExtWrapper.DateField() },
{ name: 'decimalCol', mapping: 'decimalCol', dataIndex: 'decimalCol', header: 'decimalCol', width: 100, sortable: true, hidden: false, hideable: true, editor: new ExtWrapper.NumberField() },
{ name: 'ntextCol', mapping: 'ntextCol', dataIndex: 'ntextCol', header: 'ntextCol', width: 100, sortable: true, hidden: false, hideable: true, editor: new ExtWrapper.NumberField() },
{ name: 'nvarcharCol', mapping: 'nvarcharCol', dataIndex: 'nvarcharCol', header: 'nvarcharCol', width: 100, sortable: true, hidden: false, hideable: true, editor: new ExtWrapper.TextField() },
{ name: 'bitCol', mapping: 'bitCol', dataIndex: 'bitCol', header: 'bitCol', width: 100, sortable: true, hidden: false, hideable: true, editor: new ExtWrapper.Checkbox()}];
me.readerConfig = [
{ name: 'id', mapping: 'id', dataIndex: 'id', header: 'id', width: 100, sortable: true, hidden: false, hideable: true },
{ name: 'charCol', mapping: 'charCol', dataIndex: 'charCol', header: 'charCol', width: 100, sortable: true, hidden: false, hideable: true, editor: new ExtWrapper.TextField() },
{ name: 'datetimeCol', mapping: 'datetimeCol', dataIndex: 'datetimeCol', header: 'datetimeCol', width: 100, sortable: true, hidden: false, hideable: true, editor: new ExtWrapper.DateField() },
{ name: 'decimalCol', mapping: 'decimalCol', dataIndex: 'decimalCol', header: 'decimalCol', width: 100, sortable: true, hidden: false, hideable: true, editor: new ExtWrapper.NumberField() },
{ name: 'ntextCol', mapping: 'ntextCol', dataIndex: 'ntextCol', header: 'ntextCol', width: 100, sortable: true, hidden: false, hideable: true, editor: new ExtWrapper.NumberField() },
{ name: 'nvarcharCol', mapping: 'nvarcharCol', dataIndex: 'nvarcharCol', header: 'nvarcharCol', width: 100, sortable: true, hidden: false, hideable: true, editor: new ExtWrapper.TextField() },
{ name: 'bitCol', mapping: 'bitCol', dataIndex: 'bitCol', header: 'bitCol', width: 100, sortable: true, hidden: false, hideable: true, editor: new ExtWrapper.Checkbox()}];
me.formConfig = [
//{ name:'id' , fieldLabel:'', width:, xtype:'', value:'', hiddenName:'', allowBlank:false},
{ name: 'id', fieldLabel: 'id', width: 100, value: '', hiddenName: '', allowBlank: true, xtype: 'ExtWrapperLabel' },
{ name: 'charCol', fieldLabel: 'charCol', width: 100, value: '', hiddenName: '', allowBlank: true, xtype: 'ExtWrapperNumberField' },
{ name: 'datetimeCol', fieldLabel: 'datetimeCol', width: 100, value: '', hiddenName: '', allowBlank: true, xtype: 'ExtWrapperDateField' },
{ name: 'decimalCol', fieldLabel: 'decimalCol', width: 100, value: '', width: 100, value: '', hiddenName: '', allowBlank: true, xtype: 'ExtWrapperNumberField' },
{ name: 'ntextCol', fieldLabel: 'ntextCol', width: 100, value: '', hiddenName: '', allowBlank: true, xtype: 'ExtWrapperTextField' },
{ name: 'nvarcharCol', fieldLabel: 'nvarcharCol', width: 100, value: '', hiddenName: '', allowBlank: true, xtype: 'ExtWrapperTextArea' },
{ name: 'bitCol', fieldLabel: 'bitCol', width: 100, value: '', hiddenName: '', allowBlank: true, xtype: 'ExtWrapperCheckbox' }
];
//Grid時のAPI
me.proxyAPIs = {
read: '/Owx/__test/data/ReadList.aspx',
create: '/Owx/__test/data/CreateList.aspx',
update: '/Owx/__test/data/UpdateList.aspx',
destroy: '/Owx/__test/data/DeleteList.aspx'
};
//Form時のAPI
me.formAPIs = {
read: '/Owx/__test/data/ReadForm.aspx',
write: '/Owx/__test/data/CreateForm.aspx',
destroy: '/Owx/__test/data/DeleteForm.aspx'
};
me.defaultRecord = {
id: '',
charCol: 'chardef',
datetimeCol: '2010/10/10',
decimalCol: '10.25',
ntextCol: '長文フリーのデフォルトー',
nvarcharCol: 'バーキャラノデフォルトー',
bitCol: 'true'
};
//me.extGridPanelConfig = {};
//me.extStoreConfig = {};
me.pageSize = 40;
};
Owx.Crud.BasicTableConfig.prototype = new Owx.Crud.TableConfig();
こいつをまるっとぶち込めば
気持ちとしてはreconfigみたいなイメージで、実装とパラメータを切り離せた実装にちかずけたはず。。
コントロールの画面表示まではＯＫ。
すごくいけてないけど、あとで何とでもなる。
詳細はWindowに載せるかなぁ。
しかし、ストレートで出してもかっこよく出るところがＥｘｔＪｓの好きなとこ。
やはり楽しい。
これで動作確認してパラメタだけをテーブル構成にあわせて作っていけば
最低限のＣＲＵＤを実装したシステムのガワができるはず。わくわく。
これでゼロからのスクラッチはなくなる。
フレームワークの拡張層ができる予定。
で、こいつを一通りシステムっぽくできたらＯｍｅｇａに載せ変えて。
あと何ヶ月かかるんだろうか。
でものんびり楽しみだ。
それっぽくなりそうだ。
少し進んだ。
うーん、早く画面周りのエフェクトとかコントロールとかいろいろを触り触りたい。。。
