extjs: how to use ajax call in column renderer?

问题

What i've got now is this:

renderer : function(value) {
    var ret;
    var conn = new Ext.data.Connection();
    conn.request({
        method : 'POST',
        url : rsdBackend,
        params : {
            get_object_by_id : 'true',
            rsd_type : record.data.references_table,
            object_id : value,
            uid : logged_user_id
        },
        success : function(responseObject) {
            var data = Ext.decode(responseObject.responseText);
            ret = data[0].object_name;
        }
    });
    return ret;
}

If a column contains a link to another data (foreign key in database terms) i need to show the name of the object it references to.

So, the best approach i can think of is using ajax call in renderer. It works, but the problem is: how can i return response?

The above code won't work, cause retis undefined where i'm trying to return it.

How can this be done, or is there a better way?

回答1:

I don't think you will be able do this this way. Ajax call is asynchronous and renderer() function is synchronous. I can't imagine right now how you can mix it together.

You need to get all information required for renderer() functions (for all cells!) to complete before you render the grid. Why can't you create an additional store for it, load it before and then use it?

回答2:

Based on this thread Sencha forum thread

i have make an asynchronous renderer.

In my example i want to display the 'name' value of the first record in my record association.

"fileRecord_store()" is the name of my associative store ( create via "hasMany" association model )

In the grid panel you can make a renderer like this :

 { header: 'Filename',  dataIndex: 'Files_id',      flex: 2,
    renderer: function(value, meta, record, rowIndex, colIndex, store, view) {
          var divId = 'my_cell_to_update_' + record.id;
          record.columnsNameUpdate(divId);
          return String.format("<div id='" + divId + "'>Loading...</div>"); 
                }
},

and now in the model class i add this function :

columnsNameUpdate : function(divId){

    this.fileRecord_store().on('load', this.updateColumn,this, {divId : divId});
    this.fileRecord_store().load();
},

updateColumn : function(store, model, success, options){
    this.fileRecord_store().un('load', this.updateColumn,this);
    Ext.fly(options.divId).update(store.first().get('filename')); 
}

it's work fine for me !

来源：https://stackoverflow.com/questions/10331986/extjs-how-to-use-ajax-call-in-column-renderer