PDA

View Full Version : [FIXED] Tab had a little icon when open on FF



Tom
Mar 13, 2008, 12:02 PM
Hi !

I've a bug with the conrol cool:Window and UpdatePanel.

As you can see, my code is very simple : i try to refresh the content of a cool:window.


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<%@ Register Assembly="Coolite.Web.UI" Namespace="Coolite.Web.UI" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<ext:ScriptContainer ID="ScriptContainer1" runat="server" />
<title>Test</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" LoadScriptsBeforeUI="true" runat="server" />
<ext:ScriptManager ID="ExtScriptManager" runat="server" />


<ext:Window ID="wdn_nice"
Title="Test Window"
Width="400"
AutoHeight="true"
Shim="false"
BodyStyle="padding:10px;"
AutoShow="true"
Collapsible="true"
Resizable="false"
IconCls="icon-grid"
runat="server">
<Content>
<asp:UpdatePanel ID="uppanel" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Label ID="lbl_debug" Text="" runat="server" />
<asp:Button ID="btn_test" Text="Click Me" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</Content>
</ext:Window>
</form>
</body>
</html>



public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
lbl_debug.Text = "LABEL INIT";
}

protected override void OnInit(EventArgs e)
{
btn_test.Click += new EventHandler(btn_test_Click);
base.OnInit(e);
}

void btn_test_Click(object sender, EventArgs e)
{
lbl_debug.Text = "YOU WIN";
}
}

This simple code doesn't run in IE (seems to run in FF) : there is a null exception ( Ext.EventObject is null )

With Fiddler, i can see that the file ext-base.js (and only this file) is in the response from the asyncpostback.

Any help ?

Edit : Firebug Infos


WebRessource .axd line 161

<div class="errorTitle">Ext.EventObject has no properties
<div class="errorTrace"><div class="objectBox objectBox-stackFrame"><a class="objectLink">h</a>(<a class="objectLink objectLink-object">mousemove clientX=0, clientY=0</a>)WebResource.axd (line 161)
<div class="objectBox objectBox-stackFrame"><a class="objectLink">wrappedFn</a>(<a class="objectLink objectLink-object">mousemove clientX=0, clientY=0</a>)WebResource.axd (line 60)

<div class="errorSourceBox errorSource-exec">chrome://firebug/content/blank.gifvar h=function(e){e=Ext.EventObject.setEvent(e);var t;if(o.delegate){t=e.getTarg...

geoffrey.mcgill
Mar 13, 2008, 4:02 PM
Hi Tom,

I'm looking into this right now. I should have an update for you shortly.

Tom
Mar 14, 2008, 6:15 AM
Thanks :)

geoffrey.mcgill
Mar 14, 2008, 4:41 PM
Hi Tom,

At first I did not think nesting an UpdatePanel inside a Window control would work, but much to my surprise using the latest code everything appears to work great in both FF and IE 7/8.

What version of IE are you using?

Are you using the 0.4.0 release of the controls?

We should be releasing 0.4.1 later today, so that might help solve the problem.

Here's the sample I was testing with...


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

<%@ Register Assembly="Coolite.Web.UI" Namespace="Coolite.Web.UI" TagPrefix="cool" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<script runat="server">

protected override void OnInit(EventArgs e)
{
this.btnwindow.Click += new EventHandler(btnWindow_Click); base.OnInit(e);
}

protected void btnTab_Click(object sender, EventArgs e)
{
this.lblTab.Text = DateTime.Now.ToLongTimeString();
}

protected void btnWindow_Click(object sender, EventArgs e)
{
this.lblwindow.Text = DateTime.Now.ToLongTimeString();
}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>ASP.NET AJAX UpdatePanel with TabPanel and Window</title>
</head>
<body>
<form id="form1" runat="server">
<cool:ScriptManager ID="ExtScriptManager" runat="server" Hide="True" />
<asp:ScriptManager ID="ScriptManager2" LoadScriptsBeforeUI="true" runat="server" />


<h1>ASP.NET AJAX UpdatePanel with TabPanel and Window</h1>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>

<br />
<br />
<asp:Button ID="btnTab" Text="Click Me" runat="server" &#111;nclick="btnTab_Click" />
<br />
<br />

<cool:TabPanel
ID="TabPanel1"
runat="server"
ActiveTab="0"
Height="300px"
BodyStyle="padding:6px;">
<Items>
<cool:Tab ID="Tab1" runat="server" Title="Tab1">
<Content>
<asp:Label ID="lblTab" runat="server" Text="[Click Button above]" />
</Content>
</cool:Tab>
<cool:Tab ID="Tab2" runat="server" Title="Tab2">
<Content>
This is Tab2
</Content>
</cool:Tab>
</Items>
</cool:TabPanel>

</ContentTemplate>
</asp:UpdatePanel>

<cool:Window
ID="Window1"
Title="Test Window"
Width="300px"
BodyStyle="padding:6px;"
AutoShow="true"
Collapsible="true"
IconCls="icon-application"
runat="server"
Height="175px">
<Content>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Button ID="btnWindow" Text="Click Me" runat="server" />
<asp:Label ID="lblWindow" runat="server" Text="[Click Button]" />
</ContentTemplate>
</asp:UpdatePanel>
</Content>
</cool:Window>


</form>
</body>
</html>

geoffrey.mcgill
Mar 14, 2008, 10:57 PM
Hi Tom,

I added my sample above to our new Sandbox test site. See http://sandbox.ext.net/UpdatePanel-with-TabPanel-and-window.aspx

Tom
Mar 17, 2008, 6:20 AM
Hi Geoffrey,

I use FF 2.0.0.12, IE 6.0.29, and Coolite 0.4.0.6564

In fact, there is a conflit bug with the Coollite Script Manager and the Update Panel. I will try your example now.
Thanks

Tom
Mar 17, 2008, 6:28 AM
Ok, i've got the same error with your example :(
I will wait your release 0.41 and re-test

Edit : Are you using .NET 3.5 or .NET 2 ? (Personnally : .NET 2)

geoffrey.mcgill
Mar 17, 2008, 5:07 PM
Hi Tom,

If you view our sandbox sample online, is the javascript error thrown?

http://sandbox.ext.net/UpdatePanel-with-TabPanel-and-window.aspx

Tom
Mar 18, 2008, 6:14 AM
Hi Geoffrey

It's work fine with your online sample (FF / IE), i've no errors.

Tom
Mar 20, 2008, 11:59 AM
Working perfect with coolite v0.4.1 :)
Thanks :)

ljcorreia
Apr 24, 2008, 1:39 PM
Hey guys,

I started this week to test the Coolite Controls.
Excellent Job ! Very Good !

I was chating with Vladimir and he referred me this controls.

I tried my best do not send any query without read the threads here on this forum. I did not find any documentation, so sorry if I am missing something !

I am experiencing the same problem "Ext.EventObject has no properties" in IE7 or FF2.0. My environment is Coolite version 0.4.1, Visual Studio 2008 framework 2.0.

The error message is basically like the one pointed on this thread with the Firebug Infos:

Ext.EventObject has no properties

[Break on this error] var h=function(e){e=Ext.EventObject.setEvent(e);var t;if(o.delegate){t=e.getTarg...
WebResource.axd (line 161)

So I tried the same steps testing http://sandbox.ext.net/UpdatePanel-with-TabPanel-and-window.aspx
I created a different project AJAX Web App with the same code and everything works fine !
Then I tried to place the same page on my old project (the one that is not working) and the same problem happens.

One thing I noticed is that on that project I am getting error. The coolite controls does't work if I do not put the property CleanResourceUrl="false" on the ScriptManager. When I remove this property it gives me an error: 'Ext' is undefined (Line 15).
I could not understand exactly what the CleanResourceUrl does, but this is the only difference I could find between those projects.

Any clue? Can you help me please.

Thank you in advance.

Leonardo.

ljcorreia
Apr 24, 2008, 4:30 PM
Hi,

Just some complementary informations. I suspect the problem can be something related to IIS7.
The difference between the test I've done (same http://sandbox.ext.net/UpdatePanel-with-TabPanel-and-window.aspx) is that it was running on Cassini. As soon as I switch to IIS the error happened. Both error exactly as I mentioned before.

The problem is that I must run that project on IIS.

I am using Vista Business !

I tried give permissions on Handler Mappings to Read, Script and Execute. On the Handler Mappings I got WebResource.axd and ScriptResource.axd ENABLED without any restrictions beyond all other handdlers installed.

Any help would be really appreciated.

Leonardo. <a id="ext-gen152" href="http://sandbox.ext.net/UpdatePanel-with-TabPanel-and-window.aspx">
</a>

geoffrey.mcgill
Apr 24, 2008, 5:12 PM
Hi Leonardo,

I need you to test a couple things for me. Try setting the "Gzip" and "CleanResourceUrl" properties to "false" on the ScriptManager.

Example


<cool:ScriptManager ID="ScriptManager1" runat="server" Gzip="false" CleanResourceUrl="false" />


Does the JavaScript error still get thrown?

ljcorreia
Apr 24, 2008, 5:30 PM
Hi Geoffrey.mcgill

Thank you very much for your answer. I am here desperate trying to make it work !

When I set CleanResourceUrl="false" AND gzip="false" or just CleanResourceUrl="false" the first error does not happens.
I meant, at least the site opens without 'Ext' is undefined at first glance.

But when I try to use the site, let say, clicking the button to postback, it shows the second error I mentioned:

Ext.EventObject has no properties

[Break on this error] var h=function(e){e=Ext.EventObject.setEvent(e);var t;if(o.delegate){t=e.getTarg...
WebResource.axd (line 161)

Then it hide all Coolite controls from screen.

Apprecite your help.

Leonardo

geoffrey.mcgill
Apr 25, 2008, 4:57 PM
Hi Leonardo,

I'm getting an error with that sample now as well. Only in IE. I'm investigating to try and figure out what exactly is going wrong. Some kind of conflict with the UpdatePanel.

ljcorreia
Apr 28, 2008, 12:56 PM
Hi Geoffrey McGill,

Thanks for your answer. My feeling is that you guys are doing an excellent job and I'll do recommend it to my company to buy a commercial version with support included as soon it will be available.


My concern was if it would work with AjaxToolkit, as well as GridViews, DetailsViews, etc.
All seems to works fine with your controls ! So far so good ! Well done !

I managed to solve the problem by change some configuration on IIS7 as well as setting the ResourcePath to a different folder. I've changed so amny things trying to get it working that I am not sure what was the exactly action that solved the problem.
One thing I can tell you is that the ClearResource has to be true in order to work all properly.

But you are right. I can still see some problems with the Window control on IE. In some scenarios when I tried to drag/collapse/close the screen it simply does not re-render the screen and seems to lose all control of it. I am sending a screenshot that better explain what I am trying to say.
I could not managed to get a sample as your page that shows this problem, but if I can I'll send to you in order to help you track the problem.

Other thing I miss a lot is a documentation like ExtJs. I wish to learn more how to do things on the client, like hide a coolPanel as well as learn how to work with coolScripManager to do ajax callback without use AjaxToolkit update panels.
Is there any site where I can get such documentation/how-to ?


Thank you


Leonardo.

geoffrey.mcgill
Apr 28, 2008, 4:48 PM
Hi Leonardo,

I apologize for the delay in responding to you.

Thank you very much for reporting that the CleanResourceUrl property is not working under IIS7. This is very good to know. I will do some more testing to try and figure out exactly why. Would you be willing to test if we make some updates? If yes, just email me (geoff [at] coolite [dot] com). This is a critical feature we want to support, so this bug will be a priority to fix.

The Window positioning issues sound related to the following post, see http://forums.ext.net/showthread.php?threadid=290-5-1.aspx. The bug was fixed and I think that should solve the problem you are experiencing as well.

We have a documentation project being included with the 0.5. The docs will include all the ExtJS documentation and we're doing out best to fill out the .NET specific details, although for the initial release, they will be a little thin on details.

ljcorreia
Apr 29, 2008, 7:12 AM
Hi Geoffrey McGill

Thanks for your answer. Don't need to apologize. The delay responding is fine as well as your effort to solve the issues.
I known that you guys are very busy working hard to deliver the next release that we are expecting, so, don't worry!

I am willing to test everything indeed. Also, I'll do my best to document all errors and report bugs with the maximum details in order to help you solve any issues. I'll drop you an e-mail.

Regarding to the window positioning problem, I don't thing we are experiencing the same problem, but let me test it a little bit more then we can investigate further.

Let me just ask you one question regarding to Tab Control. Is that a way to set its height value in percentage (%) instead of pixels?

Best regards,

Leonardo.

Vladimir
Apr 29, 2008, 9:30 AM
Hi Leonardo,

About TabPanel height in percents...
Try this code (I didn't test it but may be it correct. If not I will try to test later)



<head runat="server">
<ext:ScriptContainer ID="ScriptContainer1" runat="server" />
<script type="text/javascript">
Ext.onReady(function(){
var _tabs = <%=MyTab.ClientID %>; // Get ClientID of our tab
var percentHeight = 0.5; //we want 50% height
var tabContainer = _tabs.getEl().parent(); //Get container div (tabpanel rendered to own container div, we can't see this container in designer markup because it autogenerate)
var parent = tabContainer.parent(); //Get true container (this container we can see in designer markup)
var height = parent.getComputedHeight() * percentHeight; //calculate 50% in pixels

tabContainer.setHeight(height); //set height for autogenarate conatiner div
_tabs.setHeight(height); //set height for TabPanel
});<BR id=ext-gen27> </script>
</head></PRE>

ljcorreia
Apr 30, 2008, 8:12 AM
Hi Vladsch,

Thanks for your answer. I could not managed to get the script working. Sorry if it is my lack of knowledge.
The line which is supposed to get the ClientID uses server tags that just works here if I put
<%#TabPanel2.ClientID %>
But even if I use the Firebug and inspect the element to get its id, there is something missing because it wil say that _tabs.getEl is not a function (Line 17), of course.
I tried to get the element with &#100;ocument.getElementById, but it always returns null. I don't known why the tab div element appear as it were disabled on Firebug.

I appreciate if you could test the code and let me tell me what I am doing wrong.

Can I use the same method to get the width?

Thanks.

Vladimir
Apr 30, 2008, 2:56 PM
If you use <%# %> syntax then you must call DataBind function.
<BR<%#TabPanel2.ClientID %> in Page header
DId you call Page.Header.DataBind()?

ljcorreia
May 01, 2008, 8:11 AM
Hi Vladsch,

No, I did not call Page.Header.DataBind(). In fact, to be honest I just used <%# ... %>, because trying to use <%= ... %> it was throwing an exception saying that I could not use '<%' at this context. The exactly message: (The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

You bet, using <%# ... %> and then binding the header the ID of the Tab is rendered correctly. Anyway, but this is not the problem. I must be missing some very basic concepts about ExtJs (Sorry I am completely beginner in ExtJs).

What I was trying to say is that the tests I have done, even hard-coding the client name of the TabControl, it will never get its public methods.

I've done my best to understand (looking at http://extjs.com/deploy/dev/docs/?class=Ext.TabPanel) before drop here silly questions, but honestly, I could not understand how it works. Where the public methods like .getEl() came from?

The TabPanel is rendered to the client as a simple DIV.
I tried to use Ext.getCmp() or &#100;ocument.getElementbyId() to get this div element, but it always came as null or undefined, but I can see it on Firebug.

Sorry about my lack of knowledge. I honestly appreciate your patience, help and explanations.

Leonardo.

ljcorreia
May 22, 2008, 1:47 PM
Hi Coolite team,

It has been a while since my last message about setting tab in percent.
I am still wondering if it is possible!?
Same question: How to set Tab Panel Control height and width in percent.

Appreciate your help.

Thanks.

Vladimir
May 22, 2008, 5:11 PM
Hi Leonardo,

I apologize for the delay in responding to you.

I wrote small sample. Please let me know if have questions

ljcorreia
May 23, 2008, 1:50 PM
Hi Vladsch

Thank you very much. The solution works with charm.

Well done.
Looking forward to see the new Coolite version. Still any idea when it will be released?

Thanks.