Wednesday, September 2, 2009

Ext.Window max height

Ext is an amazing javascript library. It let you do things humans can never imagine. It's enough to have a look at the samples page to understand what I'm saying. Moreover ext provides a complete UI structure that let you have beautiful windows, forms, tables... with no work, that is, ext provides the css and images necessary to the UI.
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);
        }
       
    })

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];

}

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: