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
    17,000
    Vote Rating
    649
    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
    17,000
    Vote Rating
    649
    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