Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    14
    Vote Rating
    0
    KotNaVetke is on a distinguished road

      0  

    Default Customized combobox

    Customized combobox


    I am trying to customize the picker of the combobox to gridpanel.
    I have an UI bug which I can't solve. When I put the combo inside fieldcontainer with layout of hbox and try to search , the picker pops up higher then it should be.

    first.png

    If I search second time - it miraculously pops up in correct position . After that the position is correct every time.


    second.png

    What is the problem and what can be done to fix the issue ?

    This is the combo definition


    Ext.define('NG.ux.form.field.GridComboBox', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.gridcombobox',
    minChars: 3,
    fieldLabel: 'Choose Search',
    displayField: 'name',
    valueField: 'id',
    typeAhead: false,
    anchor: '100%',
    pageSize: 10,
    autoSelect: false,
    // copied from ComboBox
    createPicker: function () {
    var me = this,
    picker,
    pickerCfg = Ext.apply({
    xtype: 'gridpanel',
    pickerField: me,
    selModel: {
    mode: me.multiSelect ? 'SIMPLE' : 'SINGLE'
    },
    floating: true,
    hidden: true,
    ownerCt: me,
    store: me.store,
    displayField: me.displayField,
    focusOnToFront: false,
    tpl: me.tpl


    }, me.listConfig, me.defaultListConfig);


    picker = me.picker = Ext.widget(pickerCfg);


    me.mon(picker, {
    itemclick: me.onItemClick,
    refresh: me.onListRefresh,
    scope: me
    });


    me.mon(picker.getSelectionModel(), {
    beforeselect: me.onBeforeSelect,
    beforedeselect: me.onBeforeDeselect,
    selectionchange: me.onListSelectionChange,
    scope: me
    });
    return picker;
    },
    listConfig: {
    loadingText: 'Searching...',
    emptyText: 'No matching posts found.',
    hideHeaders: true,
    features: [
    {
    ftype: 'grouping',
    groupHeaderTpl: '{name}',
    collapsible: false
    }],
    height: 100,
    columns: [
    {
    header: 'Name',
    dataIndex: 'name',
    flex: 1
    }
    ]
    },


    initComponent: function () {


    this.callParent(arguments);
    }
    });


    This is the layout definition


    var states = Ext.create('Ext.data.Store', {
    fields: ['id', 'name', 'category'],
    data: [
    { "id": "AL", "name": "Alabama","category":"1" },
    { "id": "AK", "name": "Alaska", "category": "2" },
    { "id": "AZ", "name": "Arizona", "category": "2" }
    //...
    ]
    });


    Ext.define('NG.view.search.GeneralSearch', {
    extend: 'Ext.form.Panel',
    alias: 'widget.generalsearch',
    store: states,
    requires: [
    'NG.ux.form.field.GridComboBox'
    ],
    title: 'Search',
    initComponent: function () {
    this.createItems();


    this.callParent(arguments);
    },


    createItems: function () {
    this.items = [{
    xtype: 'fieldcontainer',
    layout: 'hbox',
    items: [{
    xtype: 'gridcombobox',
    store: states,
    hideTrigger: true,
    hideLabel: true,
    listeners: {
    scope: this,
    select: function (arg1, arg2, arg3) {
    this.fireEvent('select', arg1, arg2, arg3);
    }
    }
    }, {
    xtype: 'button',
    text: 'one',
    scale: 'small'
    }, {
    xtype: 'button',
    text: 'two',
    scale: 'small'
    }]


    }];


    }
    });

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,805
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      1  

    Default


    I wasn't able to reproduce the issue you're seeing (tested with 4.2.1) using your test case.
    *Don't forget to wrap code in code blocks for readability

    Code:
    Ext.define('NG.ux.form.field.GridComboBox', {
        extend: 'Ext.form.field.ComboBox',
        alias: 'widget.gridcombobox',
        minChars: 3,
        fieldLabel: 'Choose Search',
        displayField: 'name',
        valueField: 'id',
        typeAhead: false,
        anchor: '100%',
        pageSize: 10,
        autoSelect: false,
        // copied from ComboBox 
        createPicker: function () {
            var me = this,
                picker,
                pickerCfg = Ext.apply({
                    xtype: 'gridpanel',
                    pickerField: me,
                    selModel: {
                        mode: me.multiSelect ? 'SIMPLE' : 'SINGLE'
                    },
                    floating: true,
                    hidden: true,
                    ownerCt: me,
                    store: me.store,
                    displayField: me.displayField,
                    focusOnToFront: false,
                    tpl: me.tpl
    
    
    
    
                }, me.listConfig, me.defaultListConfig);
    
    
    
    
            picker = me.picker = Ext.widget(pickerCfg);
    
    
    
    
            me.mon(picker, {
                itemclick: me.onItemClick,
                refresh: me.onListRefresh,
                scope: me
            });
    
    
    
    
            me.mon(picker.getSelectionModel(), {
                beforeselect: me.onBeforeSelect,
                beforedeselect: me.onBeforeDeselect,
                selectionchange: me.onListSelectionChange,
                scope: me
            });
            return picker;
        },
        listConfig: {
            loadingText: 'Searching...',
            emptyText: 'No matching posts found.',
            hideHeaders: true,
            features: [{
                ftype: 'grouping',
                groupHeaderTpl: '{name}',
                collapsible: false
            }],
            height: 100,
            columns: [{
                header: 'Name',
                dataIndex: 'name',
                flex: 1
            }]
        },
    
    
    
    
        initComponent: function () {
    
    
    
    
            this.callParent(arguments);
        }
    });
    
    
    
    
    //This is the layout definition
    
    
    
    
    var states = Ext.create('Ext.data.Store', {
        fields: ['id', 'name', 'category'],
        data: [{
                "id": "AL",
                "name": "Alabama",
                "category": "1"
            }, {
                "id": "AK",
                "name": "Alaska",
                "category": "2"
            }, {
                "id": "AZ",
                "name": "Arizona",
                "category": "2"
            }
            //...
        ]
    });
    
    
    
    
    Ext.define('NG.view.search.GeneralSearch', {
        extend: 'Ext.form.Panel',
        alias: 'widget.generalsearch',
        store: states,
        requires: [
            'NG.ux.form.field.GridComboBox'
        ],
        title: 'Search',
        initComponent: function () {
            this.createItems();
    
    
    
    
            this.callParent(arguments);
        },
    
    
    
    
        createItems: function () {
            this.items = [{
                xtype: 'fieldcontainer',
                layout: 'hbox',
                items: [{
                    xtype: 'gridcombobox',
                    store: states,
                    hideTrigger: true,
                    hideLabel: true,
                    listeners: {
                        scope: this,
                        select: function (arg1, arg2, arg3) {
                            this.fireEvent('select', arg1, arg2, arg3);
                        }
                    }
                }, {
                    xtype: 'button',
                    text: 'one',
                    scale: 'small'
                }, {
                    xtype: 'button',
                    text: 'two',
                    scale: 'small'
                }]
    
    
    
    
            }];
    
    
    
    
        }
    });
    
    
    
    
    Ext.widget('generalsearch', {
        renderTo: document.body,
        height: 500,
        width: 500
    });
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    14
    Vote Rating
    0
    KotNaVetke is on a distinguished road

      0  

    Default Indeed problem in Ext 4.2.0

    Indeed problem in Ext 4.2.0


    Thank you for your answer , indeed as soon as I upgraded to Ext 4.2.1.883 the issue was solved !

Thread Participants: 1

Tags for this Thread