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,585
    Vote Rating
    319
    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

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