[CLOSED] Hint in how to add Custom property to control

[imaa]

Dear All,

Please I need to add custom property to solve the RTL problem in Ext.net .

i did some changes in the source so i add custom property , but i cant find where i can handle it in the extJS files custom codes ,

like i add Direction Property to TextField and its generated in the js code but its not handled.

 [Meta]
        [Category("5. Button")]
        [DefaultValue(Direction.None)]
        [DirectEventUpdate(MethodName = "SetDirectionClass")]
        [Description("Custom Direction ")]
        public virtual Direction Direction
        {
            get
            {
                object obj = this.ViewState["Direction"];
                return (obj == null) ? Direction.None : (Direction)obj;
            }
            set
            {
                this.ViewState["Direction"] = value;
            }
        }

  public override ConfigOptionsCollection ConfigOptions
        {
            get
            {
                ConfigOptionsCollection list = base.ConfigOptions;
               
  list.Add("directionClsProxy", new ConfigOption("directionClsProxy", new SerializationOptions("directionCls"), "", this.DirectionClsProxy));
}
}

the final result is

 
     Ext.net.ResourceMgr.init({id:"ctl04",BLANK_IMAGE_URL:"/extjs/resources/images/default/s-gif/ext.axd",aspForm:"ctl01",theme:"blue",icons:["Add"]});Ext.onReady(function(){Ext.QuickTips.init();this.Store1=new Ext.ux.data.PagingStore({proxyId:"Store1",autoLoad:true,reader:new Ext.data.JsonReader({fields:[{name:"FirstName"},{name:"LastName"},{name:"FullName",convert:function(value,record){return record.LastName + ', ' + record.FirstName;}}]}),directEventConfig:{},proxy:new Ext.data.PagingMemoryProxy([{"FirstName":"Bill","LastName":"Foot"},{"FirstName":"Bill","LastName":"Little"},{"FirstName":"Bob","LastName":"Jones"},{"FirstName":"Bob","LastName":"Train"},{"FirstName":"Chris","LastName":"Johnson"}], false)});new Ext.form.FormPanel({id:"ctl05",labelWidth:150,renderTo:"ctl05_Container",height:70,width:400,items:{id:"ctl06",xtype:"textfield",fieldLabel:"TextField with Spinner",plugins:this.Spinner1=new Ext.ux.TextSpinner({listeners:{spin:{buffer:100,fn:function(item){this.field.setValue(Store1.getAt(this.value).get('FullName'));}}},maxValue:4,minValue:0,value:4}),readOnly:true,directionCls:"direction-right",iconCls:"icon-add"},padding:10,title:"Form",renderFormElement:false,url:"/Examples/Form/TextField/Spinner_Plugin/default.aspx?"});});

how can i handle this in rendering action (in the bold text (directionCls:"direction-right"))

best regards

[geoffrey.mcgill]

Can you post the JavaScript required to make the modifications? Are you overriding functionality during the client-side rendering of the Component?

[Daniil]

Hi,

Do you need to add this css class to TextField?

If so, you could use Render listener of TextField.

Example

YourTextField tf = new YourTextField();
tf.Listeners.AfterRender.Handler = "this.addCls(this.directionCls);"

Or you can add this class to the .Cls property on server side within your custom control, overriding .Cls

this.Cls += " " + this.DirectionCls;

[imaa]

i'm trying to override this function

// @source core/form/TextField.js

Ext.form.TextField.prototype.initComponent = Ext.form.TextField.prototype.initComponent.createSequence(function () {
    this.addEvents("iconclick");
    this.setIconClass = this.setIconCls;
});

Ext.override(Ext.form.TextField, {
    truncate : true,

    afterRender : function () {
        Ext.form.TextField.superclass.afterRender.call(this);

        if (this.maxLength !== Number.MAX_VALUE && this.truncate === true) {
            this.setMaxLength(this.maxLength);
        }

        if (this.iconCls) {
            var iconCls = this.iconCls;
            delete this.iconCls;
            this.setIconCls(iconCls);
        }
    },
    
    setMaxLength : function (val) {
        this.el.dom.setAttribute("maxlength", val);
        this.maxLength = val;
    },
    
    isIconIgnore : function () {
        return !!this.el.up(".x-menu-list-item");
    },

    //private
    renderIconEl : function () {
        if (!this.wrap) {
            this.wrap = this.el.wrap();
            this.positionEl = this.wrap;
        }
        
        this.wrap.addClass("x-form-field-wrap");
        this.wrap.applyStyles({ position : "relative" });
        this.el.addClass("x-textfield-icon-input");

        this.icon = Ext.DomHelper.append(this.el.up("div.x-form-field-wrap") || this.wrap, {
            tag   : "div", 
            style : "position:absolute"
        }, true);
        
        if (this.initialConfig.width) {
            delete this.lastSize;
            this.setWidth(this.initialConfig.width);
        }        
        
        this.icon.on("click", function (e, t) {
            this.fireEvent("iconclick", this, e, t);
        }, this);
    }, //private
    renderDerectionEl: function () {
        if (!this.wrap) {
            this.wrap = this.el.wrap();
            this.positionEl = this.wrap;
        }

        this.wrap.addClass("x-form-field-wrap");
        this.wrap.applyStyles({ position: "relative" });
        this.el.addClass("x-textfield-direction-input");

        this.direction = Ext.DomHelper.append(this.el.up("div.x-form-field-wrap") || this.wrap, {
            tag: "div",
            style: "position:absolute"
        }, true);

        if (this.initialConfig.width) {
            delete this.lastSize;
            this.setWidth(this.initialConfig.width);
        } 
    },

    setIconCls : function (iconCls) {
        if (this.isIconIgnore()) {
            return;
        }
        
        if (!this.iconCls) {
            this.renderIconEl();
        }

        this.iconCls = iconCls;
        this.icon.dom.className = "x-textfield-icon " + iconCls;
        this.syncSize();
    },

    setDirectionClass: function (directionCls) {
        if (this.isIconIgnore()) {
            return;
        }

        if (!this.iconCls) {
            this.renderIconEl();
        }

        this.directionCls = directionCls;
        this.direction.dom.className = "x-textfield-direction " + iconCls;
        this.syncSize();
    },
    
    filterKeys : function (e) {
        if (e.ctrlKey) {
            return;
        }
        
        var k = e.getKey();
        
        if ((Ext.isGecko || Ext.isOpera) && (e.isNavKeyPress() || k === e.BACKSPACE || (k === e.DELETE && e.button === -1))) {
            return;
        }
        
        var cc = String.fromCharCode(e.getCharCode());
        
        if (!Ext.isGecko && !Ext.isOpera && e.isSpecialKey() && !cc) {
            return;
        }
        
        if (!this.maskRe.test(cc)) {
            e.stopEvent();
        }
    }
});

by addin this function to textfield component

 setDirectionClass: function (directionCls) { 
        this.directionCls = directionCls;
        this.direction.dom.className = "x-textfield-direction " + iconCls;
        this.syncSize();
    }

[imaa]

actually i'm working in the source code of Ext.net to add new property to all controls to support RTL
which i need to modify all of the controls rendering script

regards

[Daniil]

To add that function for TextField, you should add it to .prototype.

Ext.form.TextField.prototype.setDirectionClass = function (directionCls) {
    //your code
};

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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>
    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    <script type="text/javascript">
        Ext.form.TextField.prototype.setDirectionClass = function (directionCls) {
            //your code
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:TextField ID="TextField1" runat="server" />
        <ext:Button runat="server" Text="alert(TextField1.setDirectionClass)">
            <Listeners>
                <Click Handler="alert(TextField1.setDirectionClass);" />
            </Listeners>
        </ext:Button>
    </form>
</body>
</html>