[CLOSED] [1.0] Custom Control Question

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.

Code:

---

    [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:

Code:

---

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

Hi Timothy,

Give the following a try.

Example

Code:

---

[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.

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:

Code:

---

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

---

Or should I stick with Panel?


Cheers,
Timothy

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.

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.

Thanks Geoffrey!


Appreciate your input :)


Cheers,
Timothy

Quote:

---

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:

Code:

---

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

---

Works as expected.

Cheers