rows / cols / base

src/Defaults.ts

@@ -3,3 +3,15 @@ export const windows = {
     width: 900,
     height: 600,
 }
+
+export const combo = {
+    labelAlign: 'right',
+    labelWidth: 70,
+    selectOnFocus: true,
+}
+
+export const maintab = {}
+
+export const rows = {}
+
+export const cols = {}

src/controls/base.ts

@@ -0,0 +1,55 @@
+import _ from 'lodash'
+
+type DragType = 'row-container' | 'col-container' | 'col-item' | 'row-item'
+
+/**
+ * 构建所有组件的公共属性
+ * @param config 原始config
+ * @param dragType 组件模式
+ *      不填，代表不能在设计时被拖拽
+ *      row-container 是一个rows容器
+ *      col-container 是一个cols容器
+ *      col-item cols中的一个格子（非容器）,比如 textfield / combofield 等等
+ *      row-item rows中的一行，比如 tree / grid / panel 等等
+ */
+export function baseConfig(config, dragType?: DragType) {
+    if (config.designMode && dragType) {
+
+        let cc = ''
+        switch (dragType) {
+            case "col-container":
+                cc = 'design_col_container'
+                break
+
+            case "col-item":
+                cc = 'design_col_item'
+                break
+
+            case "row-container":
+                cc = 'design_row_container'
+                break
+
+            case "row-item":
+                cc = 'design_row_item'
+                break
+        }
+
+        if (typeof config.cls === 'string') {
+            _.extend(config, {
+                cls: [config.cls, 'yvan_design', cc]
+            })
+
+        } else if (_.isArray(config.cls)) {
+            _.extend(config, {
+                cls: [...config.cls, 'yvan_design', cc]
+            })
+
+        } else {
+            _.extend(config, {
+                cls: ['yvan_design', cc]
+            })
+        }
+    }
+
+    return config
+}

src/controls/cols.js

@@ -0,0 +1,24 @@
+import _ from 'lodash'
+import {cols} from '../Defaults'
+import {baseConfig} from "./base";
+
+export default function () {
+
+    Ext.define('Yvan.Cols', {
+        extend: 'Ext.container.Container',
+        xtype: 'cols',
+
+        constructor(config) {
+            const self = this
+            const newConfig = _.defaultsDeep({
+                // 强制性属性
+                layout: 'hbox',
+                minHeight: config.designMode ? 32 : 0
+
+            }, baseConfig(config, 'col-container'), config, cols)
+
+            this.superclass.constructor.call(self, newConfig)
+        },
+    });
+
+}

src/controls/combo.js

@@ -1,13 +1,35 @@
+import _ from 'lodash'
+import {combo} from '../Defaults'
+import {invokeMethod} from "../utils";
+import {baseConfig} from "./base";
+
 export default function () {
-    const initComponentOrgin = Ext.form.field.ComboBox.prototype.initComponent
+    const cc = Ext.form.field.ComboBox.prototype.constructor
+    const {initComponent} = Ext.form.field.ComboBox.prototype
     Ext.form.field.ComboBox.override({
-        initComponent: function () {
-            if (this.allowBlank === false || this.validateBlank === true) {
-                this.beforeLabelTextTpl = [
-                    '<span style="color:red;font-weight:bold" data-qtip="必填选项">*</span>'
-                ];
-            }
-            initComponentOrgin.call(this)
+        constructor(config) {
+            const newConfig = _.defaultsDeep({
+                // 强制属性
+            }, baseConfig(config, 'col-item'), config, combo)
+
+            cc.call(this, newConfig)
+        },
+
+        initComponent() {
+            this.on({
+                focus: {
+                    fn(sender) {
+                        sender.expand();
+                        this.doQuery(this.allQuery, true);
+                    },
+                },
+            })
+
+            initComponent.call(this)
+        },
+
+        reload() {
+
         }
     });
 }

src/controls/rows.js

@@ -0,0 +1,27 @@
+import _ from 'lodash'
+import {rows} from '../Defaults'
+import {baseConfig} from "./base";
+
+export default function () {
+
+    Ext.define('Yvan.Rows', {
+        extend: 'Ext.container.Container',
+        xtype: 'rows',
+
+        constructor(config) {
+            const self = this
+            const newConfig = _.defaultsDeep({
+                // 强制性属性
+                layout: 'anchor', border: false,
+                defaults: {
+                    border: false, anchor: '100%',
+                    margin: '0 0 5 0',
+                },
+
+            }, baseConfig(config, 'row-container'), config, rows)
+
+            this.superclass.constructor.call(self, newConfig)
+        },
+    });
+
+}

src/controls/textfield.js

@@ -7,13 +7,13 @@ export default function () {
      */
     const t1 = Ext.form.field.Text.prototype.initComponent
     Ext.form.field.Text.override({
-        initComponent: function () {
+        initComponent(config) {
             if (this.allowBlank === false || this.validateBlank === true) {
                 this.beforeLabelTextTpl = [
                     '<span style="color:red;font-weight:bold" data-qtip="必填选项">*</span>'
                 ];
             }
-            t1.call(this)
+            t1.call(this, config)
         }
     });
 }

src/init.ts

@@ -2,6 +2,8 @@ import _ from 'lodash'
 import initMainTab from './controls/MainTab'
 import initTextfield from './controls/textfield'
 import initCombo from './controls/combo'
+import initRows from './controls/rows'
+import initCols from './controls/cols'
 
 export function init() {
     // 引入 filters 过滤插件
@@ -54,4 +56,6 @@ export function init() {
     initMainTab()
     initTextfield()
     initCombo()
+    initRows()
+    initCols()
 }