1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    22
    Vote Rating
    0
    Aurélien Warnon is on a distinguished road

      0  

    Default [4.1 RC 3] - inputEl setWidth is ignored

    [4.1 RC 3] - inputEl setWidth is ignored


    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.

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,625
    Vote Rating
    331
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    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);
        }
    });

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Posts
    22
    Vote Rating
    0
    Aurélien Warnon is on a distinguished road

      0  

    Default


    Works like a charm, thank you !

Thread Participants: 1