Sep 25, 2013, 8:15 PM
[CLOSED] Nepture Theme rendering issue on IE8 Browser
Hi Support team,
I'm working on one web application with Neptune theme but IE 8 has some rendering issues with this theme.
I used a number field with hidetrigger option as true and I can't see the outline of the number field box.
Regards,
Kevin
I'm working on one web application with Neptune theme but IE 8 has some rendering issues with this theme.
I used a number field with hidetrigger option as true and I can't see the outline of the number field box.
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication3.WebForm1" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Requisition Registration Form</title>
<script src="../../resources/js/Share.js" type="text/javascript"></script>
<link href="/resources/css/examples.css" rel="stylesheet" />
<style>
/* Styling of global error indicator */
.form-error-state {
font-size: 11px;
padding-left: 20px;
height: 16px;
line-height: 18px;
background: no-repeat 0 0;
cursor: default;
}
.form-error-state-invalid {
color: #C30;
background-image: url(../../../../icons/exclamation-png/ext.axd);
}
.form-error-state-valid {
color: #090;
background-image: url(../../../../icons/accept-png/ext.axd);
}
/* Error details tooltip */
.errors-tip .error {
font-style: italic;
}
</style>
<script type="text/javascript">
function updateErrorState(form) {
var me = form,
errorCmp, fields, errors;
if (me.hasBeenDirty || me.getForm().isDirty()) { //prevents showing global error when form first loads
errorCmp = me.down('#formErrorState');
fields = me.getForm().getFields();
errors = [];
fields.each(function (field) {
Ext.Array.forEach(field.getErrors(), function (error) {
errors.push({ name: field.getFieldLabel(), error: error });
});
});
setErrors(errorCmp, errors);
me.hasBeenDirty = true;
}
}
function boxLabelClick(e) {
var target = e.getTarget('.terms'),
win;
e.preventDefault();
if (target) {
App.direct.ShowTerms();
}
}
function setErrors(cmp, errors) {
var me = cmp,
baseCls = me.baseCls,
tip = me.tooltips[0];
errors = Ext.Array.from(errors);
// Update CSS class and tooltip content
if (errors.length) {
me.addCls(baseCls + '-invalid');
me.removeCls(baseCls + '-valid');
me.update("Form has errors");
tip.setDisabled(false);
if (!tip.rendered) {
tip.show();
}
tip.update(me.bin[0].apply(errors));
} else {
me.addCls(baseCls + '-valid');
me.removeCls(baseCls + '-invalid');
me.update("Form is valid");
tip.setDisabled(true);
tip.hide();
}
}
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Neptune" DirectMethodNamespace="ProcurementX" />
<form id="form1" runat="server">
<div>
<ext:Window ID="Window1" runat="server" Collapsible="true" Icon="Application" Title="Requisition Registration Window" Layout="FitLayout" Width="500">
<Items>
<ext:FormPanel
ID="FormPanel1"
runat="server"
BodyPadding="10"
BodyBorder="1"
DefaultAnchor="100%">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<FieldDefaults LabelAlign="Left" MsgTarget="None" InvalidCls="" />
<FieldDefaults
LabelWidth="120"
LabelStyle="font-weight:bold;" />
<Listeners>
<FieldValidityChange Fn="updateErrorState" />
<FieldErrorChange Fn="updateErrorState" />
</Listeners>
<Items>
<ext:NumberField
ID="PriceField"
runat="server"
Name="Folder_Nbr"
MsgTarget="Side" EmptyText="Type Folder Number" HideTrigger="true"
AllowBlank="false"
FieldLabel="Folder Number"
/>
<ext:TextField ID="TextField2"
runat="server"
Name="email"
Flex="1"
FieldLabel="Email Address"
AllowBlank="false"
Vtype="email" />
<ext:TextField ID="TextField3"
runat="server"
Name="password1"
FieldLabel="Password"
Flex="1"
InputType="Password"
AllowBlank="false"
MinLength="8" />
<ext:TextField ID="TextField4"
runat="server"
Name="password2"
FieldLabel="Repeat Password"
Flex="1"
InputType="Password"
AllowBlank="false">
<Validator Handler="return (value === this.previousSibling('[name=password1]').getValue()) ? true : 'Passwords do not match.';" />
</ext:TextField>
</Items>
<DockedItems>
<ext:Container ID="Container1"
runat="server"
Dock="Bottom"
PaddingSpec="10 10 5">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Middle" />
</LayoutConfig>
<Items>
<ext:Component ID="Component1"
runat="server"
ItemID="formErrorState"
BaseCls="form-error-state"
Flex="1">
<Bin>
<ext:XTemplate ID="XTemplate1" runat="server">
<Html>
<ul>
<tpl for=".">
<li>
<span class="field-name">{name}</span> : <span class="error">{error}</span>
</li>
</tpl>
</ul>
</Html>
</ext:XTemplate>
</Bin>
<ToolTips>
<ext:ToolTip ID="ToolTip1"
runat="server"
Title="Error Details:"
AutoHide="false"
Anchor="top"
MinWidth="200"
MouseOffset="-11,-2"
Closable="true"
Disabled="true"
ConstrainPosition="false"
Cls="errors-tip" />
</ToolTips>
</ext:Component>
<ext:Button ID="Button1"
runat="server"
FormBind="true"
Disabled="true"
Text="Submit Registration"
Width="140">
<Listeners>
<Click Handler="var form = this.up('form').getForm(); if (form.isValid()) {Ext.Msg.alert('Submitted Values', form.getValues(true));}" />
</Listeners>
</ext:Button>
</Items>
</ext:Container>
</DockedItems>
</ext:FormPanel>
</Items>
</ext:Window>
</div>
</form>
</body>
</html>Regards,
Kevin
Last edited by Baidaly; Sep 30, 2013 at 7:42 PM.
Reason: [CLOSED]
