PDA

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



supera
Feb 18, 2013, 5:09 PM
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>

Baidaly
Feb 18, 2013, 9:28 PM
Hello!

Thank you! We are investigating.

Baidaly
Feb 19, 2013, 3:56 AM
Try this:



keyup: {
fn: function (item) {
if (item.getValue() == '1111') {
item.setIconCls('#PreviousGreen');
item.blur();
item.focus();
}
}
}


But we will investigate more.

Daniil
Feb 19, 2013, 3:11 PM
Hello,

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

supera
Feb 20, 2013, 8:08 PM
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!

Baidaly
Feb 20, 2013, 11:16 PM
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.

Daniil
Feb 21, 2013, 5:44 AM
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?