Hi,
It actually worked, my full example had a copy/paste error...!
Also, to answer some of your questions, I probably didn't explain very well. In my custom components I don't necessarily set ids when I make use of them (either when I create them in code-behind or in markup).
At the same time, the component itself may set up listeners that call instance methods. I do this to try and keep most of my JavaScript code encapsulated (somewhat). When creating the component on the server side, the listener cannot always use the "this" keyword when referencing the instance (sometimes I can - example below).
I find that using ClientID doesn't work when an ID isn't set by the caller/user of the component, and I would prefer not to force it. So I find that using an Explicit id helps, but then I have to ensure id is made unique.
This is achieved by using the Interlocked.Increment method so I can generate default ids like "MyId1", "MyId2" etc. It is just easier to look at when debugging compared to ASP.NET's auto generated ones which are quite long (though understandable why they need to do that).
Here is an example of a custom window class
public class CustomWindow : Window
{
private static int _instanceCount;
public override string InstanceOf
{
get { return "MyApp.CustomWindow"; }
}
public override string XType
{
get { return "customwindow"; }
}
public override string ID
{
get { return base.ID ?? (base.ID = "CustomWindow" + Interlocked.Increment(ref _instanceCount)); }
set { base.ID = value; }
}
public override IDMode IDMode
{
get { return IDMode.Explicit; }
}
protected override void OnInit(EventArgs e)
{
Title = "Custom window";
Listeners.Show.Handler = "this.customFn();";
BottomBar.Add(new Toolbar
{
Items =
{
new Button
{
Text = "Button",
Listeners =
{
Click =
{
Handler = "#{" + ID + "}.onButtonClicked();"
}
}
}
}
});
base.OnInit(e);
}
}
Notice for the show handler I can just use "this". But, for the button click handler, if I want to call an instance method on the custom window, not the button, so I use "ID". (And because ID is auto incremented (maybe IDMode = Explicit is optional) I can get unique ids so I can use Handler = "#{" + ID + "}.onButtonClicked();".
The client side JavaScript is:
Ext.define('MyApp.CustomWindow', {
extend: 'Ext.Window',
alias: 'customWindow',
customFn: function() {
console.log('customFn called');
},
onButtonClicked: function() {
console.log('onButtonClicked called');
}
});
In some markup I can then create something like this
<body>
<ext:ResourceManager runat="server" />
<ext:CustomWindow runat="server" Width="300" Height="100" />
</body>
The generated JavaScript (pretty printed) is this:
Ext.net.ResourceMgr.init({
id: "ctl00",
theme: "gray"
});
Ext.onReady(function () {
Ext.create("MyApp.CustomWindow", {
id: "CustomWindow1",
height: 100,
hidden: false,
renderTo: Ext.getBody(),
width: 300,
bbar: {
xtype: "toolbar",
items: [{
id: "ctl03",
text: "Button",
listeners: {
click: {
fn: function (item, e) {
App.CustomWindow1.onButtonClicked();
}
}
}
}]
},
title: "Custom window",
listeners: {
show: {
fn: function (item) {
this.customFn();
}
}
}
});
});
Notice the button click listener has "App.CustomWindow1.onButtonClicked()" which is fine.
If I now change to using ClientID (regardless of whether I remove the ID and IDMode override or keep them) I get this in the generated JavaScript for the button click handler:
id: "ctl01", // id of component even if ID property is left in place
// all the other properties are as above -unchanged
items: [{
id: "ctl03",
text: "Button",
listeners: {
click: {
fn: function (item, e) {
Ext.get("App").onButtonClicked(); // this is not right
}
}
}
}]
And that therefore throws an error when clicking the button. (I also change OnInit and base.OnInit calls to be OnLoad instead but same problem.)
I guess what I should really be doing is setting up all the event handling in the JavaScript side, and relaying them or catching them in the right place - so the Custom Window on the JavaScript side will catch the button click event and call the local method as needed. I should perhaps also not be creating the button like this but really that should be in the JavaScript custom window class. However, in some of my real world components it is not as easy as that I think; sometimes I auto generate a large number of components contained inside my component so at the time the Javascript class is written/defined it is not easy to do this (I'd have to pass lots of custom configs etc from the C# component to the JavaScript which then needs a lot more intelligence and logic on what to create when, whereas sometimes that is easier and more readable/maintainable to set a few handlers like this encapsulated in the .NET control).
Originally Posted by anup
