PDA

View Full Version : [Ext 1.0 alpha 2] Grid definitely has a problem



vk_phoenixfr
28 Feb 2007, 3:03 AM
Hi all, again.

I found a way to make my grid disappear, using this :

grid.container.setDisplayed(false);

But the problem now is when i want to make it appear back, i use the opposite :

grid.container.setDisplayed(true);
But it does't work. The grid is maybe visible, but width and height set to 0.

I even tried to memorize the width/height before setting displayed to false, and then set explicitely the width and height to the memorized values before (or after) calling the setDisplayed(true). Always same result, my grid is (maybe visible) width and height to 0...

So is there a bug with the grid, is there a way to make the disappear/reappear process nicely?

Please help...

Animal
28 Feb 2007, 3:08 AM
Could be something to do with display:none. This removes the element from the document flow, and no element dimensions can be ascertained when that happens.

Try using .hide() and .show()

vk_phoenixfr
28 Feb 2007, 3:18 AM
But the hide and show methods hide the container (maybe) but the grid itself is still visible, this was the point of my previous post.

Here is a screenshot of my app after I used the hide method like this :

tableView.container.hide();

Result : (the blue box, the menus, and everything disappeared except the grid).
http://esnault.frederic.free.fr/temp/not_hidden.png

Any idea?

Animal
28 Feb 2007, 3:53 AM
Right, visibility is not inherited.

I have added these methods to Grid, and they work for me:



hide: function() {
this.container.setVisibilityMode(Ext.Element.DISPLAY);
this.container.setVisible(false);
},

show: function() {
this.container.setVisible(true);
},

vk_phoenixfr
28 Feb 2007, 4:36 AM
No, still no luck.

I added the two methods in my table code (not in Ext code), and when I hide, no problem, it works.
But when I try to bring it back, same problem as with the setDisplayed() method, the table size is set to 0.

Here is a screenshot :
http://esnault.frederic.free.fr/temp/still_not_ok.png

EDIT : I also put the two method in Grid-min.js, and in ext-all.js, they are found, the hide works, but the show still has the same problem... 0-sized grid.

Animal
28 Feb 2007, 4:50 AM
You can add methods to classes without modifying the original source code.

See docs on (or source of) Ext.override.

Something different must be going on between the time you hide and the time you show.

Just try hiding and showing the grid's container using Firebug to directly set the cnotainer's display style to "none" and then back to "". That shouldn't harm anything.

vk_phoenixfr
28 Feb 2007, 5:33 AM
You were right, I recreated the table each time I wanted to show it.
I changed my code, and now it works in firefox.

But IE is even worse, now when I hide everything in IE, everything disappear, and the grid is flashing !!!!!

I'm hopeless..

vk_phoenixfr
28 Feb 2007, 5:49 AM
I even tried to add the setDisplayed(false) to the hide method, but the Grid is still flashing in IE.

I have to make a demo tomorrow, and discovered this bug yesterday...

Please help

vk_phoenixfr
28 Feb 2007, 6:49 AM
A little help? Did you try on IE?

vk_phoenixfr
1 Mar 2007, 1:20 AM
Ok i finally found a work around, using a browser specific test.

Note : checker-container refers to the div containing the whole blue box, including the grid, and rule-grid refers to the div containing the grid itself.

First I make everything disappear :

TableView.hide();
document.getElementById('rule-grid').style.visibility = "hidden";
if (Ext.isIE) {
document.getElementById('rule-grid').style.height=0;
}
document.getElementById('checker-container').style.visibility = "hidden";

Then bring everything back :

document.getElementById('checker-container').style.visibility = "visible";
document.getElementById('rule-grid').style.visibility = "visible";
document.getElementById('rule-grid').style.height=350;
TableView.show();

And my hide() and show() methods, thanks to Animal for these :


hide : function() {
tableView.container.setVisibilityMode(Ext.Element.DISPLAY);
tableView.container.setVisible(false);
},

show : function() {
tableView.container.setVisibilityMode(Ext.Element.VISIBILITY);
tableView.container.setVisible(true);
},

don't know why it worked with the line :

document.getElementById('rule-grid').style.height=0;
It seems I tried something similar before, with no result, but anyway it works.
I had to put this line in a if (Ext.isIE) test, because in Firefox, if I do this, then when it appears back, the grid size stays to 0.

Anyway, thanks to Animal for his help, and I hope my workaround can help someone here.

JeffHowden
1 Mar 2007, 1:55 AM
To use the juicy goodness of Ext, all those "document.getElementById()" calls should be replaced with Ext.get().

neongrau
9 Mar 2007, 6:16 AM
To use the juicy goodness of Ext, all those "document.getElementById()" calls should be replaced with Ext.get().

since i'm on rails i have the prototype framework included as well
and nothing beats the $('your_id') shortcut :wink:

jack.slocum
11 Mar 2007, 12:58 AM
Except $() is extremely slow in IE.

liotrox
11 Mar 2007, 6:54 AM
Hi Jack/All,

what about to put a function like:



window.$ = function(elem)
{
var e = Ext.fly(elem);
return e ? e.dom : null;
}


This will replace the classic $() function of prototype (that as Jack said is slow in IE)

Angelo