PDA

View Full Version : How to Reload Items of Sencha Extjs Tabpanel



tameen
30 Jan 2015, 1:38 AM
How to update/refresh/reload tabpanel on changing its item list -


Ext.create('Ext.panel.Panel', {
width: '100%',
height: '100%',
renderTo: Ext.getBody(),
layout: { type: 'hbox', // Arrange child items vertically
align: 'stretch', // Each takes up full width
},
items: [
{
xtype: 'tabpanel',
id : 'tabb',
height: 100,
Width:100,
items: [abc('-1.788', '53.571')],
flex : 1
},
{ xtype: 'splitter' // A splitter between the two child items }, { // Details Panel specified as a config object (no xtype defaults to 'panel'). xtype: 'grid',
store: Ext.data.StoreManager.lookup('simpsonsStore'), columns: [{
text: 'Name',
dataIndex: 'name'
},
{
text: 'Lat',
dataIndex: 'lat',
flex: 1 },
{
text: 'Lon',
dataIndex: 'lon'
}],
listeners : {
itemdblclick : function(grid,record){ Ext.getCmp('tabb').items.items[0].map.center.lat = record.data.lat;

Ext.getCmp('tabb').items.items[0].map.center.lon = record.data.lon;

Ext.getCmp('tabb').getUpdate().load(); //PROBLEM HERE // HOW TO RELOAD OR REFRESH THE TAB PANEL AFTER CHANGING ITEMS -

console.log(Ext.getCmp('tabb'));
}},

flex: 2 }] // Use 2/3 of Container's height (hint to Box layout) });

michielh
31 Jan 2015, 1:52 PM
You could move the addition of the items to a seperate function that adds them. Use a constructor to call that function. Then make a 'reload' function that calls 'removeAll()' and then readds the items using the aforementioned method.

joel.watson
1 Feb 2015, 5:27 AM
Hi michielh--

I don't see where you're changing the "items" of the tab panel (e.g., adding/removing). I would make the component whose properties you are modifying responsible for updating itself.

Thanks!
Joel

michielh
1 Feb 2015, 1:39 PM
@joel A great suggestion, but if the contents are too dynamic (different number or type of components) then that would be very hard.