1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    35
    Vote Rating
    0
    papaja is on a distinguished road

      0  

    Default Managing events

    Managing events


    I have 3 textfields which are used to remotely filter store. I attached listener to change event and whenever text changes I do store.load(...with extra parameteers for filtering...).

    This is far from optimal, since I have too many reound trips to server. Is there a way to delay execution, for example if user stopped typing for 500ms?

    Is there a way to cancel previous request and issue new one if text changes?

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,803
    Vote Rating
    605
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Check out the buffer listener option, or, Ext.util.DelayedTask.

    You'd have something that looks like this:

    Code:
    var task = new Ext.util.DelayedTask(doSomething);
    field1.on('change', runTask);
    field2.on('change', runTask);
    field3.on('change', runTask);
    
    function runTask() {
        task.delay(500);
    }
    
    function doSomething() {
        // build filters, send request
    }
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Posts
    35
    Vote Rating
    0
    papaja is on a distinguished road

      0  

    Default Almost there...

    Almost there...


    That is what I need, thanks, but it seems that I'm unable to set it up properly. Please help a little bit more.

    In controller's definition I have:
    Code:
    init: function() {
            this.control({
                'invoicelist #tbFilter textfield': {
                    change: this.onFilter
                }    
            });
        },
    ExtJS documentation for DelayedTask says: "The configuration option buffer for addListener/on will also setup a delayed task for you to buffer events."

    How to set buffer option so that it sets up DealyedTask for me? It looks like most elegant solution.

    Following your example I also tried this:
    Code:
    Ext.define('KS.controller.Invoice', {
        extend: 'Ext.app.Controller',
        stores: ['Invoices'],
        models: ['Invoice'],
        views: ['invoice.List'],
    
    
        init: function() {
            this.control({
                'invoicelist #tbFilter textfield': {
                    change: this.onFilter
                }    
            });
        },
        doFilter:function(){
    
            console.log(field.name);
            t = this.down('toolbar');
            console.log(t.id);
            //t = field.up('toolbar');
            d = t.down('datefield');
            n = t.down('textfield[name=number]');
            c = t.down('combo');        
    
            params = {};
    
            if(d.getValue())
            {
                params.date = Ext.Date.format(d.getValue(),'Y-m-d');
            }
    
            if(n.getValue())
            {
                params.number = n.getValue();
            }
            if(c.getValue())
            {
                params.partner = c.getValue();
            }
            s = this.getInvoicesStore();
            s.getProxy().extraParams=params;
            s.loadPage(1);
    
        },
        task: new Ext.util.DelayedTask(this.doFilter),
        
        onFilter: function(field, newValue, oldValue, eOpts){
            this.task.delay(1000);
        }
    
    });
    but I get Eror: "fn is undefined". It seems that task is delayed for one second but then it throws an error.

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,803
    Vote Rating
    605
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Think about the order you're doing it, essentially, you're doing:

    Code:
    var o = {
        task: new Ext.util.DelayedTask(this.foo)
    };
    "this" doesn't point to what you think for 2 reasons:
    1) Order of evaluation, everything on the RHS gets evaluated first
    2) We're talking about a class definition, you want the task to be on the instance
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha User
    Join Date
    Mar 2010
    Posts
    35
    Vote Rating
    0
    papaja is on a distinguished road

      0  

    Default Digging deeper...

    Digging deeper...


    Finally,
    I've found a way to set listener buffer option:
    Code:
    init: function() {
            this.control({
                'invoicelist #tbFilter textfield': {
                    change: {buffer:1000, fn:this.onFilter}
                }    
            });
        }
    It looks it works.

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