[CLOSED] NumberField text layout

Page 2 of 2 FirstFirst 12
  1. #11
    Thanks Baidaly,

    Would you mind providing a little usage sample of this override? I just placed it within the script tags of the head element and it didn't make a difference. Is it Ext.form.TextField that needs to be overridden to change the NumberField behavior?
  2. #12
    Here the example :
    Click image for larger version. 

Name:	textfield.PNG 
Views:	94 
Size:	1.6 KB 
ID:	5096
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <ext:ResourceManager runat="server" />
    
    <style>
    	.ux-icon-cls {
    		background: url(clock.png);
    	}
    	
    	.x-textfield-icon-input {
    		padding-left: 3px !important;
    		padding-right: 20px !important;
    	}
    </style>
    
    <ext:NumberField runat="server" IconCls="ux-icon-cls" />
    
    <script>
        Ext.override(Ext.form.TextField, {
            setIconCls : function (iconCls) {
                if (this.isIconIgnore()) {
                    return;
                }
            
                if (!this.icon) {
                    this.renderIconEl();
    
                    this.on("hide", function () {
                        this.icon.hide();
                    });
    
                    this.on("show", function () {
                        this.icon.show();
                    });
                }
    
                this.iconCls = iconCls;
                this.icon.dom.className = "x-textfield-icon " + iconCls;
                this.icon.applyStyles({
                    left: this.getWidth() - this.icon.getWidth() - 3
                });
                if (this.hidden) {
                    this.icon.hide();
                    this.on(
                        "show", 
                        function () {
                            this.syncSize();
                        }, 
                        this, { 
                            single : true
                        });
                } else {
                    this.syncSize();
                }
            }
        });
    </script>
  3. #13
    Thanks Daulet,

    The text layout seems alright now. The icon, however, is still left-aligned. Could you please take a look?

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <!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 id="Head1" runat="server">
        <title>Ext.NET Example</title>
        <style type="text/css">
            .ux-icon-cls
            {
                background: url(./Images/number_sign.png);
            }
            
            .x-textfield-icon-input
            {
                padding-left: 3px !important;
                padding-right: 20px !important;
            }
        </style>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:NumberField ID="NumberField1" runat="server" IconCls="ux-icon-cls" />
        <script type="text/javascript">
            Ext.override(Ext.form.TextField, {
                setIconCls: function (iconCls) {
                    if (this.isIconIgnore()) {
                        return;
                    }
    
                    if (!this.icon) {
                        this.renderIconEl();
    
                        this.on("hide", function () {
                            this.icon.hide();
                        });
    
                        this.on("show", function () {
                            this.icon.show();
                        });
                    }
    
                    this.iconCls = iconCls;
                    this.icon.dom.className = "x-textfield-icon " + iconCls;
                    this.icon.applyStyles({
                        left: this.getWidth() - this.icon.getWidth() - 3
                    });
                    if (this.hidden) {
                        this.icon.hide();
                        this.on(
                        "show",
                        function () {
                            this.syncSize();
                        },
                        this, {
                            single: true
                        });
                    } else {
                        this.syncSize();
                    }
                }
            });
        </script>
        </form>
    </body>
    </html>
    Attached Thumbnails Click image for larger version. 

Name:	Screen1.png 
Views:	76 
Size:	964 Bytes 
ID:	5099  
    Attached Images  
  4. #14
    Try this one, I added config item iconAtRight

    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Ext.NET Example</title>
        <style type="text/css">
            .ux-icon-cls
            {
                background: url(clock.png);
            }
             
            .x-textfield-icon-input
            {
                padding-left: 3px !important;
                padding-right: 20px !important;
            }
        </style>
    </head>
    <body>
        <form runat="server">
        
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" SourceFormatting="True" />
        
        <script>
            Ext.override(Ext.form.TextField, {
                setIconCls: function (iconCls) {
                    if (this.isIconIgnore()) {
                        return;
                    }
     
                    if (!this.icon) {
                        this.renderIconEl();
     
                        this.on("hide", function () {
                            this.icon.hide();
                        });
     
                        this.on("show", function () {
                            this.icon.show();
                        });
                    }
     
                    this.iconCls = iconCls;
                    this.icon.dom.className = "x-textfield-icon " + iconCls;
                    if (this.hidden) {
                        this.icon.hide();
                        this.on(
                        "show",
                        function () {
                            this.syncSize();
                        },
                        this, {
                            single: true
                        });
                    } else {
                        this.syncSize();
                    }
                    
                    if (this.iconAtRight) {
                        this.icon.setStyle('left', (this.getWidth() - this.icon.getWidth() - 3) + 'px');
                    }
                }
            });
        </script>
            
        <ext:NumberField ID="NumberField1" runat="server" IconCls="ux-icon-cls">
            <CustomConfig>
                <ext:ConfigItem runat="server" Name="iconAtRight" Value="true" Mode="Raw"></ext:ConfigItem>
            </CustomConfig>
        </ext:NumberField>
    
        
        </form>
    </body>
    </html>
  5. #15
    Thanks Daulet, that works! Please mark this thread as resolved.
Page 2 of 2 FirstFirst 12

Similar Threads

  1. [CLOSED] How to add text to a collapsed region of border layout
    By ISI in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 06, 2012, 12:04 PM
  2. Replies: 2
    Last Post: Jul 11, 2012, 5:18 PM
  3. [CLOSED] NumberField zero empty text and value
    By kemalyigit in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 23, 2012, 11:30 AM
  4. [CLOSED] vbox layout inside column layout
    By craig2005 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 04, 2011, 2:44 PM
  5. [CLOSED] numberfield text
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 02, 2010, 4:06 PM

Tags for this Thread

Posting Permissions