yvan-ext/src/controls/input/combotree.js

export default function () {

    Ext.define('Yvan.ComboTree', {
        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,

        setStore(store) {
            this.store = store
            const me = this;
            if (me.store) {
                if (me.picker) {
                    me.picker.setStore(store)
                    if (me.isExpanded) {
                        me.collapse()
                        delete me.picker
                        me.expand()
                    }
                }
                this.onLoad()
                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,
                    scrollable: true,
                    // modal: true,
                    // constrain: true,
                    // constrainTo: topScope._handle.el.dom,
                    // renderTo: topScope._handle.el.dom,
                    // alignTarget: topScope._handle,
                    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(view, record);
        },

        onPickerKeyDown(treeView, record, item, index, e) {
            const key = e.getKey();
            if (key === e.ENTER || (key === e.TAB && this.selectOnTab)) {
                this.selectItem(treeView, record);
            }
        },

        selectItem(sender, 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() {
            const value = this.value;

            if (value) {
                this.setValue(value);
            }
        },

        onUpdate(store, rec, type, modifiedFieldNames) {
            const display = this.displayField;
            const me = this

            if (type === 'edit' && modifiedFieldNames &&
                Ext.Array.contains(modifiedFieldNames, display) &&
                this.value === rec.getId()) {

                me.mixins.field.setValue.call(me, this.value);
                this.setRawValue(rec.get(display));
            }
        }

    });

}