combotree

src/controls/base.ts

@@ -13,7 +13,7 @@ type DragType = 'rows-container' | 'cols-container' | 'col-item' | 'row-item'
  *      row-item rows中的一行，比如 tree / grid / panel 等等
  */
 export function baseConfig(config, dragType?: DragType) {
-    if (config.designMode && dragType) {
+    if (config && config.designMode && dragType) {
 
         let cc = ''
         switch (dragType) {

src/controls/stores.js

@@ -1,7 +1,5 @@
 import _ from 'lodash'
-import $ from 'jquery'
 import {lookupScope} from "../lib/lib";
-import {tplExpress, calcObject} from 'src/lib/systemLib';
 
 export default function () {
 

src/controls/treepicker.js

@@ -0,0 +1,180 @@
+export default function () {
+
+    Ext.define('Yvan.TreePicker', {
+        extend: 'Ext.form.field.Picker',
+        xtype: 'combotree',
+
+        triggerCls: Ext.baseCSSPrefix + 'form-arrow-trigger',
+
+        config: {
+            store: null,
+            displayField: null,
+            columns: null,
+            selectOnTab: true,
+            maxPickerHeight: 300,
+            minPickerHeight: 100,
+            minPickerWidth: 350,
+            rootVisible: true,
+        },
+
+        editable: false,
+
+        // initComponent: function () {
+        //     const me = this;
+        //     debugger
+        //     this.superclass.initComponent(arguments);
+        //     // me.mon(me.store, {
+        //     //     scope: me,
+        //     //     load: me.onLoad,
+        //     //     update: me.onUpdate
+        //     // });
+        // },
+
+        setStore(store) {
+            this.store = store
+            const me = this;
+            if (me.store) {
+                me.mon(me.store, {
+                    scope: me,
+                    load: me.onLoad,
+                    update: me.onUpdate
+                });
+            }
+        },
+
+        createPicker() {
+            const me = this
+            const picker = new Ext.tree.Panel({
+                    border: false,
+                    baseCls: Ext.baseCSSPrefix + 'boundlist',
+                    shrinkWrapDock: 2,
+                    store: me.store,
+                    floating: true,
+                    rootVisible: me.rootVisible,
+                    displayField: me.displayField,
+                    columns: me.columns,
+                    minHeight: me.minPickerHeight,
+                    maxHeight: me.maxPickerHeight,
+                    minWidth: me.minPickerWidth,
+                    manageHeight: false,
+                    shadow: false,
+                    listeners: {
+                        scope: me,
+                        itemclick: me.onItemClick,
+                        itemkeydown: me.onPickerKeyDown
+                    }
+                }),
+                view = picker.getView();
+
+            if (Ext.isIE9 && Ext.isStrict) {
+                view.on({
+                    scope: me,
+                    highlightitem: me.repaintPickerView,
+                    unhighlightitem: me.repaintPickerView,
+                    afteritemexpand: me.repaintPickerView,
+                    afteritemcollapse: me.repaintPickerView
+                });
+            }
+            return picker;
+        },
+
+        repaintPickerView() {
+            const style = this.picker.getView().getEl().dom.style;
+            style.display = style.display;
+        },
+
+        onItemClick(view, record, node, rowIndex, e) {
+            this.selectItem(record);
+        },
+
+        onPickerKeyDown(treeView, record, item, index, e) {
+            const key = e.getKey();
+            if (key === e.ENTER || (key === e.TAB && this.selectOnTab)) {
+                this.selectItem(record);
+            }
+        },
+
+        selectItem(record) {
+            var me = this;
+            me.setValue(record.getId());
+            me.fireEvent('select', me, record);
+            me.collapse();
+        },
+
+        onExpand() {
+            const picker = this.picker;
+            const store = picker.store;
+            const value = this.value;
+            let node;
+
+            if (value) {
+                node = store.getNodeById(value);
+            }
+
+            if (!node) {
+                node = store.getRoot();
+            }
+
+            picker.ensureVisible(node, {
+                select: true,
+                focus: true
+            });
+        },
+
+        setValue(value) {
+            const me = this;
+            console.log('setValue', value)
+            me.value = value;
+
+            if (!me.store || me.store.loading) {
+                // Called while the Store is loading. Ensure it is processed by the onLoad method.
+                return me.mixins.field.setValue.call(me, value);
+                // return me;
+            }
+
+            let record = value ? me.store.getNodeById(value) : me.store.getRoot();
+            if (value === undefined) {
+                record = me.store.getRoot();
+                console.log('setValue', record.getId())
+                me.value = record.getId();
+                return me.mixins.field.setValue.call(me, value);
+
+            } else {
+                record = me.store.getNodeById(value);
+            }
+
+            // set the raw value to the record's display field if a record was found
+            me.setRawValue(record ? record.get(me.displayField) : '');
+
+            return me.mixins.field.setValue.call(me, value);
+        },
+
+        getSubmitValue() {
+            return this.value;
+        },
+
+        getValue() {
+            return this.value;
+        },
+
+        onLoad() {
+            var value = this.value;
+
+            if (value) {
+                this.setValue(value);
+            }
+        },
+
+        onUpdate(store, rec, type, modifiedFieldNames) {
+            var display = this.displayField;
+
+            if (type === 'edit' && modifiedFieldNames &&
+                Ext.Array.contains(modifiedFieldNames, display) &&
+                this.value === rec.getId()) {
+                this.setRawValue(rec.get(display));
+            }
+        }
+
+    });
+
+}

src/init.ts

@@ -18,6 +18,7 @@ import initRows from './controls/rows'
 import initCols from './controls/cols'
 import initButton from './controls/button'
 import initStores from './controls/stores'
+import initTreepicker from './controls/treepicker'
 import {lookupFn, lookupScope} from "./lib/lib"
 import * as SystemLib from './lib/systemLib'
 import './lib/fix'
@@ -122,4 +123,5 @@ export function init() {
     initCheckboxGroup()
     initRadio()
     initRadioGroup()
+    initTreepicker()
 }

src/lib/systemLib.ts

@@ -276,8 +276,20 @@ export function getParentGrid(config) {
  * @param bizKey 传入字典的参数
  */
 export function setComboStore(sender, config, getDictFn, bizKey) {
+    if (sender.xtype === 'combotree') {
+        getDictFn(bizKey, (r) => {
+            if (sender.rendered) {
+                // 异步回传
+                sender.setStore(new Ext.data.TreeStore({root: r}))
+
+            } else {
+                // 同步回传
+                config.store = new Ext.data.TreeStore({root: r})
+            }
+        })
+        return
 
-    if (sender.$className === 'Ext.form.field.ComboBox') {
+    } else if (sender.$className === 'Ext.form.field.ComboBox') {
         getDictFn(bizKey, (r) => {
             if (sender.rendered) {
                 // 异步回传
@@ -308,14 +320,7 @@ export function setComboStore(sender, config, getDictFn, bizKey) {
                     const displayField = r.field[1]
                     editor.valueField = valueField
                     editor.setDisplayField(displayField)
-                    editor.setStore(new Ext.data.Store({
-                        field: ['id', 'text'],
-                        data: [
-                            {id: "Y", text: "启用"},
-                            {id: "N", text: "禁用"},
-                            {id: "D", text: "删除"},
-                        ]
-                    }))
+                    editor.setStore(new Ext.data.Store(r))
                 }
 
             } else {