基础组件调整

frontend/saas-web/app/util/GridUtil.js

@@ -4,7 +4,7 @@ Ext.define('saas.util.GridUtil', {
      * @param grid grid组件
      * @param url 请求url
      */
-    getGridColumns: function(grid, url, callback) {
+    setColumns: function(grid, url) {
         Ext.Ajax.request({
             url: url,
             success: function(response, opts) {
@@ -13,9 +13,12 @@ Ext.define('saas.util.GridUtil', {
                 var store = Ext.create('Ext.data.Store', {
                     fields,
                 });
+                if(grid.showIndex) {
+                    columns.unshift({ xtype: 'rownumberer' });
+                }
                 grid.reconfigure(store, columns);
 
-                typeof callback == 'function' && callback(grid, columns);
+                grid.fireEvent('afterSetColumns', grid, columns);
             },
        
             failure: function(response, opts) {
@@ -29,14 +32,14 @@ Ext.define('saas.util.GridUtil', {
      * @param grid grid组件
      * @param url 请求url
      */
-    loadData: function(grid, url, callback) {
+    loadData: function(grid, url) {
         Ext.Ajax.request({
             url: url,
             success: function(response, opts) {
                 var data = Ext.decode(response.responseText);
                 grid.getStore().loadData(data);
 
-                typeof callback == 'function' && callback(grid, data);
+                grid.fireEvent('afterLoadData', grid, data);
             },
        
             failure: function(response, opts) {

frontend/saas-web/app/view/core/form/FormPanel.js

@@ -4,16 +4,46 @@ Ext.define('saas.view.core.form.FormPanel', {
 
     FormUtil: Ext.create('saas.util.FormUtil'),
 
-    layout: 'column',
+    controller: 'core-form-formpanel',
 
-    configUrl: '',
+    layout: 'column',
+    autoScroll: true,
+    border: 1,
+    bodyPadding: 5,
 
-    defautls: {
-        margin: '0 2 2 0',
+    fieldDefaults: {
+        margin: '0 5 5 0',
         labelAlign: 'right',
-        labelWidth: 90
+        labelWidth: 90,
+        columnWidth: 0.25,
+        blankText: '该字段不能为空'
     },
 
+    dockedItems: [{
+        xtype: 'toolbar',
+        dock: 'top',
+        style: {
+            'border-bottom': '1px solid #35baf6 !important'
+        },
+        items: [{
+            xtype: 'tbtext',
+            bind: '单据编号：{id}'
+        }, '->', {
+            xtype: 'button',
+            text: '新增',
+        }, {
+            xtype: 'button',
+            text: '保存'
+        }, {
+            xtype: 'button',
+            text: '审核'
+        }]
+    }],
+
+    items: [],
+    
+    configUrl: '',
+    
     initComponent: function() {
         var me = this;
         me.configUrl && me.FormUtil.getFormItems(me, me.configUrl);

frontend/saas-web/app/view/core/form/FormPanelController.js

@@ -0,0 +1,6 @@
+Ext.define('saas.view.core.form.FormPanelController', {
+    extend: 'Ext.app.ViewController',
+    alias: 'controller.core-form-formpanel',
+
+    
+});

frontend/saas-web/app/view/core/form/field/DetailGridField.js

@@ -0,0 +1,40 @@
+Ext.define('saas.view.core.form.field.DetailGridField', {
+    extend: 'Ext.grid.Panel',
+    xtype: 'detailGridField',
+
+    GridUtil: Ext.create('saas.util.GridUtil'),
+
+    border: 1,
+    margin: '0 5 5 0', // formpanel的fieldDefaults未生效
+    height: 300,
+
+    controller: 'core-form-field-detailgridfield',
+
+    dockedItems: [{
+        xtype: 'toolbar',
+        dock: 'bottom',
+        items: [{
+            iconCls: 'x-fa fa-plus',
+            handler: 'addDetail'
+        }, {
+            iconCls: 'x-fa fa-delete',
+            handler: 'deleteDetail'
+        }, {
+            text: '审核',
+            handler: 'add10EmptyRow'
+        }]
+    }],
+
+    store: {
+        data: []
+    },
+
+    showIndex: true,
+    configUrl: '',
+
+    initComponent: function() {
+        var me = this;
+        me.configUrl && me.GridUtil.setColumns(me, me.configUrl);
+        me.callParent(arguments);
+    },
+});

frontend/saas-web/app/view/core/form/field/DetailGridFieldController.js

@@ -0,0 +1,33 @@
+Ext.define('saas.view.core.form.field.MyFieldController', {
+    extend: 'Ext.app.ViewController',
+    alias: 'controller.core-form-field-detailgridfield',
+
+    control: {
+        'grid': {
+            afterSetColumns: 'add10EmptyRow'
+        }
+    },
+
+    add10EmptyRow: function() {
+        var me = this,
+            grid = me.getView(),
+            store = grid.getStore(),
+            selectedRecord = grid.selModel.lastSelected,
+            datas = [];
+
+        Ext.Array.each(new Array(10), function() {
+            datas.push({});
+        })
+        grid.store.insert(store.indexOf(selectedRecord) + 1, datas);
+    },
+
+    addDetail: function() {
+        var me = this,
+            grid = me.getView(),
+            store = grid.getStore(),
+            selectedRecord = grid.selModel.lastSelected;
+
+        grid.store.insert(store.indexOf(selectedRecord) + 1, {});
+    }
+
+});

frontend/saas-web/app/view/core/grid/GridPanel.js

@@ -4,14 +4,14 @@ Ext.define('saas.view.core.grid.GridPanel', {
 
     GridUtil: Ext.create('saas.util.GridUtil'),
 
+    controller: 'core-grid-gridpanel',
+
     configUrl: '',
     dataUrl: '',
 
     initComponent: function() {
         var me = this;
-        me.configUrl && me.GridUtil.getGridColumns(me, me.configUrl, function() {
-            me.dataUrl && me.GridUtil.loadData(me, me.dataUrl);
-        });
+        me.configUrl && me.GridUtil.setColumns(me, me.configUrl);
         me.callParent(arguments);
     }
 });

frontend/saas-web/app/view/core/grid/GridPanelController.js

@@ -0,0 +1,19 @@
+Ext.define('saas.view.core.grid.GridPanelController', {
+    extend: 'Ext.app.ViewController',
+    alias: 'controller.core-grid-gridpanel',
+
+    control: {
+        'grid': {
+            afterSetColumns: '_initLoadData'
+        }
+    },
+
+    _initLoadData: function() {
+        var me = this,
+            grid = me.getView(),
+            GridUtil = grid.GridUtil,
+            dataUrl = grid.dataUrl;
+        
+        dataUrl && GridUtil.loadData(grid, dataUrl);
+    }
+});

frontend/saas-web/app/view/main/MainController.js

@@ -19,7 +19,7 @@ Ext.define('saas.view.main.MainController', {
             mainTab = refs.mainTabPanel,
             // existingItem = mainTab.child(type),
             newView,
-            id = 'tab-' + nodeData.id,
+            id = 'maintab-' + nodeData.id,
             title = nodeData.text;
             existingItem = mainTab.down('[id=' + id + ']'),
             lastView = mainTab.getActiveTab();

frontend/saas-web/app/view/main/MainModel.js

@@ -28,19 +28,19 @@ Ext.define('saas.view.main.MainModel', {
                                     {
                                         id: 'list1',
                                         text: '列表界面1',
-                                        viewType: 'purchase-list-gridpanel',
+                                        viewType: 'purchase-list-gridpanel1',
                                         leaf: true
                                     },
                                     {
                                         id: 'list2',
                                         text: '列表界面2',
-                                        viewType: 'purchase-list-gridpanel',
+                                        viewType: 'purchase-list-gridpanel2',
                                         leaf: true
                                     },
                                     {
                                         id: 'form1',
                                         text: '主从表界面1',
-                                        viewType: 'form',
+                                        viewType: 'purchase-order-formpanel',
                                         leaf: true
                                     },
                                     {

frontend/saas-web/app/view/purchase/list/GridPanel.js → frontend/saas-web/app/view/purchase/list/GridPanel1.js

@@ -1,8 +1,8 @@
-Ext.define('saas.view.purchase.list.GridPanel', {
+Ext.define('saas.view.purchase.list.GridPanel1', {
     extend: 'saas.view.core.grid.GridPanel',
-    xtype: 'purchase-list-gridpanel',
+    xtype: 'purchase-list-gridpanel1',
 
-    controller: 'purchase-list-listcontroller',
+    controller: 'purchase-list-listcontroller1',
     
     configUrl: 'resources/json/gridColumns1.json',
     dataUrl: 'resources/json/gridData1.json'

frontend/saas-web/app/view/purchase/list/GridPanel2.js

@@ -0,0 +1,9 @@
+Ext.define('saas.view.purchase.list.GridPanel2', {
+    extend: 'saas.view.core.grid.GridPanel',
+    xtype: 'purchase-list-gridpanel2',
+
+    controller: 'purchase-list-listcontroller2',
+    
+    configUrl: 'resources/json/gridColumns2.json',
+    dataUrl: 'resources/json/gridData2.json'
+});

frontend/saas-web/app/view/purchase/list/ListController.js

@@ -1,12 +0,0 @@
-Ext.define('saas.view.purchase.list.ListController', {
-    extend: 'Ext.app.ViewController',
-    alias: 'controller.purchase-list-listcontroller',
-
-    control: {
-        'grid': {
-            itemClick: function() {
-                console.log('grid1: click.....');
-            }
-        }
-    },
-});

frontend/saas-web/app/view/purchase/list/ListController1.js

@@ -0,0 +1,12 @@
+Ext.define('saas.view.purchase.list.ListController1', {
+    extend: 'saas.view.core.grid.GridPanelController',
+    alias: 'controller.purchase-list-listcontroller1',
+
+    control: {
+        'grid': {
+            itemClick: function() {
+                console.log('grid1: click.....');
+            }
+        }
+    },
+});

frontend/saas-web/app/view/purchase/list/ListController2.js

@@ -0,0 +1,12 @@
+Ext.define('saas.view.purchase.list.ListController2', {
+    extend: 'saas.view.core.grid.GridPanelController',
+    alias: 'controller.purchase-list-listcontroller2',
+
+    control: {
+        'grid': {
+            itemClick: function() {
+                console.log('grid2: click.....');
+            }
+        }
+    },
+});

frontend/saas-web/app/view/purchase/order/FormController.js

@@ -0,0 +1,6 @@
+Ext.define('saas.view.purchase.order.FormController', {
+    extend: 'saas.view.core.form.FormPanelController',
+    alias: 'controller.purchase-order-formcontroller',
+
+
+});

frontend/saas-web/app/view/purchase/order/FormModel.js

@@ -0,0 +1,14 @@
+Ext.define('saas.view.purchase.order.FormModel', {
+    extend: 'Ext.app.ViewModel',
+    alias: 'viewmodel.purchase-order-formmodel',
+
+    data: {
+        id: 'TC-1032301'
+    },
+
+    formulas: {
+        sum: function(get) {
+            return get('num1') + get('num2');
+        }
+    }
+});

frontend/saas-web/app/view/purchase/order/FormPanel.js

@@ -0,0 +1,10 @@
+Ext.define('saas.view.purchase.order.FormPanel', {
+    extend: 'saas.view.core.form.FormPanel',
+    xtype: 'purchase-order-formpanel',
+
+    controller: 'purchase-order-formcontroller',
+    viewModel: 'purchase-order-formmodel',
+
+    configUrl: 'resources/json/formItems.json',
+
+});

frontend/saas-web/resources/json/detailGridColumns1.json

@@ -0,0 +1,17 @@
+[{
+    "text": "列1",
+    "dataIndex": "col1",
+    "width": 100
+}, {
+    "text": "列2",
+    "dataIndex": "col2",
+    "width": 200
+}, {
+    "text": "列3",
+    "dataIndex": "col3",
+    "width": 400
+}, {
+    "text": "列4",
+    "dataIndex": "col4",
+    "width": 600
+}]

frontend/saas-web/resources/json/formItems.json

@@ -26,4 +26,36 @@
     "fieldLabel": "和",
     "allowBlank": false,
     "columnWidth": 1
+}, {
+    "xtype": "detailGridField",
+    "columnWidth": 1,
+    "configUrl": "resources/json/detailGridColumns1.json"
+}, {
+    "xtype": "datefield",
+    "name": "createTime",
+    "bind": "{createTime}",
+    "fieldLabel": "制单日期",
+    "allowBlank": true,
+    "columnWidth": 0.25 
+}, {
+    "xtype": "textfield",
+    "name": "creator",
+    "bind": "{creator}",
+    "fieldLabel": "制单人",
+    "allowBlank": true,
+    "columnWidth": 0.25 
+}, {
+    "xtype": "textfield",
+    "name": "field1",
+    "bind": "{field1}",
+    "fieldLabel": "field1",
+    "allowBlank": true,
+    "columnWidth": 1 
+}, {
+    "xtype": "textfield",
+    "name": "field2",
+    "bind": "{field2}",
+    "fieldLabel": "field2",
+    "allowBlank": true,
+    "columnWidth": 1 
 }]