PDA

View Full Version : CenterLayout



Timothy
Sep 07, 2008, 1:11 PM
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/examples/layout-browser/layout-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.C enterLayout.js")]
[ClientStyle(Type = typeof(CenterLayout), WebResource = "Coolite.Ext.UX.Extensions.CenterLayout.resources.c ss.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.CenterLayout.resources.C enterLayout.js", "text/javascript")]
[assembly: WebResource("Coolite.Ext.UX.Extensions.CenterLayout.resources.c ss.CenterLayout.css", "text/css")]

6. Rebuild and look a new usable control ;)

Sincerely,
Timothy

geoffrey.mcgill
Sep 07, 2008, 1:48 PM
Hi Timothy,

Perfect job! Thanks for the sharing.

I think I already mentioned in the forums a couple other times, but we're going to be releasing the complete Coolite.Ext.UX project with v0.6. The project will be released under an LGPL 3.0 license and when ready will be available for download at GoogleCode (http://coolite-ux-toolkit.googlecode.com/) ... ... oops.