PDA

View Full Version : Forcing Render Collapse Panel



Vepe
18 Feb 2010, 1:53 AM
Hi everybody!!!


I'm writing again with another problem....

We (here in my job) were using extjs 3.0.0 and everything was fine... But we decided to update to extjs 3.1.1 =D. We correct some bugs and everything else, but there is one thing that isn't working

First of all let me explain a little bit of our app... there is a grid and everytime you click in one roll it loads the data to a panel (the RuntimePanel) that is collapsed at the bottom of the page. Inside this collapsed panel there are 2 grids and 1 panel that shows more details.

The problem is... while the collapsed panel still collapsed, the panels that are inside it don't load! And if we click in one row before the pannel is uncollapsed, it crashes! The real problem is that when we click in a row, we try to set the data to a panel.body (one of the panels inside the collapsed one), but panel.boy is null, because it isn't rendered yet....

The part that crashes is inside setCommentRuntimePanel at tpl.overwrite(panel.body,dataRef).

There is a way to create this panel.body without uncollapse it? What I did to "solve" the problem is to start with it uncollapsed and collapse it as soon as I can, but it isn't very nice.... =P



The codes:


Code for the main panel




getPanel: function() {
if (this.panel === undefined)
{
var thisClass = this;
var filter = this.getRuntimeFilter();
var detail = this.getRuntimeDetail();
this.panel = new Ext.Panel({
title: "Runtimes list",
region: 'center',
loadMask: true,
layout: 'border',
items: [
filter.getPanel(),
detail.getPanel(), //this one is the collapsed
this.getList()
],
listeners: {
activate: function()
{
interfaceLoader.refresh();
}
}
});
}





Code for the collapsed Panel



getPanel: function()
{
if (this.panel === undefined)
{
var thisClass = this;
var panel = new Ext.Panel({
title: "Informations",
region: 'south',
layout: 'border',
height: 130,
frame: true,
collapsible: true,
collapsed: true,
titleCollapse: true,
split: true,
defaults: {
split: true
},
items: [
thisClass.getVariedInformationPanel(),
thisClass.getGridsPanel(),
thisClass.getCommentRuntimePanel() //this one that crashes, when
], // we try to put data in it
listeners: {
beforeexpand: function(panel, animate)
{
if(thisClass.getRuntimeId() !== undefined)
{
thisClass.setInformations(thisClass.getRuntimeId());
}
}
}
});
this.panel = panel;
}





The problem



setCommentRuntimePanel: function(identify)
{
var panel = this.getCommentRuntimePanel();
var reg = new RegExp("((http://)[a-zA-Z0-9/.+_-]+)+","gi");
var record -= this.getRuntimeGrid().getStore().getAt(this.getRuntimeGrid().getStore().find("runtimeId", identify));

var dataRef = {
commentRef: record.get("commentRef").replace(reg, "<A href='$1' target=_blank>$1</A>"),
commentRun: record.get("commentRun").replace(reg, "<A href='$1' target=_blank>$1</A>")
};

var tpl = new Ext.Template(
'<p><h2>Reference comment:</h2></p>',
'<p>{commentRef}</p><br/>',
'<p><h2>Runtime comment:</h2></p>',
'<p>{commentRun}</p>'
);

tpl.overwrite(panel.body, dataRef); // it crashes here!!!
panel.body.highlight('#c3daf9', {block:true});
},

getCommentRuntimePanel: function()
{
if (this.commentPanel === undefined)
{
this.commentPanel = new Ext.Panel({
region: 'east',
autoScroll: true,
frame:true,
width: 350,
autoWidth: false,
defaults: {
split: true
}
});
}

return this.commentPanel;

}