Results 1 to 5 of 5

Thread: Combobox on Modern framework

  1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    48
    Answers
    1

    Default Combobox on Modern framework

    I created a simple combobox for the modern framework:
    Code:
    Ext.define('Ext.field.Combobox', {
                extend: Ext.field.Select,
                alias: 'widget.combobox',
                config: {
                    autoSelect: false,
                    component: {
                        readOnly: false,
                        useMask: false
                    }
                },
                initialize: function() {
                    var me = this,
                        component = me.getComponent();
            
                    me.callParent();
            
                    component.on({
                        scope: me,
                        keyup: 'onKeyUp'
                    });
                },
                onFocus: function(e) {
                    if (this.getDisabled()) {
                        return false;
                    }
             
                    var component = this.getComponent();
                    this.fireEvent('focus', this, e);
             
                    if (Ext.os.is.Android4) {
                        component.inputElement.dom.focus();
                    }
                    this.isFocused = true;
                    
                    this.showPicker();
                },
                getTabletPicker: function() {
                    var tabletPicker = this.callParent();
                    tabletPicker.setModal(false);
                    return tabletPicker;
                },
                onKeyUp: function(e) {
                    this.getStore().filter({
                        property: this.getDisplayField(),
                        value: this.getComponent().getValue(),
                        anyMatch: true
                    });
                }
            });
    i hope this helps someone, feel free to improve it.

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Cool. Thanks for sharing your work with the community!

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    48
    Answers
    1

    Default

    A little improvement:

    Code:
    Ext.define('Ext.field.Combobox', {
        extend: Ext.field.Select,
        alias: 'widget.combobox',
        config: {
            autoSelect: false,
            component: {
                readOnly: false,
                useMask: false
            }
        },
        initialize: function() {
            var me = this,
                component = me.getComponent();
    
            me.callParent();
    
            if(!me.getSelection()) {
                component.setValue(me.config.value);
            }
            component.on({
                scope: me,
                keyup: 'onKeyUp',
                blur: 'onBlur'
            });
        },
        onFocus: function(e) {
            if (this.getDisabled()) {
                return false;
            }
     
            var component = this.getComponent();
            this.fireEvent('focus', this, e);
     
            if (Ext.os.is.Android4) {
                component.inputElement.dom.focus();
            }
            this.isFocused = true;
            
            this.showPicker();
        },
        getTabletPicker: function() {
            var tabletPicker = this.callParent();
            tabletPicker.setModal(false);
            return tabletPicker;
        },
        getPhonePicker: function() {
            var phonePicker = this.callParent();
            phonePicker.setModal(false);
            return phonePicker;
        },
        onKeyUp: function(e) {
            if(this.phonePicker) {
                this.phonePicker.setValue(null);
            }
            if(this.tabletPicker) {
                this.tabletPicker.down('list').setSelection(null);
            }
            this.getStore().filter({
                property: this.getDisplayField(),
                value: this.getComponent().getValue(),
                anyMatch: true
            });
        },
        onBlur: function() {
            if(this.tabletPicker) {
                this.onListTap();
            }
        },
        getValue: function() {
            var selection = this.getSelection();
            return selection ? selection.get(this.getValueField()) : this.getComponent().getValue();
        }
    });

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    110
    Answers
    2

    Default

    Hi,

    This above code is not working for ExtJS6.5 Modern ... Can any one help me on this.
    Dinesh GK

  5. #5
    Sencha Premium Member
    Join Date
    Oct 2013
    Location
    Slovakia
    Posts
    80
    Answers
    2

    Default

    Hi,
    since framework version 6.5.0 there is already combobox (Ext.field.ComboBox) component in modern toolkit. You don't need to use the code above.

Similar Threads

  1. Right click on modern framework
    By marco.napetti in forum Ext JS 6.x Q&A
    Replies: 5
    Last Post: 9 May 2017, 4:59 AM
  2. Replies: 1
    Last Post: 1 Feb 2016, 3:51 PM
  3. Use of Remote Combobox with CRUD Framework
    By keithcortis in forum Ext 3.x: Help & Discussion
    Replies: 44
    Last Post: 30 Sep 2009, 3:01 AM
  4. How to integrate remote combobox with CRUD framework
    By jdaum in forum Ext 2.x: Help & Discussion
    Replies: 12
    Last Post: 27 Aug 2008, 2:42 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •