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,913
    Vote Rating
    179
    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 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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi