I've just prepared an example.
1. Create the JavaScript class.
MyGridPanel JavaScript class
Ext.ux.MyGridPanel = Ext.extend(Ext.net.GridPanel, {
initEvents : function(){
Ext.ux.MyGridPanel.superclass.initEvents.call(this);
this.addEvents("selectionchange");
this.relayEvents(this.getSelectionModel(), ["selectionchange"]);
}
});
Ext.ComponentMgr.registerType("mygridpanel", Ext.ux.MyGridPanel);
The JavaScript extend method
http://docs.sencha.com/ext-js/3-4/#!/api/Ext-method-extend
Useful JavaScript methods regarding how to adding new events for the JavaSctipt class.
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.util.Observable-method-addEvents
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.util.Observable-method-fireEvent
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.util.Observable-method-relayEvents
2. Mark this JavaScript file as Embedded Resources.
3. Add the following to the Assembly.cs.
[assembly: WebResource("Work.resources.js.MyGridPanel.js", "text/javascript")]
4. Implement the MyGridPanelListeners class inheriting from the GridPanelListeners one.
4.1. Add your custom event.
4.2 Override the ConfigOptions property.
MyGridPanelListeners class
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Web.UI;
using System.Xml.Serialization;
using Newtonsoft.Json;
using Ext.Net;
namespace Work
{
public class MyGridPanelListeners : GridPanelListeners
{
private ComponentListener selectionChange;
/// <summary>
/// Fires when the selection changes
/// </summary>
[ListenerArgument(0, "item", typeof(MyGridPanel), "MyGridPanel")]
[TypeConverter(typeof(ExpandableObjectConverter))]
[PersistenceMode(PersistenceMode.InnerProperty)]
[NotifyParentProperty(true)]
[Description("Fires when the selection changes.")]
public virtual ComponentListener SelectionChange
{
get
{
if (this.selectionChange == null)
{
this.selectionChange = new ComponentListener();
}
return this.selectionChange;
}
}
[Browsable(false)]
[EditorBrowsable(EditorBrowsableState.Never)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]
[XmlIgnore]
[JsonIgnore]
public override ConfigOptionsCollection ConfigOptions
{
get
{
ConfigOptionsCollection list = base.ConfigOptions;
list.Add("selectionChange", new ConfigOption("selectionChange", new SerializationOptions("selectionchange", typeof(ListenerJsonConverter)), null, this.SelectionChange));
return list;
}
}
}
}
5. Implement the MyGridPanel class.
5.1. Override the XType property.
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Component-cfg-xtype
XType property
public override string XType
{
get
{
return "mygridpanel";
}
}
The related code within the JavaScript class:
Ext.ComponentMgr.registerType("mygridpanel", Ext.ux.MyGridPanel);
5.2. Override the InstanceOf property.
The constructor name to instantiate the JavaScript class.
InstanceOf property
public override string InstanceOf
{
get
{
return "Ext.ux.MyGridPanel";
}
}
5.3. Override the Resources properties.
To load the control resources.
Resources property
protected override List<ResourceItem> Resources
{
get
{
List<ResourceItem> resources = base.Resources;
resources.Capacity += 1;
resources.Add(new ClientScriptItem(typeof(MyGridPanel), "Work.resources.js.MyGridPanel.js", ""));
return resources;
}
}
5.4. Override the ConfigOptions property.
[Browsable(false)]
[EditorBrowsable(EditorBrowsableState.Never)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]
[XmlIgnore]
[JsonIgnore]
public override ConfigOptionsCollection ConfigOptions
{
get
{
ConfigOptionsCollection list = base.ConfigOptions;
list.Add("listeners", new ConfigOption("listeners", new SerializationOptions("listeners", JsonMode.Object), null, this.Listeners));
return list;
}
}
5.5. Implement some logic.
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
this.SelectionModel.Add(new RowSelectionModel());
}
Here is the resulting code.
MyGridPanel class
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Web.UI;
using System.Xml.Serialization;
using Newtonsoft.Json;
using Ext.Net;
namespace Work
{
public class MyGridPanel : GridPanelBase
{
public override string XType
{
get
{
return "mygridpanel";
}
}
public override string InstanceOf
{
get
{
return "Ext.ux.MyGridPanel";
}
}
protected override List<ResourceItem> Resources
{
get
{
List<ResourceItem> resources = base.Resources;
resources.Capacity += 1;
resources.Add(new ClientScriptItem(typeof(MyGridPanel), "Work.resources.js.MyGridPanel.js", ""));
return resources;
}
}
private MyGridPanelListeners listeners;
/// <summary>
/// Client-side JavaScript Event Handlers
/// </summary>
[NotifyParentProperty(true)]
[PersistenceMode(PersistenceMode.InnerProperty)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)]
[ViewStateMember]
[Description("Client-side JavaScript Event Handlers")]
public MyGridPanelListeners Listeners
{
get
{
if (this.listeners == null)
{
this.listeners = new MyGridPanelListeners();
}
return this.listeners;
}
}
[Browsable(false)]
[EditorBrowsable(EditorBrowsableState.Never)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]
[XmlIgnore]
[JsonIgnore]
public override ConfigOptionsCollection ConfigOptions
{
get
{
ConfigOptionsCollection list = base.ConfigOptions;
list.Add("listeners", new ConfigOption("listeners", new SerializationOptions("listeners", JsonMode.Object), null, this.Listeners));
return list;
}
}
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
this.SelectionModel.Add(new RowSelectionModel());
}
}
}
6. How to use.
Test page
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register Assembly="Work" Namespace="Work" TagPrefix="cc" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.MyGridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1", "test2", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" },
};
store.DataBind();
}
}
</script>
<!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 runat="server">
<title>Ext.NET Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<cc:MyGridPanel ID="MyGridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="test1" />
<ext:RecordField Name="test2" />
<ext:RecordField Name="test3" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Header="Test1" DataIndex="test1" />
<ext:Column Header="Test2" DataIndex="test2" />
<ext:Column Header="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
<Listeners>
<SelectionChange Handler="console.log('MyGridPanel SelectionChange');" />
</Listeners>
</cc:MyGridPanel>
</body>
</html>
Originally Posted by jmcantrell
