Coolite Forums / Coolite Toolkit / User Extensions and Plugins

[0.8.2] RowSelectionPaging plugin

Bruno Nogueira — Mon, 25 Jan 2010 11:18:22 GMT

Hello,

I need help adding this plugin to ext js.

http://www.extjs.com/forum/showthread.php?t=61282

The reason is that I need on client side to get the count of selected rows using paging.

Using getCount() from CheckboxSelectionModel only returns the selection from the current page :/

THANKS

ComboTree In PanelGrid

mrlayeghi — Sun, 24 Jan 2010 00:40:18 GMT

How To Use ComboTree In Grid?

When Add ComboTree To Editor Of Columns, Tree Not Loaded And Occur The Error:
this.root is undefined.

Stateful multi column span portal with full Asp.Net Lifecycle support

tansu — Mon, 04 Jan 2010 13:44:39 GMT

Use Kalitte Dynamic Dashboards to integrate iGoogle like dashboards into your web application.

See live demo at http://www.dynamicdashboards.net.

Version 3.0 is ready. This is a major update and includes following enhacements.

- Now, a dashboard can have sections which can have different number of columns.
- Users can add more than one widget to a dashboard. Hierarchical widget type panel implemented.
- Dashboard can view links to other dashboard. So you don't need to put a dashboards menu.
- Developers can specify which items are displayed in both widget types and dashboards menu.
- Viewstate is always restored, no need to handle and refresh dashboard if viewstate is invalid.
- Enhanced syling is supported. You can both style dashboard, widgets and sections.
- Performance is optimized. Removed unnecessary calls to database (that's dashboard provider).
- Implemented widget property editor. No need to refresh dashboard when widget properties are changed.
- Implemented advanced animation. Developers can set different animations for adding new widgets, drag-drop of widgets or for a full dashboard content update.
- Adding a widget to a dashboard which has custom toolbar bug resolved.
- Changing dashboardkey after a postback is supported. You can view other dashboards without refreshing page.
- Dragging before a postback has finished prevented.
- Dashboard in a window function implemented. Users can view your dashboard in a drag-drop window.

Icon ComboBox

mindcore1 — Wed, 28 Jan 2009 09:30:57 GMT

Here is an extension to the ComboCox control to give your ListItems an Icon. The JavaScript is part of the ExtJs wiki example for illustrating how to extend Ext2 classes (http://extjs.com/learn/Tutorial:Extending_Ext2_Class).

To use, extract the attachment to the ..\Coolite\Coolite.Ext.Web\Ext\Extensions path of the Coolite Toolkit source. In visual studio, add the folder under the respective folder. Ensure that the JS and CSS resources are configured as embedded resources. Then recompile the toolkit.

Here is an example:

[code]
<%@ Page Language="C#" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>IconCombo Test</title>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!Ext.IsAjaxRequest)
{
SM1.RegisterIcon(Icon.FlagUs);
SM1.RegisterIcon(Icon.FlagCa);
SM1.RegisterIcon(Icon.FlagRu);
SM1.RegisterIcon(Icon.FlagDe);
SM1.RegisterIcon(Icon.FlagIt);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">

<ext:ScriptManager runat="server" ID="SM1" ScriptMode="Debug" />

<ext:IconCombo
ID="IconComboTest"
TriggerAction="All"
Mode="Local"
Editable="false"
ForceSelection="true"
Selectonfocus="true"
EmptyText="Select a country"
runat="server">
<Items>
<ext:IconListItem Text="United States" Icon="FlagUs" Value="US" />
<ext:IconListItem Text="Canada" Icon="FlagCa" Value="CA" />
<ext:IconListItem Text="Russia" Icon="FlagRu" Value="RU" />
<ext:IconListItem Text="Germany" Icon="FlagDe" Value="DE" />
<ext:IconListItem Text="Italy" Icon="FlagIt" Value="IT" />
</Items>
</ext:IconCombo>
</form>
</body>
</html>
[/code]

One thing that I would like to add is functionality to automagically register the icons to the scriptmanager, but no success in my initial attempts. Also, I feel that I had to do a little too much work to extend the framework. It was impossible for me to extend from ComboBoxBase class because the underlying Items collection is locked into using the ListItem class. Maybe the Coolite Team can look into a solution for this; I'm thinking generics.

-MC

LockingGridPanel - Frozen Columns

jchau — Wed, 05 Aug 2009 20:01:10 GMT

Coolite implementation of Condor's LockingGridPanel extension.

http://extjs.com/forum/showthread.php?p=369120

You should be able to open the solution and make sure the reference to Coolite dlls are correct.

Using LINQ to dynamic sort data in GridPanel

sunny_sh — Mon, 10 Aug 2009 06:28:53 GMT

Hi, everybody,
In the source code of mvc.Coolite.com, you can find a function names "GetCustomers" in DataController.cs. By it's signature
[code]
public AjaxStoreResult GetCustomers(int limit, int start, string dir, string sort)
[/code]
we can know it ueses dir and sort to sort data.
But reading code, it uses LINQ to implement search and sort. We kown, LINQ doesn't support order by a static string. So this line
[code]
orderby(string.Concat(sort, " ", dir))
[/code]
was not working in fact.

I think below is a better method to dynamic sort data using LINQ. (by vb.net)
[code]
Dim selector = GetType(Customer).GetProperty(sort)

if String.Compare("ASC", dir, true) then
query = query.OrderBy(Function(c) selector.GetValue(c, nothing))
else
query = query.OrderByDescending(Function(c) selector.GetValue(c, nothing))
end if
[/code]

Maybe it needs refactor to better smell, but it's now working!

Validation for Coolite Controls

r_honey — Mon, 09 Nov 2009 22:34:23 GMT

One thing I have always found lacking with Coolite ASP.NET servercontrols was integration with the validation framework of ASP.NET, thatprevents submission of a form if any control state is invalid accordingthe the Validators associated with that control.

No doubt, the ExtJsclient controls that Coolite server controls translate to provide good& extensible client-side validation, but that does not perform theform from being submitted unless you have put your controls inside aFormPanel, & manually check for validation when the FormPanel issubmitted.

I created a CooliteValidator class, that inherits fromthe ASP.NET BaseValidator class. You just drop the Vaidator on the form, andassociate it to a Coolite control (CooliteValidator throws an exceptionif you try to associate it to a non-Coolite TextFieldBase control).

More details on the control are available on my blog post:
http://www.rahulsingla.com/blog/coolite-control-validation

The code for the control can be downloaded from the link below the post. The direct link is below:
http://www.rahulsingla.com/sites/default/files/content/blog/coolite_control_validation/CooliteValidationControl.zip

It would be interesting to see what the Coolite team thinks about my control. I would request them to have a look at it. If they find it suitable, I would be willing to turn it over for inclusion in the Coolite toolkit with absolutely no strings attached.

Create a Grid Plugin?

Rothariger — Fri, 06 Nov 2009 10:16:42 GMT

Hello

i want to add a Plugin of gridpanel (RowActions), i was trying to add this to the project Coolite.Ext.UX but i cant add the new control in the page i get an error...

can someone pls tell me, how to create a Plugin????

thanks!!!

File Upload Dialog

davidhoyt — Wed, 08 Oct 2008 22:55:03 GMT

Please see this post for the latest version: http://www.coolite.com/forums/FindPost8229.aspx

I know there's been talk about this in the forums before, but has anyone created the file upload dialog UX? The one here: http://www.max-bazhenov.com/dev/upload-dialog-2.0/index.php

I've been attempting to do it, but as this is my first ExtJS experience, it's slow going and I haven't made much progress. I know server controls very well (having authored multiple ones myself - include richtextboxes), but I'm still familiarizing myself w/ the ExtJS + Coolite APIs.

I have it so I can drop in the control into the designer and it appears, but at runtime IE gives me a javascript error "Invalid source HTML for this operation." On Firefox 3.0, it appears, but the dialog is squished down. When you resize it, it takes on its correct min width/height.

I figure this is probably a version issue since the javascript I pulled from that site is for 2.0 and ExtJS is on 2.2. However, I don't know where to begin to address the issue.

Can anyone help? Here's the code I have so far:

[code]
using System;
using System.Web.UI;
using System.Drawing;
using System.ComponentModel;
using Coolite.Ext.Web;

[assembly: WebResource("ServerControls.Resources.Scripts.Ext.ux.UploadDialog.packed.js", "text/javascript")]
[assembly: WebResource("ServerControls.Resources.Scripts.Ext.ux.UploadDialog.js", "text/javascript")]

namespace ServerControls {

[ToolboxData("<{0}:FileUploadDialog runat=\"server\" Title=\"Upload Files\" Collapsible=\"false\" Icon=\"None\" />")]
[ToolboxBitmap(typeof(FileUploadDialog), "Resources.ToolboxIcons.window.bmp")]
[Designer(typeof(FileUploadDialogDesigner))]
[Description("Specialized dialog for uploading files.")]
[InstanceOf(ClassName = "Ext.ux.UploadDialog.Dialog")]
[ClientScript(
Type = typeof(FileUploadDialog),
WebResource = "ServerControls.Resources.Scripts.Ext.ux.UploadDialog.packed.js",
WebResourceDebug = "ServerControls.Resources.Scripts.Ext.ux.UploadDialog.js"
)]
public class FileUploadDialog : Window {
protected override void OnBeforeClientInit(Observable sender) {
base.OnBeforeClientInit(sender);
}
protected override void OnAfterClientInit(Observable sender) {
base.OnAfterClientInit(sender);
}
}
}
[/code]
Here's the designer code:

[code]
using System;
using System.ComponentModel;
using System.ComponentModel.Design;
using Coolite.Ext.Web;

namespace ServerControls {
internal class FileUploadDialogDesigner : ExtWebControlDesigner {
public override bool AllowResize {
get {
return false;
}
}

public override string GetDesignTimeHtml() {
if (((FileUploadDialog)this.Control).Hidden) {
return string.Empty;
}
return base.CreatePlaceHolderDesignTimeHtml();
}

private DesignerActionListCollection actionLists;
public override DesignerActionListCollection ActionLists {
get {
if (actionLists == null) {
actionLists = new DesignerActionListCollection();
actionLists.Add(new FileUploadDialogActionList(this.Component));
}
return actionLists;
}
}
}

internal class FileUploadDialogActionList : WindowActionList {
public FileUploadDialogActionList(IComponent component) : base(component) {
}

public override DesignerActionItemCollection GetSortedActionItems() {
return base.GetSortedActionItems();
}
}
}
[/code]
Sample web content page:

[code]
<%@ Page Title="File Upload Dialog" Language="C#" MasterPageFile="~/site.master" AutoEventWireup="true" CodeBehind="fileUploadDialog.aspx.cs" Inherits="Sandbox.fileUploadDialog" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<%@ Register Assembly="ServerControls" Namespace="ServerControls" TagPrefix="ux" %>

<asp:Content ID="content" ContentPlaceHolderID="content" runat="server">

<ext:ScriptManager ID="ScriptManager" runat="server" />
<br />

<ux:FileUploadDialog ID="FileUploadDialog1" runat="server" Collapsible="True" Icon="Cart" Title="Upload Files" Draggable="true" Floating="true" Maximizable="True" Modal="True" ShowOnLoad="False" />

<ext:Button ID="Button1" runat="server" Icon="ReportAdd" Text="Upload Files">
<Listeners>
<Click Handler="#{FileUploadDialog1}.show()" />
</Listeners>
</ext:Button>

</asp:Content>
[/code]
Thanks!

Asp.Net Widget Toolkit with Coolite

tansu — Sun, 25 Oct 2009 07:38:47 GMT

Hello,

New version of Widget Toolkit for Asp.Net for creating stateful portals is available. Version 2.3 includes dashboard framework provider for Ms-Access, many minor bug fixes and enhancements.

Dynamic Dashboards Framework automatically converts a simple Asp.Net user control to a draggable, collapsible, editable, refreshable and partial rendering widget.

Users can add portlets (or widgets) to their dashboards dynamically, drag or edit them. All viewstate and page lifecycle management is automatically done by the framework and widget positions are saved. Since provider based pattern is used, you can create new providers or use ready to use SQLDashboardProvider or SessionDashboardProvider.

More information can be found at http://www.dynamicdashboards.net.

[1.0] InputTextMask with GridPanel

bethc — Wed, 21 Oct 2009 00:22:29 GMT

Hi,

I am trying to use the InputTextMask plugin with a GridPanel (added serverside) with v1.0 - does anyone know how to get this plugin to work with the GridPanel?

Thanks

Implementing a ComboTree extension

pschojer — Mon, 29 Jun 2009 23:56:06 GMT

Hi guys,

as i`ve already posted here I need a ComboTree component for my application.

I am now trying to implement the extension on myself within the Ext.UX project.

I`ve compiled my customized extension library successfully and the control is showing up in my application.
However, when i expand a node within the tree popup the assigned TreeLoader event is never raised server-side.

A request to the server is made, but it fails with an error message ("control ext-gen1000 not found").

Here is my code:

ComboTree.js
[code]
Ext.namespace('Ext.ux');

/**
*
* @class ComboTree
* @extends Ext.form.ComboBox
*/
Ext.ux.ComboTree = Ext.extend(Ext.form.ComboBox, {
extStore: null,
tree: null,
treeId: 0,
setValue: function(v) {
var text = v;
if (this.valueField) {
var r = this.findExtRecord(this.valueField, v);
if (r) {
text = r.data[this.displayField];
} else if (this.valueNotFoundText !== undefined) {
text = this.valueNotFoundText;
}
}
Ext.ux.ComboTree.superclass.setValue.call(this, text);
this.lastSelectionText = text;
if (this.hiddenField) {
this.hiddenField.value = v;
}
this.value = v;
},
initComponent: function() {
this.treeId = Ext.id();
this.focusLinkId = Ext.id();
Ext.apply(this, {
store: new Ext.data.SimpleStore({
fields: [],
data: [[]]
}),
editable: false,
shadow: false,
mode: 'local',
triggerAction: 'all',
maxHeight: 200,
tpl: '<tpl for="."><div style="height:200px"><div id="'
+ this.treeId + '"></div></div></tpl>',
selectedClass: '',
onSelect: Ext.emptyFn,
valueField: 'id'
});

var treeConfig = {
border: false,
rootVisible: true,
loader: this.loader // loader is assigned here
};
Ext.apply(treeConfig, this.treeConfig);
if (!treeConfig.root) {
treeConfig.root = new Ext.tree.AsyncTreeNode({
text: 'treeRoot',
id: '0'
});
}
this.tree = new Ext.tree.TreePanel(treeConfig);
this.on('expand', this.onExpand);
this.tree.on('click', this.onClick, this);
Ext.ux.ComboTree.superclass.initComponent.apply(this,
arguments);
},
findExtRecord: function(prop, value) {
var record;
if (this.extStore != null) {
if (this.extStore.getCount() > 0) {
this.extStore.each(function(r) {
if (r.data[prop] == value) {
record = r;
return false;
}
});
}
}
return record;
},
onClick: function(node) {
if (node.attributes.parameter == 9) {
//
} else {
//
this.setValue(node.text);
this.hiddenField.value = node.id;
this.collapse();
}
},
onExpand: function() {
this.tree.render(this.treeId);
}
});

Ext.reg("combotree", Ext.ux.ComboTree);
[/code]

ComboTree.cs
[code]
[assembly: WebResource("Coolite.Ext.UX.Extensions.ComboTree.resources.ComboTree.js", "text/javascript")]

namespace Coolite.Ext.UX
{
[Designer(typeof(EmptyDesigner))]
[DefaultProperty("")]
[Xtype("combotree")]
[InstanceOf(ClassName = "Ext.ux.ComboTree")]
[ClientScript(Type = typeof(ComboTree), WebResource ="Coolite.Ext.UX.Extensions.ComboTree.resources.ComboTree.js", FilePath= "ux/extensions/combotree/combotree.js")]
[ToolboxData("<{0}:ComboTree runat=\"server\" Title=\"Combo tree\" Height=\"300\"></{0}:ComboTree>")]
[Description("Combobox with tree functionality")]
public class ComboTree : ComboBox
{
private TreeLoaderCollection treeLoader;

[ClientConfig("loader>Primary")]
[Category("Config Options")]
[NotifyParentProperty(true)]
[DefaultValue(null)]
[PersistenceMode(PersistenceMode.InnerProperty)]
[Description("The root node for the tree.")]
public virtual TreeLoaderCollection Loader
{
get
{
if (this.treeLoader == null)
{
this.treeLoader = new TreeLoaderCollection();
}

return this.treeLoader;
}
}
}
}
[/code]

Usage:
[code]
<ux:ComboTree ID="_ct" runat="server">
<Loader>
<ext:PageTreeLoader OnNodeLoad="LoadTreeNodeEntries">
</ext:PageTreeLoader>
</Loader>
</ux:ComboTree>
[/code]

I`mtrying to figure out whats the correct way to implement extensions bythe GMap extension, but i`m not sure if the code above is the right onefor my extension.

Can you pelase help me ?

Thx,
Peter

.Net Dashboard & Widget Toolkit for Asp.Net

tansu — Wed, 29 Jul 2009 01:17:24 GMT

Dashboard and Widget Framework for Asp.Net Version 1.7 is ready.

Current version uses Coolite 8.1 and contains many enhancements and minor bug fixes.

What's new:

1. Added functionality to save widget Collapsed / Expand state. This can be controlled with WidgetType.SaveCollapsed property.
2. Widgets can be created collapsed state. This can be controlled with WidgetType.CreateCollapsed property.
3. Added Title Editable property. If this property is false, widget title cannot be edited.
4. Added ConfirmClose property to widget type. If this property is false, no confirmation dialog is created while user closes the widget.

5. Dashboard and Widget Toolbar.

More information and a comprehensive demonstration can be found at http://www.dynamicdashboards.net/.

New Plugin

Maia — Thu, 26 Mar 2009 10:40:56 GMT

Hi,
I
downloaded the Coolite.ux.InputMask and me interested in creating a
plugin to edit values (R$ 324.55 for example). Following the model
of InputMask tutorial and the link:
http://extjs.com/learn/Manual:Intro:Inheritance.
I started a plugin MyCurrency as the code below to test.

MyCurrency.cs
[code]

/******** 
* Copyright (c) 2008 Coolite Inc.

* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:

* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.

* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.

* @version:        0.7.0
* @author:        Coolite Inc. http://www.coolite.com/
* @date:        2008-11-21
* @copyright:   Copyright (c) 2006-2008, Coolite Inc, or as noted within each 
*                 applicable file LICENSE.txt file
* @license:        MIT
* @website:        http://www.coolite.com/
********/

using System.ComponentModel;
using System.Web.UI;
using Coolite.Ext.Web;
using System.Drawing;

namespace Coolite.Ext.UX
{
    /*
     * MyCurrency
    */

    [InstanceOf(ClassName = "Ext.ux.netbox.MyCurrency")]
    [ClientScript(Type = typeof(MyCurrency), WebResource = "Coolite.Ext.UX.Plugins.MyCurrency.resources.MyCurrency.js")]
    [ToolboxBitmap(typeof(Coolite.Ext.UX.MyCurrency), "Build.Resources.ToolboxIcons.Plugin.bmp")]
    [ToolboxData("<{0}:MyCurrency runat=\"server\" />")]
    [Description("MyCurrency plugin used for mask/regexp operations")]
    public class MyCurrency : Plugin
    {
        [ClientConfig]
        [Category("Config Options")]
        [DefaultValue("")]
        [NotifyParentProperty(true)]
        [Description("The MyCurrency")]
        public string Simbol
        {
            get
            {
                object obj = this.ViewState["Simbol"];
                return obj == null ? "" : (string)obj;
            }
            set
            {
                this.ViewState["Simbol"] = value;
            }
        }

    }
}
[/code]

MyCurrency.js
[code]

Ext.namespace('Ext.ux.netbox');
/*
 * MyCurrency
 *
*/
Ext.ux.netbox.MyCurrency = function(simbol) {
    var simb = simb.Simbol;
};
Ext.extend(Ext.ux.netbox.MyCurrency, Ext.form.TextField, {
    theDocument: Ext.get(document),
    myCurrencyFn1: function() {
        // etc.
    },
    myCurrencyFn2: function() {
        // etc.
    }
});
Ext.ux.MyCurrency = Ext.ux.netbox.MyCurrency;[/code]I put the plugin on the page and run the error occurs:

[code]
Ext.ux.netbox.MyCurrency is not a constructor
[/code]



Any tips?
Thank you.
Maia.

Dynamic Dashboards

tansu — Mon, 20 Apr 2009 07:25:22 GMT

We have developed a dynamic dashboard framework using Coolite Portal control.

Dynamic Dashboards Framework automatically converts a simple Asp.Net user control to a draggable, collapsible, editable, refreshable and partial rendering widget.

More information can be found at http://www.dynamicdashboards.net.

ValidationStatus plugin

vladsch — Mon, 30 Mar 2009 09:15:52 GMT

Hi,

We have added new StatusBar plugin (ValidationStatus) which shows validation summary of FormPanel. The plugin based on

http://extjs.com/deploy/dev/examples/statusbar/statusbar-advanced.html

You can find Coolite sample in SVN

trunk\Coolite.Examples\Examples\Toolbar\StatusBar\Advanced\Default.aspx

new TabFx plugin

geoffrey.mcgill — Sun, 22 Mar 2009 18:57:28 GMT

I've added a new TabFx plugin which fires a visual effect when a Tab becomes Active or is selected. The default fx is "frame" and shows a ripple of exploding attenuating borders around the Tab.

Example

[code]<ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" Height="185" Width="300">
<Tabs>
<ext:Tab ID="Tab1" runat="server" Title="Tab 1" />
<ext:Tab ID="Tab2" runat="server" Title="Tab 2" />
<ext:Tab ID="Tab3" runat="server" Title="Tab 3" />
</Tabs>
<Plugins>
<ext:TabFx runat="server" />
</Plugins>
</ext:TabPanel>[/code]

Hope this helps.

#{referencing} UserControls

abertram — Fri, 16 Jan 2009 05:52:55 GMT

Hey, using Coolite for the first time on a project and it's pretty exciting.

I use UserControls pretty extensively as sort of "pre-configured" Controls (like bundling a Window and it's children in a user control for re-use). But then it's difficult to reference the Ext client objects them from parent controls, especially from a Handler attribute where you can't use <%= Mywindow.ClientID %> idiom.

One thing I've added to the code on my end is an IClientReferenceProvider interface that provides a hook into the TokenUtils.ReplaceIDTokens() method:

[code]public static string ReplaceIDTokens(string script, Control seed)
{
Regex regex = new Regex(TokenUtils.IDPattern);
MatchCollection matches = regex.Matches(script);
Control control = null;
string id = "";
foreach (Match match in matches)
{
id = match.Value.Remove(match.Value.Length - 1).Remove(0, 2);

control = ControlUtils.FindControl(seed, id);

if (control != null)
{
if (control is Observable)
{
script = script.Replace(match.Value, control.ClientID);
} // ADDED
else if (control is IClientReferenceProvider)
{
script = script.Replace(match.Value, ((IClientReferenceProvider)control).GetClientReference());
} // END ADDED
else
{
script = script.Replace(match.Value, string.Concat("Ext.get(\"", control.ClientID, "\")"));
}
}
else
{
script = script.Replace(match.Value, string.Concat("Ext.get(\"", match.Value.Remove(match.Value.Length - 1).Remove(0, 2), "\")"));
}
}

return script;
}[/code]

and then, UserControls implementing IClientReferenceProvider can either return the ID of the main container control or even return a reference to a custom object that provides a client interface to parent objects like:

MyUserControl.ascx

[code]<script type="text/javascript">
<%= ClientID %> = {

show: function(activityID) {
<%= Store1.ClientID %>.baseParams.activityID = activityID;
<%= Store1.ClientID %>.load();
<%= Window1.ClientID %>.show();
}
};
</script>[/code]

MyUserControl.ascx.cs

[code]public class MyUserControl : UserControl, IClientReferenceProvider
{
public string GetClientReference() {
return ClientID;
}
}[/code]

It's not 100% elegent but it's proved useful in UserControls that build heavily on existing controls with minimal additional logic. What do you think? Maybe I'm altogether missing a better way of doing this...?

CenterLayout

Timothy — Sun, 07 Sep 2008 08:11:06 GMT

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:

[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.coolite.com/
* @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.coolite.com/
********/
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;
}
}
}
}
[/code]

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\css\CenterLayout.css
[code]
/*
* 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;
}
[/code]

Coolite.Ext.UX\Extensions\CenterLayout\resources\CenterLayout.js
[code]
/*
* 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>
* <pre><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></pre>
*/
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;
[/code]

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.CenterLayout.js", "text/javascript")]
[assembly: WebResource("Coolite.Ext.UX.Extensions.CenterLayout.resources.css.CenterLayout.css", "text/css")]

6. Rebuild and look a new usable control ;)

Sincerely,
Timothy

Coolite User Themes

matteo — Mon, 23 Jun 2008 07:42:31 GMT

Hi all,

does anyone manage to use new, additional themes with Coolite Toolkit?

Matteo