PDA

View Full Version : Reset HTML in XTemplate



mjhaston
20 Jan 2011, 10:43 AM
I have a window that contains a grid and panel below it. Like in this example: http://dev.sencha.com/deploy/dev/examples/grid/binding.html

The grid is based on a combobox. I select a member, pop up the window, select from the grid and see the details. Now I select a new member, pop up the window and beneath the grid is my last time thru details because the closeAction on my window is 'hide'.

How can I get the template/window to reset back to my original html: 'Please select an employer' ?

I can seem to "reset" the right component!





var movieTpl = new Ext.XTemplate(
'<div class="movie-details">',
'Employer: {empname} <br/>',
'Address 1: {empadr1} <br/>',
'Address 2: {empadr2} <br/>',
'Address 3: {empadr3} <br/>',
'City: {empcity} <br/>',
'State: {empst} <br/>',
'Zip: {empzip5}-{empzip4} <br/>',
'Phone: {empphone} <br/>',
'Fax: {empfax} <br/>',
'Contact Title: {emptitle} <br/>',
'Contact Title: {empcontact} <br/>',
'Contact Phone: {empcontactph} <br/>',
'Tax ID: {emptax} <br/>',
'Affiliation: {empaffiliation} <br/>',
'Country: {empcountry} <br/>',
'</div>'
);

var moviesPanel = new Ext.Window({
frame: true,
title: 'Compensation (List of employers)',
width: 600,
height: 500,
layout: 'border',
closeAction: 'hide',
items: [grid4, {
id: 'detailPanel',
region: 'center',
bodyStyle: {
background: '#ffffff',
padding: '10px'
},
html: 'Please select an employer'
}],
listeners: {
scope: this,
activate: function(panel){
this.Ext.StoreMgr.get('MyCompStore').load({
params: {
recordID: Ext.getCmp('combo-ssn').getValue(),
start: 0,
limit: 20,
dummy: 'listener-on-moviesPanel'
}
});
}
}
});
grid4.getSelectionModel().on('rowselect', function(sm, rowIdx, r){
var detailPanel = Ext.getCmp('detailPanel');
movieTpl.overwrite(detailPanel.body, r.data);
});