Displaying results in one tab panel as output of operation in another tab panel

[new2extjs]

I have two tab panels. In 1st tab, I will send an ajax request to the server. Upon success, the result should be displayed in 2nd tab panel. However initially both the panels are rendered before the ajax request is made and this request is done only after a button is pressed in 1st panel. Now, my problem is that my 2nd panel is already rendered initially and how can my 2nd panel know that the request was successful , fetch the output of ajax request and display the result only if it was successful?

[mberrie]

You can specify both a success and a failure callback when you trigger the Ajax request.

see http://docs.sencha.com/ext-js/4-0/#!...method-request

The success callback function could then call a method on the second panel and pass the loaded contents.

Not sure if you use the new MVC framework or a 'classic' architecture.

You could also define a custom 'tabload' event and have the Ajax.request callback function fire this event (with the loaded content as argument).

[new2extjs]

Thanks a lot for the reply.
I am using MVC framework.
Can you please explain more about custom 'tabload' event, what should be written in it and how to fire it?

Isn't there any function in extjs to re-render or update the content of the panel so that it would load the panel again?

[mberrie]

You can fire events on any object that extends from Ext.util.Observable e.g. any Component. For custom events you need to register the event with .addEvent([eventname]) once (in the constructor). You can then register listeners on the object with .on([eventname],
[listener]) and fireEvents with .fireEvent([eventname], [arguments]).

You can also use Ext.Application as application-wide event-bus.


A solution *without* custom event would look like this:

In your controller, register a click handler on your button. The click handler sends off the Ajax request with a success callback.
Your callback function needs a reference to the TabPanel (the one holding the first and second tab). In the callback you can then obtain the 2nd tab from the TabPanel reference and do whatever you need to do with it.

Isn't there any function in extjs to re-render or update the content of the panel so that it would load the panel again?

You could, for instance, use Panel#load to update the panel contents with the loaded html.

[new2extjs]

Hi,
Thanks a lot for reply.
I tried the second solution without custom event.
After the ajax request is called, I called a function which will be executed in the second tab. The function gets an array of objects and I want to display them items of the panel. I tried to load the panel from the function but it doesn't recognize it saying that it is undefined, may be because the panel is outside the function. How can I resolve this issue?

var Panel = new Ext.Panel({
   id: 'pPanel',
   title: 'Plots',
   height: 500,
   width: '70%',   
   layout: 'fit',
   autoScroll: 'true',
   
   items:[]
  });

//The function that is called after ajax request
loadcontent:function(){
puts the content into an array and I am trying to display it like this:
 //for adding items to the panel
  for (var i=0; i < array.length; i++) {
   Panel.add(
   { xtype: 'component',
    autoEl: {
     tag: 'img',
     src: array[i],
     width: 700,
     align: 'middle'
    }
      });
  };
//Both of them gave an error and content wasnot loaded in the panel.
   Ext.getCmp('pPanel').load(array[i]);
  or
   Panel.load(Image.array[i]);
}

Thanks in advance.

[mberrie]

I need to see more code to give specific feedback.

Ext.getCmp('pPanel').load(array[i]);

Not sure what you are trying to do here. Once you add child items to the panel there should be no need to load anything.
Adding items to an already rendered panel should make the changes appear instantly. Just to make sure you could call panel.doLayout() to force arranging the elements.

Also, you are not adding simple html to the panel, you are adding Ext UI components. There is a big difference!!

For one you will require a proper layout to be set on your panel, otherwise the items will not get arranged correctly: 'fit' layout will not work - try the 'auto' layout (is the default if you don't specify a layout) - or maybe 'hbox' or 'vbox' for the start since 'auto' can be tricky sometimes.

Maybe just add a component with html: array[i] for debugging purposes to rule out problems with the IMG component.

Depending on what you are planning to do with the images in the panel later, a better approach might be to use a XTemplate on the panel (see the tpl config property), then just call panel.update() and pass in the urls as parameter.


For your panel reference: for now you should use Ext.getCmp to make it easier. Later you should worry about the 'scope' of your loadcontent function and find a better way to obtain a reference to your panel instance.

[new2extjs]

I haven't used XTemplate before so I was just trying out with following code:

var people = ['bloom1_ 5.08 .png','bloom1_ 8.08 .png'];

var tpl = new Ext.XTemplate(
    '<p> favorite people:</p>',
    '<tpl for="people">',
        '<div> - {.}</div>',
    '</tpl>'
);
var dvThumbs = new Ext.DataView({
        autoScroll: true, 
        tpl: tpl,
        autoHeight: false, height: 410,     
        border: false
    });
var filterPanel = Ext.create('Ext.Panel', {
    bodyPadding: 5, 
    width: 900,
    title: 'Filters',
   items:[dvThumbs],
    renderTo: Ext.getBody()
});

It gives an error that "DataView requires both tpl and itemSelector configurations to be defined."

[mberrie]

I recommend you take smaller steps!

(1)
First, just use an XTemplate to render data into a DIV or the document body.

See the examples in the XTemplate API docs: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.XTemplate

(2a)
Once you have this working, step it up and use a Ext.view.View (aka DataView).

Follow the example and create a Model plus Store, as shown in the first example here: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.view.View

Then try to feed the data into the data view directly without model and store using the 'data' property.

And yes, you need to define an itemSelector: http://docs.sencha.com/ext-js/4-0/#!...g-itemSelector

(2b)
Btw, if you just need to display the images, there is no need for a data view. Data view will allow you to select images (that's why you need the itemSelector).

Otherwise use a panel, configure it with your XTemplate (=> tpl config property) and set the data (=> data config property). Then use Panel#update (see API docs) to display a different set of data (images).

hth



hth

[new2extjs]

Thanks a lot for the reply. I will try this.
I had tried without using Xtemplate and now I am facing problem with scope. My tabpanel which I have to update the images is a child of other subpanels so there seems to be some problem in displaying of items

  var filterPanel = new Ext.Panel({
   bodyPadding: 5,     //width: 900,
   width: '70%',
   layout: 'auto',
  
   items: [{
    xtype: 'datefield',
    fieldLabel: 'Start date'
   }, {
    xtype: 'datefield',
    fieldLabel: 'End date'
   }
   ],
   
   
    // renderTo: Ext.getBody()
  });
Ext.Ajax.request( { 
here i get the images and put in an array

 success : function( response ) {
// for testing I am adding this field 
filterPanel.add( {
    xtype: 'datefield',
    fieldLabel: 'this date'
   }
   
  );
}

});

Inside success function I tried to add items to panel but it doesn't display at all eventhough in console I can see that div for that item is created. Can you plz advice on how to make them visible?

[mberrie]

Try with layout: 'anchor' on the panel!

Also, after adding an item you can try to force a re-sizing of child elements using panel.doLayout(); However, in Ext4 this should not be necessary since add will do it anyway. (So I would be surprised if it makes a difference)