通用基础组件设计

frontend/saas-web/.gitignore

@@ -3,3 +3,9 @@ bootstrap.*
 classic.json*
 modern.json*
 .sencha
+
+### VSCODE ###
+.vscode
+
+### sencha log ###
+*.log

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

@@ -0,0 +1,3 @@
+Ext.define('saas.util.BaseUtil', {
+    
+});

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

@@ -0,0 +1,22 @@
+Ext.define('saas.util.FormUtil', {
+    /**
+     * 获得form的字段配置
+     * @param form: form组件
+     * @param url: url
+     */
+    getFormItems: function(form, url, callback) {
+        Ext.Ajax.request({
+            url: url,
+            success: function(response, opts) {
+                var items = Ext.decode(response.responseText);
+                form.add(items);
+
+                typeof callback == 'function' && callback(form, items);
+            },
+       
+            failure: function(response, opts) {
+                console.log('server-side failure with status code ' + response.status);
+            }
+        });
+    }
+});

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

@@ -0,0 +1,47 @@
+Ext.define('saas.util.GridUtil', {
+    /**
+     * 获取grid列配置
+     * @param grid grid组件
+     * @param url 请求url
+     */
+    getGridColumns: function(grid, url, callback) {
+        Ext.Ajax.request({
+            url: url,
+            success: function(response, opts) {
+                var columns = Ext.decode(response.responseText);
+                var fields = columns.map(column => column.dataIndex);
+                var store = Ext.create('Ext.data.Store', {
+                    fields,
+                });
+                grid.reconfigure(store, columns);
+
+                typeof callback == 'function' && callback(grid, columns);
+            },
+       
+            failure: function(response, opts) {
+                console.log('server-side failure with status code ' + response.status);
+            }
+        });
+    },
+
+    /**
+     * 获取grid数据
+     * @param grid grid组件
+     * @param url 请求url
+     */
+    loadData: function(grid, url, callback) {
+        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);
+            },
+       
+            failure: function(response, opts) {
+                console.log('server-side failure with status code ' + response.status);
+            }
+        });
+    }
+});

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

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

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

@@ -1,10 +1,16 @@
 Ext.define('saas.view.core.form.Panel', {
     extend: 'Ext.form.Panel',
     xtype: 'core-formpanel',
-    controller: 'core-formpanel-controller',
 
-    items: [{
-        xtype: 'textfield',
-        fieldLabel: '字段'
-    }]
+    FormUtil: Ext.create('saas.util.FormUtil'),
+
+    layout: 'column',
+
+    configUrl: '',
+
+    initComponent: function() {
+        var me = this;
+        me.FormUtil.getFormItems(me, me.configUrl);
+        me.callParent(arguments);
+    }
 });

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

@@ -1,5 +0,0 @@
-Ext.define('saas.view.core.grid.Controller', {
-    extend: 'Ext.app.ViewController',
-    alias: 'controller.core-gridpanel-controller',
-
-});

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

@@ -1,55 +1,17 @@
 Ext.define('saas.view.core.grid.Panel', {
     extend: 'Ext.grid.Panel',
     xtype: 'core-gridpanel',
-    controller: 'core-gridpanel-controller',
 
-    requires: [
-        'Ext.grid.column.Action'
-    ],
+    GridUtil: Ext.create('saas.util.GridUtil'),
 
-    multiSelect: true,
-    headerBorders: false,
+    configUrl: '',
+    dataUrl: '',
 
-    viewConfig: {
-        enableTextSelection: true
-    },
-
-    columns: [{
-        text: 'Company',
-        flex: 1,
-        dataIndex: 'name'
-    }, {
-        text: 'Price',
-        width: 95,
-        formatter: 'usMoney',
-        dataIndex: 'price'
-    }, {
-        text: 'Change',
-        width: 80,
-        renderer: 'renderChange',
-        dataIndex: 'priceChange'
-    }, {
-        text: '% Change',
-        width: 100,
-        renderer: 'renderPercent',
-        dataIndex: 'priceChangePct'
-    }, {
-        text: 'Last Updated',
-        width: 115,
-        formatter: 'date("m/d/Y")',
-        dataIndex: 'priceLastChange'
-    }, {
-        xtype: 'actioncolumn',
-        width: 50,
-        menuDisabled: true,
-        sortable: false,
-
-        items: [{
-            iconCls: 'x-fa fa-check green',
-            handler: 'onApprove'
-        }, {
-            iconCls: 'x-fa fa-ban red',
-            handler: 'onDecline'
-        }]
-    }],
+    initComponent: function() {
+        var me = this;
+        me.GridUtil.getGridColumns(me, me.configUrl, function() {
+            me.GridUtil.loadData(me, me.dataUrl);
+        });
+        me.callParent(arguments);
+    }
 });

frontend/saas-web/app/view/core/tab/Controller.js

@@ -0,0 +1,60 @@
+Ext.define('saas.view.core.tab.Controller', {
+    extend: 'Ext.app.ViewController',
+    alias: 'controller.core-tab-controller',
+
+    init: function() {
+        var me = this,
+            tab = me.getView(),
+            tabConfig = tab.tabConfig,
+            viewType = tabConfig.viewType,
+            item;
+
+        if(viewType === 'grid') {
+            item = me.createGrid(tabConfig);
+        }else if (viewType === 'form') {
+            item = me.createForm(tabConfig);
+        }else {
+            item = me.defaultTab(tabConfig);
+        }
+        tab.add(item);
+    },
+
+    defaultTab: function(tabConfig) {
+        var item = Ext.create('Ext.panel.Panel', {
+            html: '无效类型'
+        });
+        
+        return item;
+    },
+
+    createGrid: function(tabConfig) {
+        var me = this,
+            tab = me.getView(),
+            controller = tabConfig.controller,
+            configUrl = tabConfig.configUrl,
+            dataUrl = tabConfig.dataUrl,
+            grid = Ext.create('saas.view.core.grid.Panel', {
+                controller: controller,
+                tabComponent: tab,
+                configUrl: configUrl,
+                dataUrl: dataUrl
+            });
+        
+        return grid;
+    },
+
+    createForm: function(tabConfig) {
+        var me = this,
+            tab = me.getView(),
+            controller = tabConfig.controller,
+            configUrl = tabConfig.configUrl,
+            form = Ext.create('saas.view.core.form.Panel', {
+                controller: controller,
+                tabComponent: tab,
+                configUrl: configUrl
+            });
+        
+        return form;
+    },
+
+});

frontend/saas-web/app/view/core/tab/Panel.js

@@ -0,0 +1,7 @@
+Ext.define('saas.view.core.tab.Panel', {
+    extend: 'Ext.panel.Panel',
+    xtype: 'core-tab-panel',
+    controller: 'core-tab-controller',
+
+    layout: 'fit'
+});

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

@@ -62,7 +62,6 @@ Ext.define('saas.view.main.MainContainerWrap', {
     ],
 
     beforeLayout : function() {
-        console.log(11231);
         // We setup some minHeights dynamically to ensure we stretch to fill the height
         // of the viewport minus the top toolbar
 

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

@@ -9,22 +9,27 @@ Ext.define('saas.view.main.MainController', {
 
     onNavigationTreeSelectionChange: function (tree, node) {
         if (node && node.get('viewType')) {
-            this.setActiveTab(node.get('id'), node.get('viewType'), node.get('text'));
+            this.setActiveTab(node.getData());
         }
     },
 
-    setActiveTab: function(id, type, title) {
+    setActiveTab: function(nodeData) {
         var me = this,
             refs = me.getReferences(),
             mainTab = refs.mainTabPanel,
             // existingItem = mainTab.child(type),
+            newView,
+            id = 'tab-' + nodeData.id,
+            title = nodeData.text;
             existingItem = mainTab.down('[id=' + id + ']'),
-            newView;
-
-        lastView = mainTab.getActiveTab();
+            lastView = mainTab.getActiveTab();
 
         if (!existingItem) {
-            newView = me.createTab({ type: type, title: title, id: id });
+            newView = Ext.create('saas.view.core.tab.Panel', {
+                id: id,
+                title: title,
+                tabConfig: nodeData
+            });
         }
 
         if (!newView || !newView.isWindow) {
@@ -51,44 +56,6 @@ Ext.define('saas.view.main.MainController', {
         }
     },
 
-    createTab: function(tabConfig) {
-        var me = this,
-            type = tabConfig.type;
-        
-        if(type == 'grid') {
-            return me.createGrid(tabConfig);
-        }else if(type == 'form') {
-            return me.createForm(tabConfig);
-        }else {
-            var { id, title } = tabConfig;
-            return Ext.create('Ext.panel.Panel', {
-                id,
-                title,
-                html: '无效类型'
-            });
-        }
-    },
-
-    createGrid: function(tabConfig) {
-        var me = this;
-        var { id, title } = tabConfig;
-        var grid = Ext.create('saas.view.core.grid.Panel', {
-            id,
-            title
-        });
-        return grid;
-    },
-
-    createForm: function(tabConfig) {
-        var me = this;
-        var { id, title } = tabConfig;
-        var form = Ext.create('saas.view.core.form.Panel', {
-            id,
-            title
-        });
-        return form;
-    },
-
     onToggleNavigationSize: function () {
         var me = this,
             refs = me.getReferences(),

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

@@ -29,18 +29,26 @@ Ext.define('saas.view.main.MainModel', {
                                         id: 'list1',
                                         text: '列表界面1',
                                         viewType: 'grid',
+                                        controller: 'salelist1',
+                                        configUrl: 'resources/json/gridColumns1.json',
+                                        dataUrl: 'resources/json/gridData1.json',
                                         leaf: true
                                     },
                                     {
                                         id: 'list2',
                                         text: '列表界面2',
                                         viewType: 'grid',
+                                        controller: 'salelist2',
+                                        configUrl: 'resources/json/gridColumns2.json',
+                                        dataUrl: 'resources/json/gridData2.json',
                                         leaf: true
                                     },
                                     {
                                         id: 'form1',
                                         text: '主从表界面1',
                                         viewType: 'form',
+                                        controller: 'saledetail',
+                                        configUrl: 'resources/json/formItems.json',
                                         leaf: true
                                     },
                                     {

frontend/saas-web/app/view/sale/salelist/FormController.js

@@ -0,0 +1,5 @@
+Ext.define('saas.view.sale.salelist.FormController', {
+    extend: 'Ext.app.ViewController',
+    alias: 'controller.saledetail',
+
+});

frontend/saas-web/app/view/sale/salelist/FormModel.js

@@ -0,0 +1,12 @@
+Ext.define('saas.view.sale.salelist.FormModel', {
+    extend: 'Ext.app.ViewModel',
+    alias: 'viewmodel.saledetail',
+
+    formulas: {
+        sum: {
+            get: function(get) {
+                return get('num1') + get('num2');
+            }
+        }
+    }
+});

frontend/saas-web/app/view/sale/salelist/GridController1.js

@@ -0,0 +1,30 @@
+Ext.define('saas.view.sale.salelist.GridController1', {
+    extend: 'Ext.app.ViewController',
+    alias: 'controller.salelist1',
+
+    control: {
+        'grid': {
+            itemClick: function() {
+                console.log('grid1: click.....');
+            }
+        }
+    },
+
+    onDecline: function() {
+        var me = this,
+            grid = me.getView();
+            tab = grid.tabComponent;
+        
+        var win = Ext.create('Ext.window.Window', {
+            title: 'Hello',
+            html: '1111111111111',
+            height: 200,
+            width: 400,
+            layout: 'fit',
+            renderTo: tab.getEl()
+        });
+
+        win.show();
+    },
+
+});

frontend/saas-web/app/view/sale/salelist/GridController2.js

@@ -0,0 +1,14 @@
+Ext.define('saas.view.sale.salelist.GridController2', {
+    extend: 'Ext.app.ViewController',
+    alias: 'controller.salelist2',
+
+    listen: {
+        component: {
+            'grid': {
+                itemClick: function() {
+                    console.log('grid2: click.....');
+                }
+            }
+        }
+    }
+});

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

@@ -0,0 +1,29 @@
+[{
+    "xtype": "textfield",
+    "name": "text",
+    "bind": "前缀-{text}",
+    "fieldLabel": "文本",
+    "allowBlank": true,
+    "columnWidth": 1
+}, {
+    "xtype": "numberfield",
+    "name": "num1",
+    "bind": "{num1}",
+    "fieldLabel": "加数",
+    "allowBlank": false,
+    "columnWidth": 0.5
+}, {
+    "xtype": "numberfield",
+    "name": "num2",
+    "bind": "{num2}",
+    "fieldLabel": "加数",
+    "allowBlank": false,
+    "columnWidth": 0.5
+}, {
+    "xtype": "numberfield",
+    "name": "sum",
+    "bind": "{sum}",
+    "fieldLabel": "和",
+    "allowBlank": false,
+    "columnWidth": 1
+}]

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

@@ -0,0 +1,36 @@
+[{
+    "text": "Name",
+    "flex": 1,
+    "dataIndex": "name",
+    "width": 100,
+    "xtype": "",
+    "items": null
+}, {
+    "text": "Email",
+    "flex": 0,
+    "dataIndex": "name",
+    "width": 100,
+    "xtype": "",
+    "items": null
+}, {
+    "text": "Phone",
+    "flex": 0,
+    "dataIndex": "phone",
+    "width": 100,
+    "xtype": "",
+    "items": null
+}, {
+    "text": "Actions",
+    "flex": 0,
+    "dataIndex": "",
+    "width": 50,
+    "sortable": false,
+    "xtype": "actioncolumn",
+    "items": [{
+        "iconCls": "x-fa fa-check green",
+        "handler": "onApprove"
+    }, {
+        "iconCls": "x-fa fa-check red",
+        "handler": "onDecline"
+    }]
+}]

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

@@ -0,0 +1,22 @@
+[{
+    "text": "Name",
+    "flex": 1,
+    "dataIndex": "name",
+    "width": 100,
+    "xtype": "",
+    "items": null
+}, {
+    "text": "Age",
+    "flex": 0,
+    "dataIndex": "age",
+    "width": 100,
+    "xtype": "",
+    "items": null
+}, {
+    "text": "Group",
+    "flex": 0,
+    "dataIndex": "group",
+    "width": 100,
+    "xtype": "",
+    "items": null
+}]

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

@@ -0,0 +1,17 @@
+[{
+    "name": "Lisa",
+    "email": "lisa@simpsons.com",
+    "phone": "555-111-1224"
+}, {
+    "name": "Bart",
+    "email": "Bart@simpsons.com",
+    "phone": "555-111-1234"
+}, {
+    "name": "Homer",
+    "email": "homer@simpsons.com",
+    "phone": "555-111-1244"
+}, {
+    "name": "Marge",
+    "email": "Marge@simpsons.com",
+    "phone": "555-111-1254"
+}]

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

@@ -0,0 +1,25 @@
+[{
+    "name": "Lisa",
+    "age": 22,
+    "group": "group1"
+}, {
+    "name": "Lucy",
+    "age": 21,
+    "group": "group1"
+}, {
+    "name": "Malora",
+    "age": 25,
+    "group": "group2"
+}, {
+    "name": "Bart",
+    "age": 25,
+    "group": "group3"
+}, {
+    "name": "Homer",
+    "age": 28,
+    "group": "group2"
+}, {
+    "name": "Marge",
+    "age": 21,
+    "group": "group2"
+}]