View Full Version : Bug in Grid

2 Apr 2007, 1:17 PM
I have a grid inside a <div> thats is inside a contentpanel

when I close the panel and create it again (never reloading the page) i get an error.

screenshot available

2 Apr 2007, 11:18 PM
The panel's DOM elements are removed when the panel is closed. Normally, that's what you want: the user closes the panel and it "goes away".

You will have to access the TabPanelItem that's created as a result of adding the ContentPanel to the Region. Add a handler to its "onbeforeclose" event, and save your grid container DOM element: move it to some place else in the document and add the class "x-layout-inactive-content" to it until you need it again.

When you need it on another ContentPanel, just remove the class, and re-add the GridPanel (you should have saved a reference to the GridPanel object that you created).

3 Apr 2007, 4:37 AM
Question... why does the dome element of the grid have to be saved? Couldn't you just re-created the dom place holder by appending a child element to the content panel?

Oh I forgot to add.. this only happens when you resize the window... something to do with the monitorWindowResize... it worked fine when I set this property to false on the nested layout

Could it be the way I'm loading the contentpanel:

layout.add('center', new Ext.ContentPanel('web-accounts', {
title: 'Web Accounts',
url:{url:'setup_webaccounts/index.php', scripts:true},

and the page that is being loaded has:

<script type="text/javascript" src="setup_webaccounts/js/web_accounts.js"></script>
<link rel="stylesheet" type="text/css" href="setup_webaccounts/css_webaccounts.css"/>

<div id="web-account">
<div id="web-account-tb"></div>
<div id="web-account-content" style="padding:10px;">
<fieldset id="webuser-search">
<legend>Account Search</legend>
<table width="100%" border="0" cellpadding="0" cellspacing="5">
<td>Login: </td><td><input id="s-login" type="text"></td>
<td>Name: </td><td><input id="s-fullname" type="text"></td>
<td rowspan="3" width="62" valign="top"><img src="setup_webaccounts/img/searchiconbig.gif"></td>
<td>Corporation: </td><td><input id="s-companyname" type="text"></td>
<td>Customer Division: </td><td><input id="s-division" type="text"></td>
<td>Security Label: </td>
<input id="s-securitylabel" autocomplete="off">
<div id="webuser-search-results"></div> //holder for grid


3 Apr 2007, 9:58 AM
You don't have to save the grid's DOM but if you don't, and want to redisplay later, you have to rebuild the entire DOM structure of the grid. Depending on how complex your grid is, this could be expensive - not only building the HTML, but rewiring events.

Also, in your sample, I think you want to move the CSS file from loaded page to your main page. When you dynamically load content like that, the CSS isn't going to get processed.

3 Apr 2007, 10:06 AM
You will need to destroy() the grid before overwriting it's HTML.

3 Apr 2007, 1:17 PM
Yes.. I figured that out when i started looking at the dom objects... and you should also remove the event listeners as well