Question

I’m using ExtJs 4.

I have a panel that looks something like this:

var panel = Ext.create('Ext.panel.Panel',{
    title: 'Current Transaction Data',
    width: 500,
    items:[
           {
               id: 'field1',
               xtype: 'textfield',
               label:'Field 1',
           },
           {
               id: 'field 2',
               xtype: 'textfield',
               label:'Field 1',
           }
    ],

})

I have a function to issue an ajax request that looks something like this:

var myDataObject;
var getData= function(callback){ 
    Ext.Ajax.request({
        url: 'MY-URL-TO-GET-DATA',
        success: function(response){
            myDataObject= Ext.JSON.decode(response.responseText)}})}

What I want to do is that after I retrieve my data object, I want to tell the panel to update with the new data. I’m looking for a call like panel.update(data).

I have seen the update() method on panel, but don’t understand how to use it. Do I override it? It says something about using templates, but I haven’t found any good examples. I’m not even sure if that’s the preferred approach for doing this.

I have done similar type things using grid panel and using a data store. In that case I can call refresh() on the data store, but I don’t want to use a grid for this particular problem.

Answer 1

You could use panel.update(data) but that just injects the text as innerHTML effectively, using the configured tpl if necessary. What are the two text fields in your panel for? You could set the text of one of those fields to the data, or add a Ext.form.field.DisplayView to the panel, and set the value of that to the data.

EDIT: As suggested in the comments below, the answer is to subclass and add a method to do the data refresh.