PDA

View Full Version : Removing components and resetting their default configs



romerve
9 May 2012, 7:42 AM
Hello,

I have several panels created and rendered with collapsed: true. I am having a little problem. If the user has expanded any of the panels and the page gets cleared by triggering the following event:


clearClick: function() {
for( var i = 0; i <= this.resultRecords.length - 1; i++)
{
Ext.getCmp('item-' + this.resultRecords[i].custPn).destroy();
}


and then the user searches for items again, some of the panels will render already expanded.

Shouldnt the destroy() clean everything related to that object??


displayResults: function( response ) {
var records = response.data;
this.resultRecords = records;


for ( var i = 0; i <= records.length - 1; i++ )
{
Ext.widget('queresult', {
id: 'item-' + records[i].custPn,
title: 'Part# ' + records[i].custPn,
items: [{
bodyStyle: 'padding: 10px; padding-bottom: 20px;',
data: records[i],
tpl: new Ext.XTemplate(


As you can see above, every time i need to display results, i am creating new panels.

How can i make sure that everything gets set to "default" when i destroy my panels?

Thanks.

jay@moduscreate.com
13 May 2012, 4:58 AM
Seeing Ext.getCmp inside of code just makes me shudder. You also seem like you're overnesting, this is especially true if your expandable panel is only hosting one child (which is another panel by default!).

How are you rendering this components? Your second code snippet speaks nothing of how they are added to the dom.

romerve
15 May 2012, 7:02 AM
Seeing Ext.getCmp inside of code just makes me shudder. You also seem like you're overnesting, this is especially true if your expandable panel is only hosting one child (which is another panel by default!).

How are you rendering this components? Your second code snippet speaks nothing of how they are added to the dom.

All the panels get rendered with "Ext.widget" in the for loop.


displayResults: function( response ) {
var records = response.data;
this.resultRecords = records;

Ext.get('sts-info').destroy();


for ( var i = 0; i <= records.length - 1; i++ )
{
Ext.widget('queresult', {
id: 'item-' + records[i].custPn,
title: 'Part# ' + records[i].custPn,
items: [{
bodyStyle: 'padding: 10px; padding-bottom: 20px;',
data: records[i],
tpl: new Ext.XTemplate(
'<table width="100%">',
'<tr>',
'<td width="60%"><p>Part#: <b>{custPn}</b></p></td>',
'<td width="40%" align="right"><p>HST#: <b>{hstPn}</b></p></td>',
'</tr>',
'<tr>',
'<td><p>On Hand: <b>{onHand}</b></p></td>',
'</tr>',
'<tr>',
'<td><p>Description: <b>{desc}</b></p></td>',
'</tr>',
'</table><br>',
'<p>PO Details:</p>',
'<table width=80%>',
'<tr>',
'<td align="center"><b>Line #</b></td>',
'<td align="center"><b>Due Date</b></td>',
'<td align="center"><b>Qty</b></td>',
'<td align="center"><b>Status</b></td>',
'</tr>',
'<tpl for="openPoData">',
'<tr>',
'<td align="center">{#}</td>',
'<td align="center">{purch_due_date}</td>',
'<td align="center">{purch_qty}</td>',
'<td align="center">{purch_dlv_Stat}</td>',
'<tr>',
'</tpl>',
'</table>'
)
}]
});
}

}


view:


Ext.define('Que.view.Queresult',{
extend: 'Ext.panel.Panel',

alias: 'widget.queresult',


frame: true,
collapsible: true,
collapsed: true,
width: 500,
autoHeight: true,
componentCls: 'bottom_margin_10',
renderTo: 'search_results',

layout: {
type: 'fit',
defaultMargins: {
top: 8,
right: 8,
bottom: 8,
left: 8
}
}

});



I think it might be a lot more helpful to say something like: "use Ext.XXXX, instead of Ext.getCmp".