在ComboBox中输入新值

时间:2013-02-04 09:22:42

标签: javascript extjs extjs4 extjs4.1 extjs4.2

我正在尝试开发一个组合框,允许用户输入值得看的值,如果它在列表中丢失,它会获得viualize作为一个新值(我想到了一个留在场上的图像)和additon使该字段绑定到分配给它的模型的另一个属性。

此外,用户应该能够清除组合值。

我开始使用provided class from this guy并使用所需的设置进行扩展。我设法防止导致'x'触发器隐藏的问题,但我无法管理userinput - selection - set - clear(按表单设置值)之间的区别

这是我到目前为止所获得的片段

Ext.define('Ext.ux.form.field.InputCombo', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.inputcombo',

    trigger2Cls: 'x-form-clear-trigger',

    newRecordFieldname: null, // the name if this value is new
    originName: null, 

    initComponent: function () {
        var me = this;

        me.addEvents(
            /**
            * @event beforeclear
            * @param {Combo} Combo The combo that triggered the event
            */
            'beforeclear',
            /**
            * @event beforeclear
            * @param {Combo} Combo The combo that triggered the event
            */
            'clear'
        );

        me.callParent(arguments);

        me.on('specialkey', this.onSpecialKeyDown, me);
        me.on('afterrender', function () { 
            me.onShowClearTrigger(false); 
        }, me);

        this.on('change', function() {
            this.createdRecord(this);
        });
        this.on('select', function() {
            this.onSetExisting(this);
        });
    },

    createdRecord: function(ref) {
        ref.newRecord = true;
        ref.selectedRecord = false;
        ref.originName = ref.name;
        ref.name = ref.newRecordFieldname;
        ref.style = 'background:url(../resources/themes/images/default/dd/drop-add.gif) no-repeat left center;'; // does not work
    },

    setExisting: function(ref) {
        ref.newRecord = false;
        ref.selectedRecord = true;
        ref.style = '';
        ref.name = ref.originName;
    },

    /**
        * @private onSpecialKeyDown
        * eventhandler for special keys
        */
    onSpecialKeyDown: function (obj, e, opt) {
        if ( e.getKey() == e.ESC ) {
            this.clear();
        }
    },

    onShowClearTrigger: function (show) {
        var me = this;

        if (show) {
            me.triggerEl.each(function (el, c, i) {
                if (i === 1) {
                    el.setWidth(el.originWidth, false);
                    el.setVisible(true);
                    me.active = true;
                }
            });
        } else {
            me.triggerEl.each(function (el, c, i) {
                if (i === 1) {
                    el.originWidth = el.getWidth();
                    if (el.originWidth !== 0) { // prevent double hide
                        el.setWidth(0, false);
                        el.setVisible(false);
                        me.active = false;
                    }
                }
            });
        }
        me.updateLayout();
    },

    /* lines remoced. see linked answer */
});

我没有得到成功的工作(以及我需要帮助的地方)是显示新记录的图像,并且该字段的行为方式相同,无论我是先输入内容还是清除或设置一个值,选择一个值等等。通过知道该字段的行为安静不同或根本不起作用。

此外,它应该与即将发布的4.2版本兼容。不知道如果这个重要提及。

任何帮助表示赞赏!

0 个答案:

没有答案