Hello,

I've created a simple quick Coolite extension for the customer layout Center which can be demonstrated at the following sample from ExtJS http://www.extjs.com/deploy/dev/exam...t-browser.html

What did I have to do?

1. Create a new folder called Coolite.Ext.UX\Extensions\CenterLayout from the SVN trunk

2. Create a new class called CenterLayout.cs with the following code:

/******** 
 * This file is part of the Coolite UX Toolkit.

 * The Coolite UX Toolkit is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.

 * The Coolite UX Toolkit is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Lesser General Public License for more details.

 * You should have received a copy of the GNU Lesser General Public License
 * along with the Coolite Toolkit.  If not, see <http://www.gnu.org/licenses/>.
 */

/*
* @version:        0.6.0 Preview-1
* @author:        Timothy Grant Vogelsang
*                Coolite Inc. http://www.ext.net/
* @date:        2008-09-07
* @copyright:    Copyright (c) 2006-2008, Coolite Inc, or as noted within each 
*                 applicable file LICENSE.txt file
* @license:        LGPL 3.0 License
* @website:        http://www.ext.net/
 ********/
using System;
using System.ComponentModel;
using System.Drawing;
using System.Drawing.Design;
using System.Web.UI;
using Coolite.Ext.Web;

namespace Coolite.Ext.UX
{
    [Layout("ux.center")]
    [ClientScript(Type = typeof(CenterLayout), WebResource = "Coolite.Ext.UX.Extensions.CenterLayout.resources.CenterLayout.js")]
    [ClientStyle(Type = typeof(CenterLayout), WebResource = "Coolite.Ext.UX.Extensions.CenterLayout.resources.css.CenterLayout.css")]
    [ToolboxData("<{0}:CenterLayout runat=\"server\"></{0}:CenterLayout>")]
    [Designer(typeof(EmptyDesigner))]
    public class CenterLayout : ContainerLayout
    {
        protected override bool SingleItemMode
        {
            get
            {
                return true;
            }
        }
    }
}
You will notice, I'm inheriting from the ContainerLayout since that is the base for all Layouts in ExtJS and Coolite. The CenterLayout works a lot like the FitLayout which only allows a single item, so I've had to override the SingleItemMode to always return true.

3. Created a resources directory under Coolite.Ext.UX\Extensions\CenterLayout

4. Added the following 2 files as embedded resources (very important):

Coolite.Ext.UX\Extensions\CenterLayout\resources\c ss\CenterLayout.css
/* 
 * Ext.ux.layout.CenterLayout
 */
.ux-layout-center-item {
    margin:0 auto;
    text-align:left;
}
.ux-layout-center .x-panel-body,  /* if the container is a panel */
body.ux-layout-center {           /* if the container is the doc body (for viewport) */
    text-align:center;
}
Coolite.Ext.UX\Extensions\CenterLayout\resources\C enterLayout.js
/*
 * Ext JS Library 2.1
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */


// We are adding these custom layouts to a namespace that does not
// exist by default in Ext, so we have to add the namespace first:
Ext.ns('Ext.ux.layout');

/*
 * ================  CenterLayout  =======================
 */
/**
 * @class Ext.ux.layout.CenterLayout
 * @extends Ext.layout.FitLayout
 * <p>This is a very simple layout style used to center contents within a container.  This layout works within
 * nested containers and can also be used as expected as a Viewport layout to center the page layout.</p>
 * <p>As a subclass of FitLayout, CenterLayout expects to have a single child panel of the container that uses 
 * the layout.  The layout does not require any config options, although the child panel contained within the
 * layout must provide a fixed or percentage width.  The child panel's height will fit to the container by
 * default, but you can specify <tt>autoHeight:true</tt> to allow it to autosize based on its content height.  
 * Example usage:</p> 
 * <code>
// The content panel is centered in the container
var p = new Ext.Panel({
    title: 'Center Layout',
    layout: 'ux.center',
    items: [{
        title: 'Centered Content',
        width: '75%',
        html: 'Some content'
    }]
});

// If you leave the title blank and specify no border
// you'll create a non-visual, structural panel just
// for centering the contents in the main container.
var p = new Ext.Panel({
    layout: 'ux.center',
    border: false,
    items: [{
        title: 'Centered Content',
        width: 300,
        autoHeight: true,
        html: 'Some content'
    }]
});
</code>
 */
Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.FitLayout, {
    // private
    setItemSize : function(item, size){
        this.container.addClass('ux-layout-center');
        item.addClass('ux-layout-center-item');
        if(item &amp;&amp; size.height > 0){
            if(item.width){
                size.width = item.width;
            }
            item.setSize(size);
        }
    }
});
Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;
5. Added registration for web resource files to the AssemblyInfo.cs of the Coolite.Ext.UX project:

[assembly: WebResource("Coolite.Ext.UX.Extensions.CenterLayou t.resources.CenterLayout.js", "text/javascript")]
[assembly: WebResource("Coolite.Ext.UX.Extensions.CenterLayou t.resources.css.CenterLayout.css", "text/css")]

6. Rebuild and look a new usable control ;)

Sincerely,
Timothy