跟我一起學extjs5(23--模組Form的自訂的設計[1])，extjs523--

跟我一起學extjs5(23--模組Form的自訂的設計[1])，extjs523--
跟我一起學extjs5(23--模組Form的自訂的設計[1])        下面開始設計和完成一個簡單的Form的自訂過程。先準備資料，在ModuleModel.js中的data屬性下面，加入自訂Form的參數定義，下面的代碼中定義了一個新的屬性tf_formSchemes,在這個屬性下面可以定義多個formScheme，下面的例子中只加入了一個，在formScheme上，加了二個fieldSet，然後在fieldSet下面定義了若干個欄位。

// 模組的form方案，可以定義多個方案tf_formSchemes : [{tf_schemeOrder : 10,tf_schemeName : 'form方案1', // 第一個form方案tf_windowWidth : 600, // form window 的寬度tf_windowHeight : -1, // 高度-1 即為自動適應高度// 表頭分組tf_schemeGroups : [{tf_formGroupId : 1, // id號tf_formGroupOrder : 10, // 表頭分組序號tf_formGroupName : '工程項目基本資料',tf_numCols : 1, // 分欄數// 每一個表頭分組下面的欄位tf_groupFields : [{tf_formFieldOrder : 5,tf_fieldId : 10100010,tf_colspan : 1, // 此欄位佔用的欄數tf_width : -1,// 寬度，設定-1為 100%tf_isEndRow : true// 結束本行，下個欄位從新的一行開始排列}, {tf_formFieldOrder : 10,tf_fieldId : 10100020, // 工程項目名稱欄位tf_colspan : 1, // 此欄位佔用的欄數tf_width : -1,// 寬度，設定-1為 100%tf_isEndRow : true// 結束本行，下個欄位從新的一行開始排列}, {tf_formFieldOrder : 20,tf_fieldId : 10100030, // 工程項目編碼欄位tf_colspan : 1, // 此欄位佔用的欄數tf_width : -1,// 寬度，設定-1為 100%tf_isEndRow : true// 結束本行，下個欄位從新的一行開始排列}]}, {tf_formGroupOrder : 20, // 表頭分組序號tf_formGroupName : '工程項目附加資訊',tf_numCols : 2, // 分欄數tf_collapsible : true, // 此fieldSet可摺疊tf_collapsed : false, // 預設不摺疊// 每一個表頭分組下面的欄位tf_groupFields : [{tf_formFieldOrder : 10,tf_fieldId : 10100040// 建築面積}, {tf_formFieldOrder : 20,tf_fieldId : 10100050// 投資總額}, {tf_formFieldOrder : 30,tf_fieldId : 10100060,tf_isEndRow : true// 結束本行，下個欄位從新的一行開始排列// 容積率}, {tf_formFieldOrder : 40,tf_fieldId : 10100070// 計劃開工時間}, {tf_formFieldOrder : 50,tf_fieldId : 10100080// 計劃竣工時間}, {tf_formFieldOrder : 60,tf_fieldId : 10100090// 是否通過驗收}, {tf_formFieldOrder : 70,tf_fieldId : 10100100// 工程方量}]}]}]

        基礎資料準備就緒，就需要建立window了。在module目錄下建立一個新的目錄window,在 window目錄下建立檔案BaseWindow.js。

/** *  * 一個顯示、修改、新增的的視窗基類 *  */Ext.define('app.view.module.window.BaseWindow', {extend : 'Ext.window.Window',alias : 'widget.basewindow',uses : ['app.view.module.form.BaseForm'],layout : 'fit',maximizable : true,closeAction : 'hide',bodyStyle : 'padding : 2px 2px 0',shadowOffset : 30,layout : 'fit',initComponent : function() {this.maxHeight = document.body.clientHeight * 0.98;var me = this;this.formScheme = this.getViewModel().get('tf_formSchemes')[0]; // 取得第一個form方案console.log(this.formScheme);this.title = this.getViewModel().get('tf_title');this.glyph = this.getViewModel().get('tf_glyph');var w = this.formScheme.tf_windowWidth;var h = this.formScheme.tf_windowHeight;// 高度為-1表示是自適應if (w == -1 && h == -1) {this.width = 600;this.height = 400;this.maximized = true;} else {if (w != -1)this.width = Math.min(w, document.body.clientWidth - 2);if (h != -1)this.height = Math.min(h, document.body.clientHeight - 2);};if (w == -1 && h != -1) { // 寬度最大化this.width = document.body.clientWidth - 40;}this.tools = [{type : 'collapse',tooltip : '目前記錄匯出至Excel'}];this.items = [{xtype : 'baseform',viewModel : this.getViewModel(),formScheme : this.formScheme}]this.callParent(arguments);}});

        在這個window中根據，配置資訊來建立立視窗的大小和title值，然後去建立form。
        在module目錄中再建立一個form目錄，在form目錄下建立檔案BaseForm.js。在Form中設定好參數後，根據配置資訊來建立各個fieldSet。這個類的處理很複雜，要處理正常的fieldSet,還要處理tab ,accordion,以及是否是子模組的Grid的判斷，下面的程式裡已經簡化了。

/** *  * 一個form視窗的基類，新增、顯示、修改、審核、審批等功能繼承了這個視窗 *  */Ext.define('app.view.module.form.BaseForm', {extend : 'Ext.form.Panel',alias : 'widget.baseform',autoScroll : true,buttonAlign : 'center',initComponent : function() {var me = this;this.buttons = [];this.buttons.push({text : '關閉',itemId : 'close',icon : 'images/button/return.png'});me.items = [];var groups = this.formScheme.tf_schemeGroups, hasTab = false;var hasInTabPanel = false; // 是否有嵌在頁裡面的tab,var inTabPanel;Ext.each(groups, function(group) {group.tf_numCols = group.tf_numCols || me.formScheme.tf_numCols;hasTab = hasTab || (group.tf_displayMode == 'tab');hasInTabPanel = hasInTabPanel|| (group.tf_displayMode == 'intabpanel');});if (hasTab) {var tabpanel = {xtype : 'tabpanel',frame : false,border : false,bodyPadding : '5 5 5 5',items : []};groups[0].tf_displayMode = 'tab'; // 如果第一個tab忘了設定var nowtab;Ext.each(groups, function(group) {if (group.tf_displayMode == 'tab') {if (nowtab)tabpanel.items.push(nowtab);nowtab = {xtype : 'container',title : group.tf_formGroupName,items : []};}nowtab.items.push(me.createFieldSetOrSubModule(group));});tabpanel.items.push(nowtab);me.items = tabpanel;} else {me.bodyStyle = 'padding : 5px 5px 0';Ext.each(groups, function(group) {if (group.tf_displayMode == 'intabpanel') {inTabPanel = {xtype : 'tabpanel',frame : false,border : false,height : 400,items : []};Ext.apply(inTabPanel, me.getOtherSetting(group.tf_otherSetting))me.items.push(inTabPanel);} else if (group.tf_displayMode == 'intab') {var t = me.createFieldSetOrSubModule(group);t.title = group.tf_formGroupName;inTabPanel.items.push(t)} elseme.items.push(me.createFieldSetOrSubModule(group))})}me.callParent(arguments);},getOtherSetting : function(str) {if (!str)return {}elsereturn Ext.decode('{' + str + '}', true)},createFieldSetOrSubModule : function(group) {var me = this;return Ext.create('app.view.module.form.FieldSet', {autoScroll : true,viewModel : this.getViewModel(),schemeGroup : group,numCols : group.tf_numCols})},initForm : function() {},// 不是grid中調用的顯示某條記錄的資訊，可能是其他模組點擊namefields來調用的setRecordId : function(id) {var me = this;this.module.model.load(id, {success : function(record, operation, success) {// success中的record中返回的raw 資料，是字串，沒有經過decode,要自己轉成對象me.setData(Ext.create(me.module.model, Ext.decode(record.raw)));}});},setData : function(model) {this.data = model;// this.getForm().reset();if (this.data) {// Ext.suspendLayouts();this.getForm().loadRecord(this.data);// Ext.resumeLayouts(true);} elsethis.getForm().reset();// 檢查form中是否有子模組，如果有則重新整理}});

          Form的控制項建立好以後，會繼續建立每一個FieldSet的內容。在form目錄中加入檔案FieldSet.js。在這個FieldSet中，暫時還沒有加入欄位的產生。

/** *  * 產生form中的一個fieldSet的類 *  */Ext.define('app.view.module.form.FieldSet', {extend : 'Ext.form.FieldSet',alias : 'widget.formfieldset',defaultType : 'textfield',defaults : {},layout : 'anchor',config : {module : undefined, //  此模組的module定義schemeGroup : undefined, // 定義了此fieldSet的屬性以及下面需要加的欄位numCols : undefined,formtype : undefined},initComponent : function() {this.title = this.schemeGroup.tf_formGroupName;this.collapsible = this.schemeGroup.tf_collapsible;this.collapsed = this.schemeGroup.tf_collapsed;this.items = [];this.callParent(arguments);}})

        以過以上步驟，加入了 window-form-fieldset的三級控制項的建立，下面來顯示一下結果。在GridToolbar.js中，給修改按鈕加個事件：

 {text : '修改',glyph : 0xf044,itemId : 'edit',handler : 'editRecord'}

        在ModuleController.js中加入函數：

editRecord : function(button) {var window = Ext.widget('basewindow',{viewModel : this.getView().getViewModel()});window.show();},

        在Module.js 的uses 中加入  'app.view.module.window.BaseWindow'，這樣就可以運行了。




        下面一節將會加入不同種類的field。