ExtJs Portal Example: adding different sized columns

In the examples section for ExtJs4 there's a portal example. The portal panel where all the content can be shown is made up of a column layout, each column is divide with equal distance. I wanted to change this so I could have one really wide column, and the rest of the space would be diveded up equally between the remaining columns.

So using the examples from the ExtJs4 package on my localhost, in the 'portal' directory I changed the HTML file so the classes.js link was commented out and that the script on the same page now includes the line Ext.Loader.setConfig({enabled:true}); This means that it will run the code in the individual files. Then by opening up PortalPanel.js and change the beforeLayout as follows I was able to specify one really large column and which column I want that one to be;

// Set columnWidth, and set first and last column classes to allow exact CSS targeting.
beforeLayout: function() {
    var items = this.layout.getLayoutItems(),
        len = items.length, //len is the number of columns specified
        i = 0,
        item,
        mainColIndex = 0, //the index of the main column that we want to take up the most space
        mainColWidth = .55; //the % of space we want our main column to take up

    for (; i < len; i++) {
        item = items[i];

        if(i===mainColIndex)
        {
            item.columnWidth = mainColWidth;
        }else{
            item.columnWidth = (1-mainColWidth) / (len -1);
        }

        item.removeCls(['x-portal-column-first', 'x-portal-column-last']);
    }
    items[0].addCls('x-portal-column-first');
    items[len - 1].addCls('x-portal-column-last');
    return this.callParent(arguments);
},