Creating a composite server-side/client-side Control based on Coolite/ExtJs

I always marvel at how Coolite team has successfully managed the constraints of both server-side ASP.NET & client-side ExtJs while providing seamless integration between them on both the server & client.

Well, I like to build reusable server-side composite controls. I have successfully created many complex composite controls, but I having a problem while creating Composite controls using Coolite.

The major reason is I want to create a composite controls, that should have class say MyCooliteControl both on the server and the client (like Coolite.Ext.Web.TextField & Ext.form.TextField).

I want to add Coolite controls (say Store, Panel & GridPanel together) as children of the composite server-side control. So, when this control renders on client, the client-side class' object is created that I should be able to access through Ext.getCmp().
Both the server-side & Client-side control should expose the Store, GridPanel etc. as its properties. I also want to add events on my composite client-side control.

I think the Coolite team should have an idea what I am trying to accompolish. Although I am not a master as ExtJs as yet (although I understand Coolite's working more closely), I have studied various options including creating a Plugin, extending an ExtJs class on client or Coolite class on server.

However, I have not been able to imagine which class should I extend & where (on client or on server)?

I would be obliged if Coolite team can post a working example of a composite Server control having Coolite controls as its children. Also, this server-control should also have a corresponding client control exposing the members specified as children on the server, with the client control being accessible as:

Code:

---

Ext.getCmp('<%= Me.ServerControlID.ClientID %>');

---

Hi,

See ColorMenu control in Coolite source. ColorMenu uses ColorPalette control

Thanx for the reply vlad. I did have a look at ColorMenu & its associated js.

Although I have been able to understand much of the Attributes & properties in that class, but seems like an acute shortage of documentation on Coolite classes, interfaces, (and more importantly) attributes would pose some problems during development.

Now having a look at that class, I am contemplating the option to choose from the 2 I see. Basically, I want to create a reusable Ext Search Window that should provide self-contained searching facility. Clearly, all controls would be nested inside the window.
The 2 options I see for this are:

1) Extend Window on server as well as on client. The major task then would be to configure all controls & their properties through the use of proper Coolite attributes.

2) Create my own class inheriting from Observable that simple encapsulates the window & all children in suitable properties. Looks like to be easier implemented.

Which one would the Coolite team suggest (most certainly 1st)? If that's so, is Window the appropriate class to extend in my case??

OK. So I have moved forward with the first option (inheriting from Window on client & on server).

Having cleared a few roadblocks (mainly how to use the ClientConfig attribute), I have bumped into another.
I have created a Server-side class inheriting from Coolite.Ext.Web.Window & a client-side inheritng from Ext.window.

I have the follwong property in the server-side class:

<Ext.ClientConfig("btnSearch", GetType(Ext.LazyControlJsonConverter))> _
<NotifyParentProperty(True)> _
Public ReadOnly Property btn() As Ext.ImageButton
Get
Return (Me.btnSearch)
End Get
End Property

The problem is that the btnSearch returned by this property is the Child control of the window itself. That means the btn has not been created when it is passed in config as:

btnSearch:btnSearchClientID

which generates a js exception. Any convenient way to allow child controls of the window to be added as properties to the window itself??

Hi,

Please note that you need to put child control inside Controls and LazyItems collections
Please post your code for review (if it is possible)

Hi vlad,
I cursed myself at how can I forgot adding the controls to the LazyItems collection together with the controls. I tried to make sure that I follow every pattern I observed on ColorMenu.cs. Somehow, LazyItems skipped in the code.

But now even after adding the controls to the LazyItems collection, the scenario remains the same. I get the same js error. I have attached the complete code for the control with this post.

I have used Partial classes to organize the controls aspect better. The js is also attached. Although the code in the attachement does not use LazyItems, I tested it on my machine that adding each Coolite control to LazyItems had no effect.

Note how in the code, I have used Render Handlers on Controls to add them as Window properties.

As an aside, I was a little surprised at Coolite not following ASP.NET Control developer guidelines entirely. One should override CreateChildControls() and add child controls of compiled server controls there. No doubt, in my own controls, many times I add the children in the constructor itself, but whenever there is a complex control, I usually try to add Children in the CreateChildControls() override only.

Take the case of ColorMenu itself. If I were to subclass it, and override CreateChildControls() where I would use:

this.Controls.Clear();
base.CreateChildControls();
//My custom code for controls

You can clearly see that the base functionality is already broken. This becomes important for reusable Frameworks like Coolite, because no one likes to open up Framework code to see why it is not behaving as expected.

Hi vlad, my control is almost complete. Just need a couple of enhancements. I want to add 2 more Listeners to my control.

Should I directly add them as ComponentListener readonly properties to my Server side control? (because I cannot inherit from WindowListeners class as Lsiteners property is not overidable).

Secondly, even though I specify Center&#111;nload=true while creating my Window (you can see it in the attached code in the post above), still the Window is not centered vertically (it is centered horizontally).

Finally, the above problem remains unresolved as to why I am getting an exception even after adding the controls to LazyListeners collection also??