PDA

View Full Version : Ext 1.0 Alpha 3 - Rev 4 GridView onWindowResize... UPDATE



czschech
16 Mar 2007, 1:28 AM
I want to use multiple Grids in one ContentPanel...
- I create one Ext.grid.Grid.
- The grid is configured to take the dimensions of the contentpanel.
- I store a reference to the grid and the contentpanel in my application object.
- With a toolbar button i create a new grid like this:



if(app.contentPanel.grid) {
app.contentPanel.grid.destroy();

var grid = ...
app.contentPanel.grid = grid;


When the window is resized i get a firebug error: "this.cm is undefined"

After researching and debugging with firebug, i found that calling:


Ext.EventManager.removeResizeListener(app.contentPanel.grid.view.onWindowResize,app.contentPanel.grid.view);

before grid.destroy() solves the problem.

This should be integrated into GridView.js destroy()

Another problem is:
When destroying the grid object, the dd objects and their dom nodes (for moving columns) don't get deleted. When a new grid is created, new dd objects are created. These objects should be destroyed.
I don't have know how i could remove them myself because there is no reference to them in the grid object...

I hope i could make myself clear, english is not my native language... :)

See 3rd Post

Animal
16 Mar 2007, 2:28 AM
Don't use a ContentPanel. Create a GridPanel from the Grid, and add that to the Layout/TabPanel that you are using. This handles resizes.

czschech
17 Mar 2007, 12:49 PM
Ext.GridPanel solves the problem of windows resizing... BUT
Ext.GridPanel.destroy() calls

this.grid.getView().unplugDataModel(this.grid.getDataModel());
which doesn't work anymore.

I redefined some of the grid functions to (hopefully) destroy all objects/elements created by adding a grid:



Ext.GridPanel.prototype.destroy = function(){
this.grid.destroy();
delete this.grid;
if(this.region) this.region.panels.remove(this);
Ext.GridPanel.superclass.destroy.call(this);
};

Ext.grid.Grid.prototype.destroy = function(removeEl, keepListeners){
if(this.enableColumnMove) {
if(Ext.dd.DDM.ids['gridHeader'+this.container.id]) {
var dds = Ext.dd.DDM.ids['gridHeader'+this.container.id];
for(var dd in dds) {
if(!dds[dd].config.isTarget && dds[dd].dragElId) {
var elid = dds[dd].dragElId;
dds[dd].unreg();
Ext.get(elid).remove();
} else if(dds[dd].config.isTarget) {
dds[dd].proxyTop.remove();
dds[dd].proxyBottom.remove();
dds[dd].unreg();
}
if(Ext.dd.DDM.locationCache[dd]) delete Ext.dd.DDM.locationCache[dd];
}
delete Ext.dd.DDM.ids['gridHeader'+this.container.id];
}
}

var c = this.container;
c.removeAllListeners();
this.view.destroy();

this.colModel.purgeListeners();
if(!keepListeners){
this.purgeListeners();
}
c.update("");
if(removeEl === true){
c.remove();
}
};

Ext.grid.GridView.prototype.destroy = function() {
if(this.colMenu) {
this.colMenu.removeAll();
Ext.menu.MenuMgr.unregister(this.colMenu);
this.colMenu.getEl().remove();
delete this.colMenu;
}
if(this.hmenu) {
this.hmenu.removeAll();
Ext.menu.MenuMgr.unregister(this.hmenu);
this.hmenu.getEl().remove();
delete this.hmenu;
}
this.bind(null, null);
};


This deals with the DD Objects created for resizing columns and the columns menus...
Perhaps somebody could check if i missed something (listeners, cached objects, etc.)...

jack.slocum
19 Mar 2007, 5:49 AM
czschech,

Thank your for sharing your code. I have taken some of it and moved it into the GridView (and other classes). Please let me know how it works in the next rev.

Thanks.

czschech
24 Mar 2007, 8:56 AM
Thank you for answering.

I found out a few other things:
the gridSplitters in Ext.dd.DDM.ids should be removed too...


if(Ext.dd.DDM.ids['gridSplitters'+this.container.id]) {
var dds = Ext.dd.DDM.ids['gridSplitters'+this.container.id];
for(var dd in dds) {
if(dds[dd].dragElId) {
var elid = dds[dd].dragElId;
dds[dd].unreg();
Ext.get(elid).remove();
}
if(Ext.dd.DDM.locationCache[dd]) delete Ext.dd.DDM.locationCache[dd];
}
delete Ext.dd.DDM.ids['gridSplitters'+this.container.id];
}

The dom elements are removed with gridHeader, so some of this probably not needed, but it doesn't generate errors in Firefox and works...

Another problem is: during gridview creation, stylesheets are created... when you create a new grid with different column counts, the splitters get messed up.

When I remove the stylesheet node with firebug, before creating a new grid it works...
I need a way to remove it in the destroy method...

ugly method (in Grid.destroy(), while we still have this.container.id, only testet in Firefox, IE7):


var head = document.getElementsByTagName("head")[0];
var styles = head.getElementsByTagName('style');
for(var i=0, len=styles.length; i<len; i++) {
//var styleText = styles[i].firstChild.nodeValue; <- works in Firefox, not in IE7
var styleText = styles[i].innerHTML;
if(styleText.indexOf('#'+this.container.id)==0) {
styles[i].parentNode.removeChild(styles[i]);
Ext.util.CSS.refreshCache();
break;
}
}