ビール片手にコーディングです。
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に載せるかなぁ。
しかし、ストレートで出してもかっこよく出るところがＥｘｔＪｓの好きなとこ。
やはり楽しい。
これで動作確認してパラメタだけをテーブル構成にあわせて作っていけば
最低限のＣＲＵＤを実装したシステムのガワができるはず。わくわく。
これでゼロからのスクラッチはなくなる。
フレームワークの拡張層ができる予定。
で、こいつを一通りシステムっぽくできたらＯｍｅｇａに載せ変えて。
あと何ヶ月かかるんだろうか。
でものんびり楽しみだ。
それっぽくなりそうだ。
少し進んだ。
うーん、早く画面周りのエフェクトとかコントロールとかいろいろを触り触りたい。。。
0 件のコメント:
コメントを投稿