Sep 07, 2008, 12:11 PM
CenterLayout
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:
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
[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
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 && 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