I’ve been using (at least until now) Coolite. Awesome component for developer yet for user that concern about user-interface. This component inherited from ExtJs 3.x which runs in javascript. Compiled into dynamic link library, so you can easily add into your Solution/Project but remember this component only works for web-based application. I see this component is good-in-daily use because its simplicity to embed its script in .net, using tags like <open-tag> and <closed-tag> between control you want. For example, I want to make a login dialog box like this:
Basic and simple login dialog box, which there are 3 kind of controls: Window, Textbox and Button. Now let’s see the code.
<ext:Window runat="server"
ID="wLogin"
Icon="Application"
Title="Login"
Width="300"
Height="150">
<Body>
<ext:FormPanel runat="server"
BodyStyle="padding:5px;"
ButtonAlign="Center"
Frame="true"
Height="120"
Width="300"
Header="false">
<Body>
<ext:FormLayout runat="server">
<ext:Anchor>
<ext:MultiField runat="server"
FieldLabel="Username">
<Fields>
<ext:TextField runat="server"
ID="tfLoginUserName"
EmptyText="Masukkan Username..."
AllowBlank="false"
EnableKeyEvents="true"
StyleSpec="text-transform: uppercase;">
</ext:TextField>
</Fields>
</ext:MultiField>
</ext:Anchor>
<ext:Anchor>
<ext:MultiField runat="server"
FieldLabel="Password">
<Fields>
<ext:TextField runat="server"
ID="tfLoginPassword"
InputType="Password"
EmptyText="123456"
AllowBlank="false"
EnableKeyEvents="true"
StyleSpec="text-transform: uppercase;">
</ext:TextField>
</Fields>
</ext:MultiField>
</ext:Anchor>
</ext:FormLayout>
</Body>
<Buttons>
<ext:Button runat="server"
ID="bLogin"
Text="Login"
Icon="Lock">
</ext:Button>
<ext:Button runat="server"
ID="bCancel"
Text="Batal">
</ext:Button>
</Buttons>
</ext:FormPanel>
</Body>
</ext:Window>
Seems little bit long, doesn’t it? And inside the code, it does have non controls that we want. Take a look at FormPanel, FormLayout and MultiField tag, why these control must be there? Because these controls are the Container of the child control such TextField. So definition of Container must be written, it is a must. With 60 lines long, thought that you may fell uncomfortable. But in Visual Studio, once you type the opening tag <ext:FormLayout> then automatically closed tag </ext:FormLayout> will be written. So I think that’s not a big deal. When typing all of these lines of code, put simply as what kind of control/container do you want to, then type it. I’ve experienced that writing code above just consume a couple of minute, may be you do less time
Don’t matter what kind of language you use, c# or vb. This component have compatibility. Oh wait! I almost forgot. When you use this control below the <!DOCTYPE…> tag you must add this line:
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
And inside the body tag add this line:
<ext:ScriptManager ID="ScriptManager1" runat="server" />
Happy Coding then ![]()
see examples from coolite here.

Thursday, 15 April 2010 at 7:40
ini adalah test untuk kamu aja
Thursday, 23 September 2010 at 8:07
hola amigos bueno antetodo un saludo, el motivo que les escribo es para que me puedan aclarar por q soy principiante con esta nueva tecnologia. lo querio preguntar es por que cuando se pone un formpanel a un window y los objetos que estan dentro del formpanel no se ve cuando se quiere ver en diseño en asp.net, la otra pregunta es de como asigno un evento a un boton por q no ace efecto gracias..