[OPEN] [#152] textfield + setIconCls: Issue when set iconCls after entering some value in textfield

  1. #1

    [OPEN] [#152] textfield + setIconCls: Issue when set iconCls after entering some value in textfield

    Hi!!!

    If I set a icon in textfield, using setIconCls function, after entering some value in textfield. The text is behind icon...
    When textfield lost focus, the icon + text in textfield are adjusted...

    With blue and gray theme
    VS11 + Win8 + IE10
    SVN/branches 2.1/

    Project sample!!!
    Please, run sample and input '1111' value in textfield

    <%@ Page Language="vb" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
    
        <script type="text/javascript">
    
            Ext.onReady(function () {
    
                var viewPort = Ext.create("Ext.net.Viewport", {
                    id: "ViewportConsole",
                    renderTo: Ext.getBody(),
                    layout: {
                        type: 'vbox',
                        align: 'stretch'
                    },
                    padding: 5
                });
    
                var mainPanel = viewPort.add({
                    title: 'MyApplication',
                    layout: 'absolute',
                    flex: 1,
                    border: true,
                    defaults: {
                        labelAlign: 'top'
                    }
                });
    
                var text1 = mainPanel.add({
                    itemId: 'text1',
                    xtype: 'textfield',
                    fieldLabel: 'text1',
                    enableKeyEvents: true,
                    x: 10,
                    y: 10,
                    width: 400,
                    listeners: {
                        keyup: {
                            fn: function (item) {
                                if (item.getValue() == '1111') {
                                    item.setIconCls('#PreviousGreen');
                                }
                            }
                        }
                    }
                });
                            
            });
    
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" theme="Gray" runat="server" />
        <div>
        
        </div>
        </form>
    </body>
    </html>
    Last edited by Daniil; Feb 21, 2013 at 4:44 AM. Reason: [OPEN] [#152]
  2. #2
    Hello!

    Thank you! We are investigating.
  3. #3
    Try this:

    keyup: {
    	fn: function (item) {
    		if (item.getValue() == '1111') {
    			item.setIconCls('#PreviousGreen');
    			item.blur();
    			item.focus();
    		}
    	}
    }
    But we will investigate more.
  4. #4
    Hello,

    This looks to be an IE10 bug. The CSS padding rule to shift text is applied, but doesn't work for some reason.
  5. #5
    Hi Daniil!!!

    Yes, the problem occurs only in IE... with 'browser mode' to IE9 and IE8 too...

    You think that this problem are solved in future? I not will like use this code:

    item.blur();
                item.focus();
    Thanks for your help!
  6. #6
    Unfortunately, ExtJS still has some bugs in working with IE10 and we don't know when they'll fix this. We'll investigate other workaround for this problem.
  7. #7
    I can't come up with any other workarounds at the moment.

    Created an Issue for this problem.
    https://github.com/extnet/Ext.NET/issues/152

    Maybe, apply an icon on blur for now?

Similar Threads

  1. [CLOSED] Theme gray + textfield with icon defined in iconCls
    By supera in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 18, 2013, 4:00 PM
  2. [CLOSED] TextField regex issue.
    By ViDom in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 18, 2013, 2:56 PM
  3. issue about maxlength of TextField
    By sonnh11 in forum 1.x Help
    Replies: 4
    Last Post: Jan 07, 2013, 6:33 AM
  4. [CLOSED] Textfield disable issue
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 16, 2011, 10:01 AM
  5. [CLOSED] textfield width issue
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 16, 2011, 12:30 PM

Posting Permissions