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
    5,993
    Vote Rating
    212
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      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

  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