Showing posts with label Ext. Show all posts
Showing posts with label Ext. Show all posts

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.