[CLOSED] Extending ExtJS class and Ext.Net Markup

[matt]

Hi,

I need to modify a few bits and bobs in the combo box behavior. I will extend ExtJS combo box class and call it e.g. "ComboBoxEx".

Is it possible to "assign" somehow a new (extended) ExtJS class (in this case my ComboBoxEx) to one of <ComboBox> Ext.Net markup (so I don't have to create it from directly from java script) ?

Thank you,

[matt]

Correct me if I am wrong, there is no e.g. Attribute in Ext.Net markup that I could directly use to replace "Ext.form.field.ComboBox" to my own ExtJS class.

I have added my own class and markup definition.

public class ComboBoxEx : Ext.Net.ComboBox
{

}

Registered the assembly in web config and added reference in my markup:

<%@ Register Assembly="MyApp.Controls" Namespace="MyApp.Controls" TagPrefix="myCtrls" %>

This is working fine. I can replace markup with my own.

Now the question is how to replace ExtJs class behind ?

I have found that in ComboBox.cs:

[Category("0. About")]
[Description("")]
public override string InstanceOf
{
    get
    {
        return "Ext.form.field.ComboBox";
    }
}

But it is never called. Is it only some "informational" property ?

[anup]

InstanceOf will be used by the Ext.NET framework code to instantiate an instance on the client side, e.g. when it generates the required initialization scripts.

But sometimes, it will use xtype (when lazy instantiation is needed), e.g. if a component is added to an items collection of a container.

So you should override both InstanceOf and XType.

Here is a small example (not run or tested it, just from memory!)

    public class FeedbackWindow : Window
    {
        public override string XType { get { return "myfeedbackwindow"; } }
        public override string InstanceOf { get { return "Ext.ux.MyFeedbackWindow"; } }

        ... all your customizations here
    }

And then the corresponding JavaScript class:

Ext.define('Ext.ux.MyFeedbackWindow', {
    extend: 'Ext.window.Window',
    alias: 'widget.myfeedbackwindow',

    initComponent: function() {
        this.callParent(arguments);

        // your custom initialization here
    },

    ... any further customization to your subclass here
});

You can see the xtype matches the big after the alias's "widget" part.

Worth looking at the sencha docs and examples of use of xtype, etc.

Hope that helps?

[geoffrey.mcgill]

[matt]

Hi,

Thank you both. That works great... I can start working on my new "widget" now :)

Best,