PDA

View Full Version : How to add an XTemplate to a panel then pass a selected record from grid to XTemplate



MOwace
13 Sep 2013, 1:52 PM
I am building a basic iTunes Search app which returns data straight from iTunes. My grid shows the Artist name, track name, and track price. When a record is selected on the grid, I want grid details + additional details (which come from same http call) to be displayed in an XTemplate inside my detail panel.So the two things I need to know here are A) how to add an XTemplate to my detail panel and B) how to pass a selected record from grid to XTemplate.

Model:

Ext.define('TunesSearch.model.Song',{
extend: 'Ext.data.Model',
fields:['artistName','trackName', 'trackPrice','collectionName','releaseDate','contentAdvisoryRating']
});

Grid:

Ext.define('TunesSearch.view.Grid',{
extend: 'Ext.grid.Panel',
xtype: 'tunesgrid',
store:'Songs',

columns: [{
text: 'Artist Name',
dataIndex: 'artistName'
},{
text: 'Track Name',
dataIndex: 'trackName'
},{
text: 'Track Price',
dataIndex: 'trackPrice'
}]
});


And lastly my Detail panel in which I tried adding an XTemplate 2 different ways by looking at examples on this forum. Neither worked>

Ext.define('TunesSearch.view.Detail',{
extend: 'Ext.panel.Panel',
xtype: 'detailpanel',
height:200,
collapsed: true,
collapsible: true,


/*listeners:{
itemdblclick: function(record){
this.getDetailPanel().expand();
var tpl = new Ext.XTemplate('<div style="margin:.75ex;padding:.75ex">',
'<ul>',
'<li>{artistName}</li>',
'<li>{collectionName}</li>',
'<li>{trackName}</li>',
'<li>{releaseDate}</li>',
'<li>{contentAdvisoryRating}</li>',
'</ul>',
'</div>');

tpl.overwrite(Ext.getDetailPanel(), record);
}
}

tpl: [
'<div style="margin:.75ex;padding:.75ex">',
'<ul>',
'<li>{artistName}</li>',
'<li>{collectionName}</li>',
'<li>{trackName}</li>',
'<li>{releaseDate}</li>',
'<li>{contentAdvisoryRating}</li>',
'</ul>',
'</div>'
]*/
})


thanks in advance!

ettavolt
15 Sep 2013, 10:55 PM
Leave the tpl config on a panel and move listener to grid. In the listener obtain a ref to panel and invoke panel.update(record.data). Also see a grid's doc for correct signature of itemdblclick event handler.