[4.1 RC 3] - inputEl setWidth is ignored

**Aurélien Warnon** · 23 Apr 2012 5:57 AM

Hi.

I'm testing the 4.1 RC3 against our app and I've noticed that the setWidth() method from the 'inputEl' element in a searchfield does not work anymore.

Here is the test case i'm using:

HTML Code:

<html>
<head>
<title>Test case</title>
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript">
    Ext.onReady(function() {
        Ext.QuickTips.init();

        Ext.define('SearchField', {
            extend: 'Ext.form.field.Trigger',
            alias: 'widget.tf-searchfield',
            
            width: 180,
            
            trigger1Cls: 'x-form-clear-trigger',
            trigger2Cls: 'x-form-search-trigger',
            hasSearch : false,
            paramName : 'query',
            validationEvent:false,
            validateOnBlur:false,
            stateful: true,
            stateEvents: ['searchfieldchange'],
            
            initComponent : function() {
                this.callParent(arguments);
                
                this.addEvents(
                        "searchfieldchange",
                        "aftertrigger1",
                        "aftertrigger2"
                );
                
                this.on('specialkey', function(f, e){
                    if(e.getKey() == e.ENTER){
                        this.onTrigger2Click();
                    }
                }, this);
            },
            
            afterRender : function() {
                this.callParent(arguments);
                
                if (this.hasSearch){
                    //this.updateElementSizes(true);
                    this.triggerEl.item(0).setDisplayed('block');
                    this.fireEvent("aftertrigger2", this);
                } else {
                    this.updateElementSizes(false);
                    this.triggerEl.item(0).setDisplayed('none');
                }
                
                this.doComponentLayout();    
            },
            
            onTrigger1Click: function() {
                if(this.hasSearch) {
                    this.setValue('');
                    
                    this.hasSearch = false;
                    this.updateElementSizes(false);
                    this.triggerEl.item(0).setDisplayed('none');
                    this.doComponentLayout();
                    
                    this.fireEvent("searchfieldchange", this);
                    this.fireEvent("aftertrigger1", this);
               }        
            },
            
            onTrigger2Click : function(reload) {
                var v = this.getRawValue();
                if(v.length < 1){
                    this.onTrigger1Click();
                    return;
                }
                
                this.hasSearch = true;
                this.triggerEl.item(0).setDisplayed('block');
                this.updateElementSizes(true);
                this.doComponentLayout();
                
                this.fireEvent("searchfieldchange", this);
                this.fireEvent("aftertrigger2", this);
        },
            
            updateElementSizes : function(trigger1Visible) {
                var w = this.triggerEl.item(0).getWidth();
                if (trigger1Visible) {
                    this.triggerWrap.setWidth(this.triggerWrap.getWidth() + w);
                    this.inputEl.setWidth(this.inputEl.getWidth() - w);
                } else {
                    this.triggerWrap.setWidth(this.triggerWrap.getWidth() - w);
                    this.inputEl.setWidth(this.inputEl.getWidth() + w);
                }
            }
            
        });
        
        Ext.define('MyViewport', {
            extend: 'Ext.Viewport'
        });
        
        Ext.create('MyViewport', {
            renderTo: Ext.getBody(),
            items: [{
                region: 'center',
                items: [{xtype: 'tf-searchfield'}]
            }]
        });
});
</script>
</head>
<body>
    
</body>
</html>

Just enter anything in the search field, then press enter (or the magnifier), then press the cross. The input element should be resized to fill the hole.

Please note that this code worked in 4.0.7.

**skirtle** · 24 Apr 2012 5:24 AM

You're altering some fairly fundamental parts of the field's layout. That's fine but you're going to have to accept some upgrade headaches if you do that.

If I've understood your intentions correctly you're trying to hide one of the triggers dynamically. I think this would make a good feature request. Making it a core feature would mitigate the upgrade problems in future.

I haven't tested it very thoroughly but this seemed to work for me:

Code:

Ext.create('Ext.form.field.Trigger', {
    renderTo: Ext.getBody(),
    trigger1Cls: 'x-form-clear-trigger',
    trigger2Cls: 'x-form-search-trigger',

    onTrigger1Click: function() {
        this.triggerEl.elements[0].parent().setWidth(0);
    },

    onTrigger2Click: function() {
        this.triggerEl.elements[0].parent().setWidth(this.triggerWidth);
    }
});

**Aurélien Warnon** · 23 May 2012 5:28 AM

Works like a charm, thank you !

[4.1 RC 3] - inputEl setWidth is ignored

Thread Tools

Search Thread

Display

[4.1 RC 3] - inputEl setWidth is ignored

[4.1 RC 3] - inputEl setWidth is ignored