I have the following code which executes when a user clicks a menu item from the toolbar:
var onNavClick = function(menuItm){
var center = Ext.getCmp('center');
var colHeight = center.getInnerHeight() - 40;
var col = new Ext.Panel({
layout:'column',
border: false,
items: [{
title: 'Audits',
id: 'auditList',
columnWidth: .5,
autoScroll: true,
height: colHeight,
autoLoad: 'audit-list.asp'
},{
title: 'Stats',
id: 'auditStats',
columnWidth: .5,
autoScroll: true,
height: colHeight
}]
});
center.add(col);
center.doLayout();
}
It currently takes the contents of "audit-list.asp" (this will be dynamic later, not releveant here) and appends the contents to the center region. I've tried setting center.innerHTML (and variations on that by getting direct access to the DOM element) = "" at the top of the function so that when I get down to center.add(col) , the div would be empty. Unfortunately it isn't working as expected. Is there a function I'm missing that clears out the previous contents of an element before loading new content? I've spent the last hour looking through the API but nothing jumped out at me.
:):)
Heh, apprecaite the response but I know how to skip over it if center.items doesn't exist. My problem is what to do now that i have that knowledge? I'm adding a column layout to the center region. I want to destroy any pre-existing column layout (or anything else for that matter) before adding another one to the center region. I've tried the following:
//alert(Ext.get('col'));
if(Ext.getDom('col') != null){
Ext.destroy(Ext.getDom('col'));
}
center.add(col);
center.doLayout();
which, according to the API, I thought would grab reference to the element with id 'col' and destroy it. that's not happening, as I still get div's appending to the center region (and multiple div's with id='col'). It's a bit frustrating that it's so complicated to simply add / remove content from an ext object. Any other ideas? I'm fresh out.
remove method
It uses 'items' as it's list of subcomponents, so yes, they will/should be added there whether you explicitly define them or dynamically add them.
Try giving it a better id, other than 'center'. Otherwise I'm not sure why it's not adding the panel in.
Sorry.
if(center.items && center.items.getCount()) {
for(var i=0; i
center.remove(center.items.getAt(i), true);
}
}
I also threw together this hack, which accomplishes my objective:
if(Ext.get('col') == null){
center.add(col);
} else {
Ext.get('col').dom.innerHTML = '';
center.add(col);
}
It does what I need it to, however I'm going to tinker with your suggestion as well hendricd. I've not yet encountered overriding - would I add that inside my onready function?
Either way, thanks to both of you for your help and suggestions. Para, your tips got me moving in the right direction which is all a noob developer can hope for!
You described it accurately. However, in the viewport definition where center is defined, there are initially no items:
{
region: 'center',
bodyStyle: 'padding: 20px',
autoScroll:false,
id: 'center',
margins: '5 5 5 5',
padding: '5 5 5 5',
tbar: tb
}
it's only later, when the onNavClick function is called, that something (in this case a column panel) is added to center via:
var center = Ext.getCmp('center');
...
...
...
center.add(col);
center.doLayout();
where "col" is a column layout panel object. So the question is, by adding a panel in this manner (rather than as part of items during viewport definition), does it end up in the "items" of center? It appears no - because even after the onNavClick fires, creates the col panel, adds it to center, and I subsequently try to refer to center.items - it doesn't exist.
I don't understand.
You have a panel (A) in the 'center' of a panel (CENTER), and (A) may contain other panels (OTHER) in some column format.
In CENTER's items list, A should be the only item listed. By calling CENTER.remove(A, true), it should destroy the object and elements associated with it.
The other option you have is to call CENTER'sPARENT.remove(CENTER, true) and start from scratch, although removing a 'center' panel is generally awkward.
No worries! I appreciate all of your suggestions. I'll keep hammering away, and eventually I'll figure it out. I'll post the fix when I stumble across it. Thanks again.
would I add that inside my onready function?
Before onReady would be fine.
Off the top of my head, this should work. No promises though. :)
var onNavClick = function(menuItm){
var center = Ext.getCmp('center');
var colHeight = center.getInnerHeight() - 40;
var col = new Ext.Panel({
layout:'column',
border: false,
items: [{
title: 'Audits',
id: 'auditList',
columnWidth: .5,
autoScroll: true,
height: colHeight,
autoLoad: 'audit-list.asp'
},{
title: 'Stats',
id: 'auditStats',
columnWidth: .5,
autoScroll: true,
height: colHeight
}]
});
for(var i=0; i
center.remove(center.items.getAt(i), true);
}
center.add(col);
center.doLayout();
}
can you illustrate where I might call the remove method? Do I need to remove a specific componenet from the center region? I'd prefer to just "remove everything" and then call center.add(col), without having to worry about what might already be there. If I do need to remove a specific componenent, I am unclear how I might first test for the existence of said componenet as I assume an attempt to remove a componenet that doesn't exist will result in the browser complaining. Thanks for any assistance!
As your rendering panels without items, add in this override:
//Permits Container creation without items.
Ext.override(Ext.Container,{
add : function(comp){
if(!this.items){
this.initItems();
}
var a = arguments, len = a.length;
if(len > 1){
for(var i = 0; i < len; i++) {
this.add(a[i]);
}
return;
}
if(comp){
var c = this.lookupComponent(this.applyDefaults(comp));
var pos = this.items.length;
if(this.fireEvent('beforeadd', this, c, pos) !== false && this.onBeforeAdd(c) !== false){
this.items.add(c);
c.ownerCt = this;
this.fireEvent('add', this, c, pos);
}
return c;
} else {return null;}
}
});
then...
{
region: 'center',
bodyStyle: 'padding: 20px',
autoScroll:false,
id: 'center',
margins: '5 5 5 5',
padding: '5 5 5 5',
tbar: tb,
items:
}
thanks, that gives me some direction so that I can experiment. At first attempt, there is no items collection for center so the loop fails. Is there something else that might hold reference to contained elements?
 Challenging Books For A 14 Year Old?
 First guitar : acoustic or electric?
|
Replace content in panel instead of append