I discovered ext not so early, that's why really I don't use it as my favourite library (which still is mootools) but only to do extraordinary things.
In my last works I come to a problem. I wanted to open windows (like normal desktop windows) when opening a product details in a catalogue. All works properly, but what happens if details content is extremly long? Clearly the height of the window follow it.
That's a problem I think, because ext.window class doesn't support any configuration paramether or method to set a max-height attribute! That is your window will follow the height of his content with no way to stop that.
Here clearly is helpful to find a way to pass by this lackage and set a max Height attribute, that is what I've done for my work and here I post my code.
Here is my class which extends Ext.Window
Ext.productWindow = Ext.extend(Ext.Window, {
homefile: 'index.php', // not important for you
maxHeight: 9999,
open: function() {
// not important for you, is an ajax call that makes an icon appear in the bottom bar of the application
sendPost('index.php?pt[catalogue-viewedItems]', 'id='+this.prdID, 'viewedItems');
this.show();
},
minimize: function(window) {
this.hide();
},
listeners: {
close: function(window) {
// not important for you, is an ajax call that make disappear the icon in the bottom bar
sendPost('index.php?pt[catalogue-removeProduct]', 'id='+this.prdID, 'scriptPaper', '', true);
}
},
// that's the method I use: if the height passed is greater than the maxHeight property
// than the window is resized by the setHeight function.
setMaxHeight: function(h) {
if(h>this.maxHeight) this.setHeight(this.maxHeight);
}
})
homefile: 'index.php', // not important for you
maxHeight: 9999,
open: function() {
// not important for you, is an ajax call that makes an icon appear in the bottom bar of the application
sendPost('index.php?pt[catalogue-viewedItems]', 'id='+this.prdID, 'viewedItems');
this.show();
},
minimize: function(window) {
this.hide();
},
listeners: {
close: function(window) {
// not important for you, is an ajax call that make disappear the icon in the bottom bar
sendPost('index.php?pt[catalogue-removeProduct]', 'id='+this.prdID, 'scriptPaper', '', true);
}
},
// that's the method I use: if the height passed is greater than the maxHeight property
// than the window is resized by the setHeight function.
setMaxHeight: function(h) {
if(h>this.maxHeight) this.setHeight(this.maxHeight);
}
})
That was the class implementation, now I use a function to construct a window object, here it is:
function newWindow(homefile, id) {
var url = homefile+'?pt[catalogue-viewProductDataAjax]&id='+id;
win[id] = new Ext.productWindow({
homefile: homefile,
prdID: id,
width:800,
maxHeight:500, // here I set the maxHeight value for this instance of productWindow
y:50,
id: 'prdWindow'+id,
autoScroll:true,
autoLoad:{
// when loading the windo content....
// first: I load the response to the request represented by url
url:url,
// second: after charging contents, I call the method setMaxHeight passing it the height of the contents of the window,
// then this method sets the height of the window to the maxHeight property(500)
// if the contents hight is greater, let the height as it is if minor
callback: function(el) {prd_window.setMaxHeight(el.getHeight());}
},
title:'productCard',
collapsible:true,
minimizable:true,
resizable:true
});
return win[id];
}
var url = homefile+'?pt[catalogue-viewProductDataAjax]&id='+id;
win[id] = new Ext.productWindow({
homefile: homefile,
prdID: id,
width:800,
maxHeight:500, // here I set the maxHeight value for this instance of productWindow
y:50,
id: 'prdWindow'+id,
autoScroll:true,
autoLoad:{
// when loading the windo content....
// first: I load the response to the request represented by url
url:url,
// second: after charging contents, I call the method setMaxHeight passing it the height of the contents of the window,
// then this method sets the height of the window to the maxHeight property(500)
// if the contents hight is greater, let the height as it is if minor
callback: function(el) {prd_window.setMaxHeight(el.getHeight());}
},
title:'productCard',
collapsible:true,
minimizable:true,
resizable:true
});
return win[id];
}
Finally to create a window:
prd_window = newWindow(homefile, id);
This way you have your maxHeight setable window. Only some more things:
* the product window is constructed and associated to an array element, that because you may have more windows open at once.
* for the same reason before creating a new window there is a check (that i've omitted here) to control if the window represented by its id already exists, if yes than only is showed, otherwise it's created.
No comments:
Post a Comment