[CLOSED] [1.0] Custom Control Question

[Timothy]

Hello,

I'm working on my own custom control and would like the following FormID property included in the config options sent to the constructor in JavaScript.

    [Meta]
    public class CustomControl : Ext.Net.Panel
    {
        [Meta]
        [ConfigOption("formID")]
        [NotifyParentProperty(true)]
        public virtual string FormID
        {
            get
            {
                return (String) this.ViewState["FormID"] ?? "";
            }
            set
            {
                this.ViewState["FormID"] = value;
            }
        }

        /// <summary>
        /// Gets the InstanceOf.
        /// </summary>
        public override string InstanceOf
        {
            get
            {
                return "Ext.ux.CustomControl";
            }
        }

        /// <summary>
        /// Gets the XType.
        /// </summary>
        public override string XType
        {
            get
            {
                return "customControl";
            }
        }
    }

I was thinking if I used the ConfigOptions attribute it would be automatically included in what's passed to the constructor, however all it generates is the following:

new Ext.ux.CustomControl({id:"CustomControl1",renderTo:"CustomControl_Container",width:400,border:false});

It didn't include the FormID property.

Can you give me a quick nudge in the right direction? As always your help is much appreciated :)

Cheers

[geoffrey.mcgill]

Hi Timothy,

Give the following a try.

Example

[Meta]
public class CustomControl : Ext.Net.Panel
{
    [XmlIgnore]
    [JsonIgnore]
    [Browsable(false)]
    [EditorBrowsable(EditorBrowsableState.Never)]
    [DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]
    public override ConfigOptionsCollection ConfigOptions
    {
        get
        {
            ConfigOptionsCollection list = base.ConfigOptions;

            list.Add("formID", new ConfigOption("formID", null, "", this.FormID));

            return list;
        }
    }

    [Meta]
    [ConfigOption]
    [NotifyParentProperty(true)]
    public virtual string FormID
    {
        get
        {
            return (String)this.ViewState["FormID"] ?? "";
        }
        set
        {
            this.ViewState["FormID"] = value;
        }
    }

    /// <summary>
    /// Gets the InstanceOf.
    /// </summary>
    public override string InstanceOf
    {
        get
        {
            return "Ext.ux.CustomControl";
        }
    }

    /// <summary>
    /// Gets the XType.
    /// </summary>
    public override string XType
    {
        get
        {
            return "customControl";
        }
    }
}

The [ConfigOption] attribute is not used during runtime now. The attribute is used by a custom parser we created to spin through all the properties to code generate the ConfigOptions collection. This eliminates the need for Reflection and provides a significant performance boost.

Hope this helps.

[Timothy]

Geoffrey,


Thanks, I didn't realize you moved off reflects. Bravo!


One last question for you, it's a design question:


I'm currently inheriting from the Ext.Net.Panel however I think this control has way to much bloat, at least more than I need for this particular custom control. Can you make a recommendation of what control I should be inheriting from the only purpose I would like to use the control for is to update the control body in JavaScript?


For example, when I call a JS function on my CustomControl I will do a:

template.overwrite(this.body, { ... } );

Or should I stick with Panel?


Cheers,
Timothy

[geoffrey.mcgill]

I think you could move up to the Ext.Net.Container.

The Container is a basically just a box (div), and still includes the ability to set the html.


Obviously you lose functionality like Header, TopBar, BottomBar, etc.


Hope this helps.

[geoffrey.mcgill]

Maybe Container will not work for you since it does not include the <Content> region. You can't place random html/strings inside the body.

Or, you could set the .Html property, although I suspect that is not ideal.


The Panel may have a lot of features, although the rendering performance should not be an issue.


Sorry about the confusion.

[Timothy]

Thanks Geoffrey!


Appreciate your input :)


Cheers,
Timothy

[Timothy]

geoffrey.mcgill (3/12/2010)Maybe Container will not work for you since it does not include the <Content> region. You can't place random html/strings inside the body.

Or, you could set the .Html property, although I suspect that is not ideal.

The Panel may have a lot of features, although the rendering performance should not be an issue.

Sorry about the confusion.

I've changed my code to:

var el = this.getEl();
this.tpl.overwrite(el, options);

Works as expected.

Cheers