Results 1 to 2 of 2

Thread: setPosition on resizable Ext.form.fieldComboBox components fails

    You found a bug! We've classified it as EXTJS-6301 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    29

    Default setPosition on resizable Ext.form.fieldComboBox components fails

    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.1 rev 0


    Browser versions tested against:
    • IE9
    • Chrome17


    DOCTYPE tested against:
    • ____


    Description:
    • When you call setPosition on a Ext.form.field.ComboBox white resizable=true, the ComboBox moves, because the position is set relative to the resizer wrapper.


    Steps to reproduce the problem:
    • Add a ComboBox in an absolute container, with x and y set and resizable = {handles: "e"}
    • Call setPosition on the ComboBox with the same x and y as in the initialConfig
    • The ComboBox is moved.


    The result that was expected:
    • The ComboBox should end up on the specified position


    The result that occurs instead:
    • The ComboBox ends up on the position relative to the resizer wrapper


    Test Case:

    Code:
    Ext.application({
        launch: function() {
    
            Ext.create('Ext.window.Window', {
                title: 'Resizable Combobox',
                autoShow: true,
                width: 300,
                height: 200,
                layout: "absolute",
                items: [{
                    xtype: "combobox",
                    id: "combo",
                    y: 20,
                    x: 100,
                    width: 100,
                    height: 20,
                    resizable: {
                        handles: "e"
                    }},
                {
                    xtype: "button",
                    x: 100,
                    y: 50,
                    text: "Set combo x & y",
                    handler: function() {
                        Ext.getCmp("combo").setPosition(Ext.getCmp("combo").x, Ext.getCmp("combo").y);
                    }}]
            });
    
        }
    });?


    HELPFUL INFORMATION


    Screenshot or Video:
    • attached


    See this URL for live test case: http://jsfiddle.net/UWSbB/20/


    Debugging already done:
    • Because the ComboBox is rendered as a TABLE, it cannot have children. Therefore the resizer must wrap the TABLE and the ComboBox has x=0 and y=0. When setPosition is called the x and y are set on the ComboBox instead of on the wrapper.


    Possible fix:
    Code:
    Ext.Component.override({
        setPosition: function (left, top, animate) {
            var me = this;
            if (me.resizer) {
                var tag = me.el.dom.tagName.toUpperCase();
                if (tag == 'TEXTAREA' || tag == 'IMG' || tag == 'TABLE') {
                    me.resizer.getEl().setLeftTop(left, top);
                    me.x = left;
                    me.y = top;
                } else {
                    me.callOverridden(arguments);
                }
            } else {
                me.callOverridden(arguments);
            }
        }
    })
    Additional CSS used:
    • only default ext-all.css


    Operating System:
    • Win7 Pro

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    Thanks for the report.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

Posting Permissions

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