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>