Coolite Forums / Coolite Toolkit / Examples and Extras

ASP.Net Membership System - Login

Cr@iG — Thu, 04 Mar 2010 02:56:06 GMT

Hey, After a little work I've added the asp.net membership functionality to a login window. Any help or improvements welcome

VB.Net:

[code]

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="DriveBusiness_Tracking._Default" %>

<%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %>
<%@ Register assembly="Devart.Data.Mysql" namespace="Devart.Data.Mysql" tagprefix="ddm" %>

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

Protected Sub Login1_Authenticate(ByVal sender As Object, ByVal e As Coolite.Ext.Web.AjaxEventArgs)

'We need to determine if the user is authenticated and set e.Authenticated accordingly
'Get the values entered by the user
Dim loginUsername As String = Username.Text
Dim loginPassword As String = Password.Text

'determine if the user's username/password are valid
If Membership.ValidateUser(loginUsername, loginPassword) Then
FormsAuthentication.SetAuthCookie(loginUsername, True)
Response.Redirect("/desktop.aspx")
Else
e.Success = False
e.ErrorMessage = "Invalid Username or Password"
End If

End Sub

</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="loginhead" runat="server">
<title>Login</title>

</head>
<body>
<form id="form1" runat="server">
<asp:Login ID="Login1" runat="server" Width="312px">
<LayoutTemplate>
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<ext:Window ID="LoginWindow" runat="server" Closable="false" Resizable="false" Height="150" Icon="Lock" Title="Login" Draggable="false" Width="350" Modal="true" BodyStyle="padding:5px;">
<Body>
<ext:FormLayout ID="FormLayout1" runat="server">
<ext:Anchor Horizontal="100%">
<ext:TextField ID="Username" runat="server" ReadOnly="false" FieldLabel="Username" AllowBlank="false" BlankText="Your username is required." />
</ext:Anchor>
<ext:Anchor Horizontal="100%">
<ext:TextField ID="Password" runat="server" ReadOnly="false" InputType="Password" FieldLabel="Password" AllowBlank="false" BlankText="Your password is required." />
</ext:Anchor>
<ext:Anchor Horizontal="100%">
<ext:Checkbox id="RememberMe" runat="server" ReadOnly="false" FieldLabel="Remember Me" />
</ext:Anchor>
</ext:FormLayout>
</body>
<Buttons>
<ext:Button ID="LoginButton" ValidationGroup="Login1" runat="server" CommandName="Login1.Authenticate" Text="Login" Icon="Accept">
<AjaxEvents>
<Click OnEvent="Login1_Authenticate"></Click>
</AjaxEvents>
</ext:Button>
</Buttons>
</ext:Window>
</LayoutTemplate>
</asp:Login>
</form>
</body>

</html>

[/code]

C#

[Code]

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="DriveBusiness_Tracking._Default" %>

<%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %>
<%@ Register assembly="Devart.Data.Mysql" namespace="Devart.Data.Mysql" tagprefix="ddm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Login1_Authenticate(object sender, Coolite.Ext.Web.AjaxEventArgs e)
{

//We need to determine if the user is authenticated and set e.Authenticated accordingly
//Get the values entered by the user
string loginUsername = Username.Text;
string loginPassword = Password.Text;

//determine if the user's username/password are valid
if (Membership.ValidateUser(loginUsername, loginPassword)) {
FormsAuthentication.SetAuthCookie(loginUsername, true);
Response.Redirect("/desktop.aspx");
}
else {
e.Success = false;
e.ErrorMessage = "Invalid Username or Password";

}
}

</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="loginhead" runat="server">
<title>Login</title>

</head>
<body>
<form id="form1" runat="server">
<asp:Login ID="Login1" runat="server" Width="312px">
<LayoutTemplate>
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<ext:Window ID="LoginWindow" runat="server" Closable="false" Resizable="false" Height="150" Icon="Lock" Title="Login" Draggable="false" Width="350" Modal="true" BodyStyle="padding:5px;">
<Body>
<ext:FormLayout ID="FormLayout1" runat="server">
<ext:Anchor Horizontal="100%">
<ext:TextField ID="Username" runat="server" ReadOnly="false" FieldLabel="Username" AllowBlank="false" BlankText="Your username is required." />
</ext:Anchor>
<ext:Anchor Horizontal="100%">
<ext:TextField ID="Password" runat="server" ReadOnly="false" InputType="Password" FieldLabel="Password" AllowBlank="false" BlankText="Your password is required." />
</ext:Anchor>
<ext:Anchor Horizontal="100%">
<ext:Checkbox id="RememberMe" runat="server" ReadOnly="false" FieldLabel="Remember Me" />
</ext:Anchor>
</ext:FormLayout>
</body>
<Buttons>
<ext:Button ID="LoginButton" ValidationGroup="Login1" runat="server" CommandName="Login1.Authenticate" Text="Login" Icon="Accept">
<AjaxEvents>
<Click OnEvent="Login1_Authenticate"></Click>
</AjaxEvents>
</ext:Button>
</Buttons>
</ext:Window>
</LayoutTemplate>
</asp:Login>
</form>
</body>

</html>

[/code]

Hope this helps

RowExpander RowEditor

sharif — Wed, 10 Feb 2010 12:15:51 GMT

hi guys,

I am looking for example combine RowExpander and grid editor in both mater and child

thanks

TreePanel Ajax Method Loader by code

Mickna — Tue, 08 Dec 2009 08:41:39 GMT

Hi guys,

In all samples of TreePanel in the source code the part in which we create listeners is in html code, but How to do this in code??? Because my tree panel is created dinamically.

The part of html code that I need in c# code is in a big letter.

[code]
<ext:TreePanel
ID="TreePanel1"
runat="server"
Title="Tree"
AutoHeight="true"
Border="false">
<Root>
<ext:AsyncTreeNode NodeID="0" Text="Root" />
</Root>
<Listeners>
<BeforeLoad Fn="nodeLoad" />
</Listeners>
</ext:TreePanel>
[/code]

Please help me.

Dynamic Create GridPanel and Load Data Error

fancycloud — Thu, 22 Oct 2009 23:49:04 GMT

Hi，everybody,In My One Project,IWant to Dynamic Create GridPanel and Load Data,
And I Write the Code By C# Code,but I Had get Error.

This is My Code:

[code]
protected void Page_Load(object sender, EventArgs e)
{
if (!Ext.IsAjaxRequest)
{
CreateGridPanel();

}
}

private void CreateGridPanel()
{

Store MyStore = new Store();
MyStore.ID = "StoreData";
//MyStore.
JsonReader basereader = new JsonReader();
basereader.ReaderID = "BaseID";
RecordField Field0 = new RecordField("id");
RecordField Field1 = new RecordField("FormName");
RecordField Field2 = new RecordField("FormCaption");
RecordField Field3 = new RecordField("DLLName");
basereader.Fields.Add(Field0);
basereader.Fields.Add(Field1);
basereader.Fields.Add(Field2);
basereader.Fields.Add(Field3);

MyStore.Reader.Add(basereader);
DataTable TempTable = DBUtility.SQLHelper.ExecuteTable(CommandType.Text, "Select * from BaseForm", null);

FormPanel MyPanel = new FormPanel();
MyPanel.Width = 500;
MyPanel.Header = true;
MyPanel.Title = "Test Model";
MyPanel.Frame = true;
this.Controls.Add(MyPanel);

GridPanel TempPanel = new GridPanel();

TempPanel.StripeRows = true;
TempPanel.StoreID = MyStore.ID;
TempPanel.Height = 300;
TempPanel.Width = 400;

foreach (DataColumn OldColumn in TempTable.Columns)
{
Column TempColumn = new Column();
TempColumn.DataIndex = OldColumn.ColumnName;
TempColumn.Header = OldColumn.Caption;

TempPanel.ColumnModel.Columns.Add(TempColumn);
}

MyPanel.BodyControls.Add(TempPanel);
MyStore.DataSource = TempTable;
MyStore.DataBind();
}
[/code]

On run the Code,It Get this Error

“/WebSite4”应用程序中的服务器错误。

The Control with ID = 'StoreData' not found

说明: 执行当前 Web 请求期间，出现未处理的异常。请检查堆栈跟踪信息，以了解有关该错误以及代码中导致错误的出处的详细信息。

异常详细信息: System.InvalidOperationException: The Control with ID = 'StoreData' not found

源错误:

执行当前 Web 请求期间生成了未处理的异常。可以使用下面的异常堆栈跟踪信息确定有关异常原因和发生位置的信息。

堆栈跟踪:

[InvalidOperationException: The Control with ID = 'StoreData' not found]   Coolite.Ext.Web.ClientConfig.ToExtConfig(PropertyInfo property, Object obj, ClientConfigAttribute attr, Object defaultValue) +4279   Coolite.Ext.Web.ClientConfig.Process(Object obj) +277[Exception: Error during ClientConfig initialization. StoreID - The Control with ID = 'StoreData' not found]   Coolite.Ext.Web.ClientConfig.Process(Object obj) +470   Coolite.Ext.Web.ClientConfig.Serialize(Object obj, Boolean ignoreCustomSerialization) +846   Coolite.Ext.Web.ClientConfig.Serialize(Object obj) +39   Coolite.Ext.Web.WebControl.get_InitialConfig() +90   Coolite.Ext.Web.WebControl.GetClientConstructor(Boolean instanceOnly, String body) +662   Coolite.Ext.Web.WebControl.GetClientConstructor() +37   Coolite.Ext.Web.WebControl.OnClientInit() +141   Coolite.Ext.Web.Observable.OnClientInit() +39   Coolite.Ext.Web.WebControl.SetResources() +116   Coolite.Ext.Web.WebControl.PreRenderAction() +62   Coolite.Ext.Web.Observable.PreRenderAction() +399   Coolite.Ext.Web.WebControl.Render(HtmlTextWriter writer) +132   Coolite.Ext.Web.Container.Render(HtmlTextWriter writer) +146   System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +27   System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +99   System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25   System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +134   System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +19   System.Web.UI.HtmlControls.HtmlContainerControl.Render(HtmlTextWriter writer) +32   System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +27   System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +99   System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25   System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +134   System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +19   System.Web.UI.WebControls.WebControl.RenderContents(HtmlTextWriter writer) +10   System.Web.UI.WebControls.WebControl.Render(HtmlTextWriter writer) +32   Coolite.Ext.Web.WebControl.Render(HtmlTextWriter writer) +363   Coolite.Ext.Web.Container.Render(HtmlTextWriter writer) +146   System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +27   System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +99   System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25   System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +134   System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +19   System.Web.UI.Page.Render(HtmlTextWriter writer) +29   System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +27   System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +99   System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1266

版本信息: Microsoft .NET Framework 版本:2.0.50727.3053; ASP.NET 版本:2.0.50727.3053

And I Don not Know How to Slove it ,Can Someone Help Me? Thanks.

The example Linked combos in grid.

FreddeM — Mon, 04 Jan 2010 02:02:35 GMT

Following examples I dislike in one way.

http://examples.coolite.com/?/Form/ComboBox/Linked_Combos_In_Grid/

If i select for example: C5 in col1, and C5_S1 in col2 and C5_S1_C1 in col 3 and C5_S1_C1_R1 in last col.

That works like a charm, but imagine that I change col1 to C9, shouldn't the rest of the columns be reseted? Because, now they are'nt linked any more (the values)?

If I have for example these examplevalues:
Col1 = Europe
Col2 = Sweden
Col3 = Norrbotten
Col4 = Luleå

And change Col1 to Africa, it would be an mismatch with the rest of the columns, or?

Example have some error

jack que — Sun, 27 Dec 2009 20:02:18 GMT

hi, when i view the example,have some error.
path: GridPanel->Data with details->Form Details
error message:

Server Error in '/' Application.

The database 'D:\WWWROOT2\EXAMPLES08.COOLITE.COM\APP_DATA\NORTHWND.MDF' cannot be opened because it is version 655. This server supports version 612 and earlier. A downgrade path is not supported.
Cannot open user default database. Login failed.
Login failed for user 'NT AUTHORITY\NETWORK SERVICE'.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Data.SqlClient.SqlException: The database 'D:\WWWROOT2\EXAMPLES08.COOLITE.COM\APP_DATA\NORTHWND.MDF' cannot be opened because it is version 655. This server supports version 612 and earlier. A downgrade path is not supported.
Cannot open user default database. Login failed.
Login failed for user 'NT AUTHORITY\NETWORK SERVICE'.

Master Page, Centered Viewport

dankohler — Mon, 21 Dec 2009 06:59:42 GMT

I can't seem to find an example of how to center (or include) a viewport inside its parent container when the parent is a div.

so for example suppose I have a div that is 800px wide and currently centered within the browser. Then I add a viewport inside that div. Any content I put in the viewport seems to expand and take up the entire browser window when I really want it to observe the parents width.

It almost seems as if everything is being rendered with absolute positioning. Is there a good example of centering things within the browser window? Maybe with a different ext container control?

Thanks in advance

Simple editable array with gridpanel - looking for!

NestorLeone — Fri, 11 Dec 2009 12:11:07 GMT

After checking out the samples in the samples explorer and not getting it, I turn to this spot.

I want to use a gridpanel to make a small list I have in an array, editable (add-edit-remove) but I'm having problems doing so.

First I can't make the gridpanel to show the array contents. Second I don't get the updates to the grid, reflected on the array.- Evidently they are not getting hooked up.

the data store is defined like this :

[code]
<ext:Store ID="UsersStore" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="ContactID" />
<ext:RecordField Name="AccountID" />
<ext:RecordField Name="Name" />
<ext:RecordField Name="PhoneNumber" />
<ext:RecordField Name="PhoneType" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>

[/code]

The gridpanel has the following definition;

[code]
<ext:GridPanel ID="UsersGrid" runat="server"
Title = "Users" StoreID="UsersStore" Height="200"
Border = "false"
Frame = "True"
StripeRows = "True"
MemoryIDField = "ContactID"
TrackMouseOver = "True"
>
<ColumnModel runat="server">
<Columns>
<ext:Column DataIndex="ContactID" ColumnID="ContactID" Hidden="true" />
<ext:Column DataIndex="Name" Header="Name">
<Editor><ext:TextField ID="TextField1" runat="server" /></Editor>
</ext:Column>
<ext:Column DataIndex="PhoneNumber" Header="Phone">
<Editor><ext:TextField ID="TextField2" runat="server" /></Editor>
</ext:Column>
<ext:Column DataIndex="PhoneType" Header="Phone Type">
<Editor>
<ext:ComboBox
ID="ComboBox3"
runat="server"
Editable="false"
EmptyText="">
<Items>
<ext:ListItem Text="cell" Value="cell" />
<ext:ListItem Text="home" Value="home" />
<ext:ListItem Text="work" Value="work" />
</Items>
</ext:ComboBox>
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>

[/code]

In code behind I bind the array to the store Store and the grid..

[code]
UsersStore.DataSource = arrUsers.value
UsersStore.DataBind()
UsersGrid.DataBind()
[/code]

But nothing happens.. any ideas of where I'm messing it up?

Next, this way, does the gridpanel object update the array? Or just the Store? is it neccesary to make some other stuff in order the have the array with the data modified in the grid??

Thanks you guys!

Problems displaying examples

welberger — Mon, 30 Nov 2009 00:19:04 GMT

Hi,

I got problems using the examples site. If I try to use the examples 0.8 site I get a messagebox showing the following error:

Request Failure

Status Code: 200

Status text:
BADRESPONSE: Statement on line 166: Syntax error stacktrace: n/a; see opera:config#UserPrefs|Exceptions Have Stacktrace

I guess it has something to do with my firewall. The problem is,m the firewall doesn't seem to interfere in any way - at least it doesn't show any message about blocking content.

Is there somewhere someone having the same problem and a solution to this?

Thank you

achim

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,

Looking For Master Detail Form example

kumarxlnt — Thu, 17 Sep 2009 23:53:39 GMT

Hi,

Can any one post an example of how to achieve an Master detail Form. ex. like an billing form,etc.. with single save/cancel button to save/cancel master and details(grid)

Regards

[EXAMPLE] How to create new windows

snippher — Tue, 17 Mar 2009 07:49:58 GMT

This is my way to create forms:

add this js:

[code]<script language="javascript" type="text/javascript">
function NewWindow(winURL, winTitle, winHeight, winWidth, winModal, winMax, winRes, winCollap) {
if (winTitle == '' || winTitle == undefined) { winTitle = 'Teste' }
if (winCollap == '' || winCollap == undefined) { winCollap = false }
if (winRes == '' || winRes == undefined) { winRes = false }
if (winModal == '' || winModal == undefined) { winModal = false }
if (winHeight == '' || winHeight == undefined) { winHeight = 500 }
if (winWidth == '' || winWidth == undefined) { winWidth = 500 }
var win = new Ext.Window({ renderTo: Ext.getBody(),
maximizable: winMax,
resizable: winRes,
collapsible: winCollap,
constrain: false,
title: winTitle,
height: winHeight,
width: winWidth,
modal: winModal,
frame: true,
autoLoad:{ maskMsg:"Carregando...", showMask:true, mode:"iframe", url: winURL }
});
win.show();
}
</script>[/code]

then in buttons use:

[code]<ext:Button ID="Button3" runat="server" Text="Teste" Icon="ServerGo">
<Listeners>
<Click Handler="OpenWindow('teste.aspx', 'Exemplo',200,200,false,false,false)" />
</Listeners>
</ext:Button>[/code]

*edit: fixed some bugs and added new vars
please change topic name to How to create new windows

Method to populate any store with any generic list

signup — Fri, 16 Oct 2009 08:48:29 GMT

Hi

I didn't want to write a store object populating routine for every control that uses a Store object. So instead, I wrote a method which takes the store - as set in your aspx page - and a generic list of ANY type and populates the control specify in the StoreID tag. You could go one step further and dynamically create your store fields based upon the property names of the objects stored within the generic list but I couldn't get that to work. Hope someone find this useful

[code]
public static void BindStoreToDataControl<T>(Store store, List<T> list)
{
if (list != null || list.Count > 0)
{
Type t = typeof(T);
//make a new instance of the class name we figured out to get its props
object o = Activator.CreateInstance(t);
//gets all properties
PropertyInfo[] props = o.GetType().GetProperties();

Object[] dataContainer = new Object[list.Count];
int y = 0;
foreach (T item in list)
{
int x = 0;
Object[] data = new Object[props.Length];
//this acts as datacolumn
foreach (PropertyInfo pi in props)
{
//this is the row+col intersection (the value)
string propertyValue = Convert.ToString(item.GetType().GetProperty(pi.Name).GetValue(item, null));
data[x] = propertyValue;
x++;
}
dataContainer[y] = data;
y++;
}
store.DataSource = dataContainer;
store.DataBind();
}
else
{
store.DataSource = new Object[] { };
store.DataBind();
}
}
[/code]

[code]

<ext:ComboBox ID="combobox1"
StoreID="store1"
FieldLabel="Test"
runat="server"
Editable="false"
ReadOnly="true"
DisplayField="Name"
ValueField="ID"
Width="250">
</ext:ComboBox>

<ext:Store ID="store1" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="ID" />
<ext:RecordField Name="Name" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>

[/code]

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!

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

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]

Doloto

simonmicheal — Wed, 16 Sep 2009 10:22:47 GMT

Might be useful

http://msdn.microsoft.com/en-us/devlabs/ee423534.aspx

Examples site problem...

drakaan — Thu, 20 Aug 2009 10:33:15 GMT

[code]
syntax error
[Break on this error] function hex_md5(s){ return binl2hex(core_md5(str2binl(s), s.length * chrsz));}
coolite.axd?37030 (line 26)
Ext.ux.plugins.TabCloseMenu is not a constructor
anonymous(Object id=Store1 ajaxEventConfig=Object reader=Object, Object)examples...olite.com (line 54)
anonymous()coolite.axd?37030 (line 152)
anonymous()coolite.axd?37030 (line 30)
anonymous(Object)coolite.axd?37030 (line 766)
anonymous(Object id=Store1 ajaxEventConfig=Object reader=Object, Object name=options)coolite.axd?37030 (line 56)
anonymous(Object name=options)coolite.axd?37030 (line 56)
anonymous()coolite.axd?37030 (line 1)
[Break on this error] ...rces/images/default/s-gif/coolite.axd";
examples...olite.com (line 63)
tabHome is not defined
[Break on this error] Ext.onReady(function(){Ext.apply(Cooli...thods.GetThemeUrl(cbTheme.getValue(),{\r

[/code]

I get a blank screen and error on examples.coolite.com in both IE and FireFox (error listing above is from firebug)

[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/

Dynamic gridPanel

NestorLeone — Thu, 25 Jun 2009 13:17:34 GMT

Vladimir Shcheglov,

Can you post the sample in this post? It's not accesible anymore it seems..

I'm having that same sample and I'd like to see your approach.

Thanks!

Hotkey to display DateField's Calendar

leonardobag — Fri, 03 Jul 2009 07:28:46 GMT

Hi there!
I'm starting to study the ExtJs, and i was having a problem to display the DateField's Calendar and i arrived in the following solution to show it by pressing down the DOWN or SPACE key:
[code]
<ext:KeyMap ID="KeyMap1" runat="server" Target="#{DateField1}">

<ext:KeyBinding>
<Keys>
<ext:Key Code="SPACE" />
</Keys>
<Listeners>
<Event Handler="#{DateField1}.onTriggerClick();" />
</Listeners>
</ext:KeyBinding>

<ext:KeyBinding>
<Keys>
<ext:Key Code="DOWN" />
</Keys>
<Listeners>
<Event Handler="#{DateField1}.onTriggerClick();" />
</Listeners>
</ext:KeyBinding>

</ext:KeyMap>

[/code]

Btw, is there a solution ready for this?

Thanks! Sorry if this topic is in the wrong section, but i think this also could be an example :)

[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/

Looking for MVC + Coolite Example

jpbelli — Wed, 14 Jan 2009 05:09:43 GMT

Hi guys, I'm digging into Coolite and MVC.

First of all you guys have made a great work on coolite (I worked with extjs so I really apreciate your work)

I wonder if you'd have an example using both tecnologies, because i don't know how to reach the controllers instead of the code behind on server side

Additionaly, which kind of controls (UserControls or ServerControls) is better for reusability?

Thanks!

Looking for a not so simple Databinding sample for Asp.Net

mabra — Tue, 21 Apr 2009 12:37:28 GMT

Hi All !

Possibly, such a sample exists?? I was not able to find one! As I am not really, as far not indepth, familar with javascript, I came to coolite, because extJS is exciting! I would like to see a coolite datagrid with editing features.

If I would able to databind some grid with coolite, I could start!

Any help is very welcomed!

BTW-Problem:Each sample I download from "view source" is incomplete [missing the code-behind] and the zipps are always corrupt [anyway which browser I use to download or which unzip[per] I use to unzip!

br--mabra

Example: Updating a Grid Cell programatically

Juls — Tue, 07 Apr 2009 16:03:51 GMT

hi,

very happy with coolite. Lets grow the sample code base.

Lets say you have a grid and on each row (record) there is a field (cell) that represents the sum total of a few of the other cells. We'll call that field total. Here is an easy way to do it.

Add a Listener to your grid:

[code]
<Listeners>
<ValidateEdit Fn="calcTlt" />
</Listeners>
[/code]

On each row click you are going to get an event back with the EventArgObject.

[code]
var calcTlt = function(e) {

var val = parseFloat(e.value); // this is the value of the current changed field ...
var valOfTlt = parseFloat(e.record.get('Tlt')); // Tlt is the name of the field i want to update
var setTo = valOfTlt + val;
e.record.set('Tlt', setTo);

};
[/code]

How can i access to panel controls

david83 — Tue, 07 Apr 2009 11:11:34 GMT

Hi!

I have a Panel in a FormLayout. I need to know how i can to access to the fields textfield. I'm using visual basic. I know that if I only would have a FormLayout, I can access the fields with the code:

.................................................................................
Dim formulario As FormLayout
For Each caja As Control In Formulario.Controls
/....
Next
..........................................................................

but i need the Panel.

The ext code is:

[code]

<ext:FormLayout ID="FormLayout1" runat="server">

<ext:Anchor>

<ext:Panel ID="Panel1" runat="server" AutoHeight="true" FormGroup="true">
<Body>
<table>
<tr>
<td style="width:4%;" align="left">
</td>
<td style="width:18%;" align="left">
<p>Nombre</p>
</td>
<td style="width:78%;" align="left">
<ext:TextField ID="txtNombre" runat="server" FieldLabel="Nombre" Text="" MaxLength="50" MaxLengthText="Ha superado el máximo número de caracteres" AllowBlank="false" ValidationGroup="FORM" BlankText="Debe rellenar este campo." Width="345"/>
</td>
</tr>
</table>

<table>
<tr>
<td style="width:4%;" align="left">
</td>
<td style="width:18%;" align="left">
<p>Razón Social</p>
</td>
<td style="width:78%;" align="left" >
<ext:TextField ID="txtRazonSocial" runat="server" FieldLabel="Razon Social" Text="" MaxLength="50" MaxLengthText="Ha superado el máximo número de caracteres" AllowBlank="true" ValidationGroup="FORM" BlankText="Debe rellenar este campo." Width="345"/>
</td>
</tr>
</table>

<table>
<tr>
<td style="width:8.8%;" align="left">
</td>
<td style="width:38%;" align="left">
<p>CIF</p>
</td>
<td style="width:56%;" align="left" >
<ext:TextField ID="txtCIF" runat="server" FieldLabel="Razon Social" Text="" MaxLength="15" MaxLengthText="Ha superado el máximo número de caracteres" AllowBlank="true" ValidationGroup="FORM" BlankText="Debe rellenar este campo." Width="110" />
</td>
</tr>
</table>
</Body>
</ext:Panel>
</ext:Anchor>
</ext:FormLayout>

[/code]

Any ideas ???

Thanks

code view on desktop window

reinaldo.designerdigital — Tue, 27 Jan 2009 15:14:58 GMT

I try make some things in the desktop :)

I need in my desktop
1 - create a run time window (or desktopwindow)
2 - the window don´t reopen with this to be open
3 - resize the wallpaper of the window

my solutions for these problems

1 and 2

I find in forum create window in run time, but don´t work with desktop window :(.
Create the .js with the code of create windows, and control the opening of them

.js
[code]
var janelas="";
var intJanela=-1;

function createWindow(name){
//verify of the window is opened
intJanela=janelas.indexOf(name);
if (intJanela != -1){
//if have the string, abort function
return
}

//put name in string
janelas += name ;

//open the window
switch(name){
case 'LogOut':{winLogOut(name); break;}
case 'produto.aspx':{ winProduto(name); break;}
case 'produto_categoria.aspx':{ winProdutoCategoria(name); break;}
case 'produto_subcategoria.aspx':{ winProdutoSubCategoria(name); break;}
}
}

function removeTabJanela(win){
//remove the name of window of the string
janelas = janelas.replace(win, " ");
}

function winLogOut(name){
var window = new Ext.Window({
name:name
, collapsible: true
, title: "Formulário teste"
, width:200
, height:300
});
window.name = name;
window.show();
window.on('close',function(){removeTabJanela(name)});
}
[/code]

note I use the name of the .aspx for call the function createWindow
and inserte listener close in code

in the menu I put this

[code]
<ext:MenuItem Text="Produtos">
<Listeners>
<Click Handler="createWindow('produto.aspx')" />
</Listeners>
</ext:MenuItem>
[/code]

Work fine, but I don´t know if is the best mode for make this. like the view of the members...

for the other problem, i make this code in .js

[code]
// Cross-browser, cross-platform, self-resizing
// web page background images. JavaScript code
// copyright 2006, 2007, 2008 Boutell.Com, Inc.
//
// See http://www.boutell.com/newfaq/ for more information.
//
// Permission granted to use, republish, sell and otherwise
// benefit from this code as you see fit, provided you keep
// this notice intact. You may remove comments below this line.
//
// END OF NOTICE
//
// INSTRUCTIONS: this WON'T WORK unless you do the following in the
// document that includes it.
//
// 1. Specify the right doctype at the top of your page:
//
// <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
// "http://www.w3.org/TR/html4/strict.dtd">
//
// 2. In the <head> element of your page, bring in this code:
//
// <script src="resizing_background.js">
// </script>
//
// 3. Set the right event handlers in your body element
// (you may call other functions too, use semicolons to separate):
//
// <body onload="rbInit()" onresize="rbResize()">
//
// 4. Call rbOpen() immediately after your <body> element:
//
// <script>
// // For a centered image that scales up but keeps its proportions
// // (be sure to also set a background-color style on body):
// rbOpen(true);
// // For an image that fills the entire window, distorting if necessary:
// rbOpen(false);
// </script>
//
// 5. If you have any absolutely positioned divs, put them
// BEFORE rbOpen(), and make VERY SURE you set z-index explicitly
// to 1 or higher for them, or the background will appear over
// them. Hint: use a style sheet to make that less painful.
//
// 6. Call rbClose() with the URL of YOUR background image,
// just before your </body> element (relative URLs are fine):
//
// <script>
// rbClose("background.jpg");
// </script>
//
// And that's all it takes!
//
// WARNINGS:
//
// 1. Internet Explorer versions prior to 7 will scroll jumpily.
// IE 7 beta 2 scrolls smoothly, just like Firefox, Safari, and Opera.
//
// 2. There's a very small "fudge factor" in use for Opera, because
// Opera doesn't support my Firefox trick to get the real size
// of the usable client area OR the Internet Explorer clientWidth
// method (Opera returns offsetWidth for clientWidth - that's
// not right, Opera). So I assume a 16 pixel scrollbar vertically
// and no scrollbar horizontally. Makes a very small difference.
//
// 3. Users with JavaScript disabled won't see a background.
// Set a reasonable background color in your <body> element
// as a fallback measure.

function rbIsIE()
{
if (navigator.appName == 'Microsoft Internet Explorer') {
return true;
}
return false;
}

function rbIsOpera()
{
if (navigator.appName == 'Opera') {
return true;
}
return false;
}

var rbCenter = false;

function rbInit()
{
if (rbSupportsFixed()) {
div = document.getElementById('rbBackgroundDiv');
div.style.position = 'fixed';
}
// I'd use onScroll, but that
// doesn't exist in standards mode
setTimeout("rbReposition()", 50);
rbResize();
}

function rbOpen(center)
{
rbCenter = center;
document.write("<div id='rbBodyDiv' style='position: relative; z-index: 2'>
");
}

function rbClose(image)
{
document.write("</div>
");
str = "<div " +
"id='rbBackgroundDiv' " +
"style='position: absolute; " +
" visibility: hidden; " +
" top: 0px; " +
" left: 0px; " +
" z-index: 0'>" +
" <img src='" + image + "' id='rbBackground'>" +
"</div>
";
document.write(str);
document.write("<div " +
"id='rbTestSizeDiv' " +
"style='width: 100%; " +
" height: 100%; " +
" position: fixed; " +
" left: 0; " +
" top: 0; " +
" visibility: hidden; " +
" z-index: -1'></div>
");
}
[/code]

call it in header, and put this in my body (.aspx) desktop

[code]
<body onload="rbInit()" onresize="rbResize()">
<script type="text/javascript" >
rbOpen(true);
</script>
<script type="text/javascript" >
rbClose("images/wallpaper/empresa.jpg");
</script>
[/code]

work fine too...

have this property in the <ext:desktop for make the background resizable??, i don´t use the member wallpaper of the desktop...

tks

"Real world" example

prost — Sun, 11 Jan 2009 03:52:54 GMT

Hi,

I really like this library but can't find any "real world" sample application (downloadable solution) which combines all these nice controls.

I would like to see something like a outlook like layout (viewport, accordion, tree) displaying data in a grid. Edit the data in a Window control (for CRUD actions).

Who has done this and likes to share it?

Thanks

Sander

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

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.

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] 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