Coolite Forums / Coolite Toolkit / Examples and Extras

Group by Drag and Drop

methode — Sat, 03 Jan 2009 02:55:53 GMT

Hi all,

I added a D/D functionality, to group grid columns, to the already available "group by" menu grid option.
You can drag column in target panel to group by that column. After that, by clicking in the label you can also do sorting.
Drag label anywere to clear grouping.

See zip in attachment.

BUG!

- In IE 7 the label in target panel renders wrongly, right in firefox. Can you suggest a solution? See image in attachment.

Let me know about bugs or errors, thanx.

Matteo

PDF Export

methode — Fri, 02 Jan 2009 06:15:26 GMT

Hi all,

based on this example:

http://examples.coolite.com/?/GridPanel/Miscellaneous/Export_Data_Ajax/

I added a PDF export button to generate a PDF file rendering the grid. I used iTextSharp open source library.
See file in attachment.

Pdf library:
http://sourceforge.net/projects/itextsharp/

Link to codeproject.com usefull article:
http://www.codeproject.com/KB/cs/iTextSharpPdfTables.aspx

Matteo

[EXAMPLE] Desktop

geoffrey.mcgill — Sun, 07 Dec 2008 17:16:39 GMT

We just published a new sample demonstrating the use of the <ext:Desktop> Control, see http://examples.coolite.com/?/Desktop/Introduction/Overview/

Multiple toolbars emulation

vladsch — Mon, 29 Dec 2008 02:33:22 GMT

Hi all,

This simple example shows how to emulate multiple toolbars. Maybe someone will consider it useful

[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 id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />

<ext:Panel runat="server" Title="Panel with multiple toolbars" Width="500">
<Body>
<ext:ContainerLayout runat="server">
<ext:Toolbar runat="server">
<Items>
<ext:ToolbarButton runat="server" Icon="Accept"></ext:ToolbarButton>
<ext:ToolbarButton runat="server" Text="Top Button1"></ext:ToolbarButton>
</Items>
</ext:Toolbar>

<ext:Toolbar runat="server">
<Items>
<ext:ToolbarButton runat="server" Icon="Bell"></ext:ToolbarButton>
<ext:ToolbarButton runat="server" Text="Top Button2"></ext:ToolbarButton>
</Items>
</ext:Toolbar>

<ext:Toolbar runat="server">
<Items>
<ext:ToolbarButton runat="server" Icon="Anchor"></ext:ToolbarButton>
<ext:ToolbarButton runat="server" Text="Top Button3"></ext:ToolbarButton>
</Items>
</ext:Toolbar>

<ext:Panel runat="server" Border="false" Height="300" BodyStyle="padding:6px;">
<Body>
Body
</Body>
</ext:Panel>

<ext:Toolbar runat="server">
<Items>
<ext:ToolbarButton runat="server" Icon="Accept"></ext:ToolbarButton>
<ext:ToolbarButton runat="server" Text="Bottom Button1"></ext:ToolbarButton>
</Items>
</ext:Toolbar>

<ext:Toolbar runat="server">
<Items>
<ext:ToolbarButton runat="server" Icon="Bell"></ext:ToolbarButton>
<ext:ToolbarButton runat="server" Text="Bottom Button2"></ext:ToolbarButton>
</Items>
</ext:Toolbar>

<ext:Toolbar runat="server">
<Items>
<ext:ToolbarButton runat="server" Icon="Anchor"></ext:ToolbarButton>
<ext:ToolbarButton runat="server" Text="Bottom Button3"></ext:ToolbarButton>
</Items>
</ext:Toolbar>
</ext:ContainerLayout>
</Body>
</ext:Panel>
</form>
</body>
</html>

[/code]

SQL Script for Controls and LINQ

jlertle — Thu, 18 Dec 2008 09:03:43 GMT

All,

This is for SQL 2000 but it might work for later.

I wrote this to ease some of the repetitive tasks. This script will generate the basic defaults that I use and then I tweak to fit.

I build everything based on datatype, field length and some field naming conventions.

So far I have:
-Anchors and appropriate controls.
-LINQ "Bindings" for pull and save of data.
-GridPanel, columns and conditional LINQ where clauses.

Here is an example of how to use the conditional LINQ where clause:
[code]protected void IndSearchCondQuery(String vIndCUSTOMERCD, String vIndFIRSTNAME, String vIndLASTNAME, String vIndEMAIL, DateTime vIndJOINDATE)
{
if (!String.IsNullOrEmpty(vIndCUSTOMERCD) || !String.IsNullOrEmpty(vIndFIRSTNAME) || !String.IsNullOrEmpty(vIndLASTNAME) || !String.IsNullOrEmpty(vIndEMAIL) || vIndJOINDATE.Year != 1)
{

CV2DataContext db = new CV2DataContext();

var query = from c in db.CUSTOMER2s
where (String.IsNullOrEmpty(vIndCUSTOMERCD) || c.CUSTOMERCD.ToString().Equals(vIndCUSTOMERCD))
&& (String.IsNullOrEmpty(vIndFIRSTNAME) || c.FIRSTNAME.Contains(vIndFIRSTNAME))
&& (String.IsNullOrEmpty(vIndLASTNAME) || c.LASTNAME.Contains(vIndLASTNAME))
&& (String.IsNullOrEmpty(vIndEMAIL) || c.EMAIL.Contains(vIndEMAIL))
&& (vIndJOINDATE.Year == 1 || c.JOINDATE >= vIndJOINDATE)
select new { c.CUSTOMERCD, c.FIRSTNAME, c.LASTNAME, c.ORGNAME, c.CITY, c.STATECD, c.PROVINCE, c.COUNTRY, c.EMAIL };

this.IndSearchStore.DataSource = query;
this.IndSearchStore.DataBind();
}

}[/code]

I call this from an AjaxEvent button click fed by text fields:
[code]
protected void IndStoreBind(object sender, AjaxEventArgs e)
{
IndSearchCondQuery(this.tfCustCD.Text, this.tfIndFirst.Text, this.tfIndLast.Text, this.tfIndEmail.Text, , this.dfIndJoinDate.SelectedDate);
}
[/code]

Feel free to modify and share.

Hope it helps someone!

Oops.. SQL attachment not accepted. Just remove the .txt.

Oh yeah... do a find and replace on:
[code]WHERE O.name = 'customer'[/code]
to change the table name from 'customer' to whatever.

and

[code]'Ind' as [Abrv][/code] is the table abbreviation I prefix my search form controls with.

Fun with Windows

jlertle — Sat, 22 Nov 2008 13:27:50 GMT

Want to Hide/Cascade/Tile all open windows?

It took me some searching to find this so I thought I would share. This is mostly Animal's code from his modified desktop.js I just tweaked it a little.

[code]<script type="text/javascript">
var HideAllWin = function() {
Ext.WindowMgr.each(function(w) {
if (w.isVisible()) w.minimize();
});
}

var TileAllWin = function() {
var availWidth = Ext.lib.Dom.getViewWidth();
var x = 1;
var y = 1;
var nextY = y;
Ext.WindowMgr.each(function(w) {
if (w.isVisible() && !w.maximized) {
w.setHeight(300); //remove if you don't want to resize windows
w.setWidth(300); //remove if you don't want to resize windows
var wi = w.el.getWidth();

//Wrap to next row if this Window will go off the end
if ((x > 1) && (x + wi > availWidth)) {
x = 1;
y = nextY;
}

w.setPosition(x, y);
x += wi + 1;
nextY = Math.max(nextY, y + w.el.getHeight() + 1);
}
});
}

</script>
[/code]

Hope it helps someone!

Coolite Examples Explorer

georgelanes — Fri, 14 Nov 2008 05:30:43 GMT

Hi,

The Coolite Examples Explorer source code can be downloaded?

The Extjs.com have this option to use in localhost. The same is made for the Extjs documentation.

Where can be find?

Thanks,

more sample please!

bruce — Thu, 23 Oct 2008 23:58:43 GMT

I holp I can see more sample, especially how to create own control.

[EXAMPLE] Portal

geoffrey.mcgill — Tue, 07 Oct 2008 07:36:56 GMT

We just added two new examples to the explorer demonstrating the use of the new <ext:Portal> which was shipped with the v0.6 relase.

Simple - http://examples.coolite.com/?/Portal/Basic/Simple/
Deluxe - http://examples.coolite.com/?/Portal/Basic/Deluxe/

[EXAMPLE] TableLayout in Markup and Code Behind

geoffrey.mcgill — Thu, 16 Oct 2008 10:21:37 GMT

Two new TableLayout examples have been added to the explorer. Same Layout done in both markup and C#.

http://examples.coolite.com/?/Layout/TableLayout/Simple_in_Markup/

http://examples.coolite.com/?/Layout/TableLayout/Simple_in_CodeBehind/

Hope this helps.

[EXAMPLE] AjaxEvent Usage Summary

geoffrey.mcgill — Wed, 08 Oct 2008 04:56:46 GMT

A new example has been added to the explorer which demonstrates adding AjaxEvents to various Controls and html elements.

http://examples.coolite.com/?/AjaxEvents/Basic/Summary/

Personally I feel this is the most exciting feature of the whole Coolite Toolkit (or any ASP.NET webcontrol... Microsoft or 3rd party). The connection between the server and client is so easy to bridge now.

Let me know what you think.

Hope this help.

[EXAMPLE] BorderLayout with image on Collapsed Region

geoffrey.mcgill — Tue, 07 Oct 2008 09:13:09 GMT

A new example has been added to the explorer demonstrating how to add a custom image to a Collapsed BorderLayout Region, see http://examples.coolite.com/?/Layout/BorderLayout/Collapsed_Region_Image

Hope this helps.

Center ext:window on window resizing

matteo — Thu, 02 Oct 2008 03:02:15 GMT

Well a very (very) simple example, but maybe usefull also to you:

[code]
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" Theme="Default" runat="server">
<Listeners>
<WindowResize Handler=" {Window1}.getEl().center(Ext.getBody()); " />
</Listeners>
</ext:ScriptManager>
<ext:Window ID="Window1" runat="server" Maximizable="true" Closable="false" Collapsible="true" Icon="Application" Title="Title">
<Content>
<p>hello</p>
</Content>
<Listeners>
<Maximize Handler="var view = Ext.getBody().getViewSize(); el.setSize(view.width, view.height); " />
</Listeners>
</ext:Window>
</form>
[/code]

... something moves

Matteo