PDA

View Full Version : [CLOSED] Nepture Theme rendering issue on IE8 Browser



kevinhwang
Sep 25, 2013, 8:15 PM
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.



<%@ 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>


69366937

Regards,

Kevin

Daniil
Sep 26, 2013, 9:00 AM
Hi Kevin,

I cannot reproduce, I see the right border.

I am testing with Ext.NET from SVN trunk. What version are you testing with?

kevinhwang
Sep 26, 2013, 1:24 PM
Hi Daniil,


<?xml version="1.0" encoding="utf-8"?>
<packages>
<package id="Ext.NET" version="2.2.0.1" targetFramework="net40" />
<package id="Ext.NET.Utilities" version="2.2.1" targetFramework="net40" />
<package id="Newtonsoft.Json" version="4.5.11" targetFramework="net40" />
<package id="Transformer.NET" version="2.1.1" targetFramework="net40" />
</packages>

This is version configuration on my project and I attached the IE version as well.

6944

Regards,

Kevin


Hi Kevin,

I cannot reproduce, I see the right border.

I am testing with Ext.NET from SVN trunk. What version are you testing with?

Daniil
Sep 26, 2013, 2:34 PM
Yes, I got it reproducible with the v2.2 release. It was fixed.

If it is not an option to update, please try this fix.

Fix

<style>
.x-theme-neptune .x-ie8 .x-form-trigger-wrap input.x-form-text {
border-right-width: 1px !important;
}
</style>

kevinhwang
Sep 26, 2013, 3:06 PM
Thanks Daniil,

I can see number field works fine but trigger on search box inside gridpanel doesn't work.

6948

Regards,

Kevin



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Infinite Scrolling with remote filtering - Ext.NET Examples</title>

<link href="/resources/css/examples.css" rel="stylesheet" />

<script>
var renderTopic = function(value, p, record) {
return Ext.String.format(
'<a href="http://sencha.com/forum/showthread.php?p={1}" target="_blank">{0}</a>',
value,
record.getId()
);
};

var searchFieldTriggerClick = function (field, trigger, index) {
var me = field,
store = me.up("grid").getStore(),
value = me.getValue();

if(index == 0){
me.setValue('');
store.clearFilter();
trigger.hide();
}
else{
if (value.length > 0) {
// Param name is ignored here since we use custom encoding in the proxy.
// id is used by the Store to replace any previous filter
store.filter({
id: store.proxy.filterParam,
property: store.proxy.filterParam,
value: value
});
me.getTrigger(0).show();
}
}
};

var onSpecialKey = function (field, e) {
if (e.getKey() === e.ENTER) {
searchFieldTriggerClick(field, null, 1);
e.stopEvent();
}
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" Theme="Neptune" />

<h1>Infinite Scrolling with remote filtering</h1>
<p>Ext.NET 2's brand new grid supports infinite scrolling, which enables you to load any number of records into a grid without paging.</p>
<p>The new grid uses a virtualized scrolling system to handle potentially infinite data sets without any impact on client side performance.</p>
<p>A filtering UI is included which applies a remote filter and reloads the grid beginning at page one.</p>

<ext:GridPanel
ID="GridPanel1"
runat="server"
Width="700"
Height="500"
Collapsible="true"
Title="Sencha.com - Browse Forums">
<Store>
<ext:Store
runat="server"
Buffered="true"
RemoteFilter="true"
LeadingBufferZone="1000"
PageSize="50">
<Proxy>
<ext:JsonPProxy
Url="http://www.sencha.com/forum/topics-remote.php"
SimpleSortMode="true"
FilterParam="query">
<Reader>
<ext:JsonReader Root="topics" TotalProperty="totalCount" />
</Reader>
<CustomConfig>
<ext:ConfigItem
Name="encodeFilters"
Value="function (filters) { return filters[0].value; }"
Mode="Raw" />
</CustomConfig>
</ext:JsonPProxy>
</Proxy>
<Model>
<ext:Model runat="server" IDProperty="post_id">
<Fields>
<ext:ModelField Name="title" Mapping="topic_title" />
<ext:ModelField Name="forumtitle" Mapping="forum_title" />
<ext:ModelField Name="forumid" Type="Int" />
<ext:ModelField Name="username" Mapping="author" />
<ext:ModelField Name="replycount" Mapping="reply_count" Type="Int" />
<ext:ModelField Name="lastpost" Mapping="post_time" Type="Date" DateFormat="timestamp" />
<ext:ModelField Name="lastposter" />
<ext:ModelField Name="excerpt" />
<ext:ModelField Name="topic_id" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<TotalCountChange Handler="#{GridPanel1}.down('#status').update({ count: this.getTotalCount() });" />
</Listeners>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:RowNumbererColumn runat="server" Width="50" />
<ext:Column
runat="server"
Text="Topic"
DataIndex="title"
Flex="1">
<Renderer Fn="renderTopic" />
</ext:Column>
<ext:Column
runat="server"
Text="Author"
DataIndex="username"
Hidden="true"
Sortable="false" />
<ext:Column
runat="server"
Text="Replies"
DataIndex="replycount"
Width="70"
Align="Center"
Sortable="false" />
<ext:Column
runat="server"
Text="Last Post"
DataIndex="lastpost"
Width="130"
Sortable="false">
<Renderer Format="Date" FormatArgs="'n/j/Y g:i A'" />
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server" TrackOver="false" EmptyText="<h1 style='margin:20px;'>No matching results</h1>" />
</View>
<SelectionModel>
<ext:RowSelectionModel runat="server" PruneRemoved="false" Mode="Multi" />
</SelectionModel>
<DockedItems>
<ext:Toolbar runat="server" Dock="Top">
<Items>
<ext:TriggerField
runat="server"
Width="400"
FieldLabel="Search"
LabelWidth="50">
<Triggers>
<ext:FieldTrigger Icon="Clear" HideTrigger="true" />
<ext:FieldTrigger Icon="Search" />
</Triggers>
<Listeners>
<TriggerClick Fn="searchFieldTriggerClick" />
<SpecialKey Fn="onSpecialKey" />
</Listeners>
</ext:TriggerField>

<ext:ToolbarFill />

<ext:Component
runat="server"
ItemID="status"
StyleSpec="margin-right:5px;">
<Tpl>
<Html>
Matching threads: {count}
</Html>
</Tpl>
</ext:Component>
</Items>
</ext:Toolbar>
</DockedItems>
</ext:GridPanel>
</form>
</body>
</html>



Yes, I got it reproducible with the v2.2 release. It was fixed.

If it is not an option to update, please try this fix.

Fix

<style>
.x-theme-neptune .x-ie8 .x-form-trigger-wrap input.x-form-text {
border-right-width: 1px !important;
}
</style>

Daniil
Sep 27, 2013, 7:25 AM
Here is a simplified sample for both the cases. I will investigate further.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Trigger border issue</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" Theme="Neptune" />

<ext:Window runat="server" Layout="FitLayout" Width="200">
<Items>
<ext:FormPanel runat="server" BodyPadding="10">
<Items>
<ext:NumberField ID="NumberField1" runat="server" HideTrigger="true" />

<ext:TriggerField ID="TriggerField1" runat="server">
<Triggers>
<ext:FieldTrigger Icon="Clear" />
<ext:FieldTrigger Icon="Search" />
</Triggers>
<Listeners>
<TriggerClick Handler="trigger.hide();" />
</Listeners>
</ext:TriggerField>
</Items>
</ext:FormPanel>
</Items>
</ext:Window>
</form>
</body>
</html>


Please note that both the issues are not reproducible with the SVN trunk.

Daniil
Sep 30, 2013, 5:36 AM
Please use this fix

.x-form-trigger-wrap {
border-collapse: separate;
}
and remove the previous one.

kevinhwang
Sep 30, 2013, 5:22 PM
Thanks Daniil,

It works fine!!


Please use this fix

.x-form-trigger-wrap {
border-collapse: separate;
}
and remove the previous one.