[CLOSED] TextField reduces its width when losing focus

**RCN** · Dec 29, 2014, 11:20 PM

Daniil, please let me know whether i can do that.

Bbros i need their clearance and i want to aware you that i am not a ext.net official support member .

**Daniil** · Dec 30, 2014, 5:16 AM

Raphael and @bbros, there is no restriction on your collaboration from our side as long as it doesn't involve us.

If you are able to sort the problem out, it would be awesome.

**bbros** · Dec 30, 2014, 7:28 AM

Hi Daniil and Raphael, trying different ways I got another difference.
I do always create controls in code behind, Raphael did write the same code in html design.
Analyzing source page I got differences and a div in my page is rendered after </html>. I'm not good enough to undestand if it is the main reason.

Working example (Raphael):

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
</head>
<body>
    <ext:ResourceManager runat="server" ScriptMode="Debug" />
    <ext:TextField Width="150" LabelWidth="50" Margin="1" runat="server" />
</body>
</html>

and his page source is:

<!DOCTYPE html><html><head id="Head1">
    <link type="text/css" rel="stylesheet" href="/extjs/packages/ext_theme_gray/build/resources/ext-theme-gray-all-debug-embedded-css/ext.axd?v=20312" id="ext-theme" />
    <link type="text/css" rel="stylesheet" href="/extnet/resources/css/extnet-all-debug-embedded-css/ext.axd?v=20312" id="extnet-styles" />
    <script type="text/javascript" src="/extjs/ext-all-debug-js/ext.axd?v=20312"></script>
    <script type="text/javascript" src="/extjs/packages/ext_theme_gray/build/ext-theme-gray-debug-js/ext.axd?v=20312"></script>
    <script type="text/javascript" src="/extnet/extnet-all-debug-js/ext.axd?v=20312"></script>
    <script type="text/javascript" src="/extnet/locale/ext-locale-it-debug-js/ext.axd?v=20312"></script>
<title>

</title>
    <script type="text/javascript">
    //<![CDATA[
        Ext.net.ResourceMgr.init({id:"ctl00",theme:"gray"});Ext.onReady(function(){Ext.create("Ext.form.field.Text",{id:"ctl01",margin:1,renderTo:"App.ctl01_Container",width:150,labelWidth:50});});
    //]]>
    </script>
</head><body>        <div id="App.ctl01_Container"></div>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"2204526a851b43b7a48b77cd347d208f"}
</script>
<script type="text/javascript" src="http://localhost:50689/215b89c0b4bc48ad84d45262479703d4/browserLink" async="async"></script>
<!-- End Browser Link -->

</body></html>

Not working example (mine)

Html part:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TextboxSize.aspx.vb" Inherits="BBros.ExtCookbook.TextboxSize" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>

</body>
</html>

I have this in codebehind:

Public Class TextboxSize
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim rm As New Ext.Net.ResourceManager
        Me.Controls.Add(rm)
        Dim txtUser As New Ext.Net.TextField With {.ID = "UserNameTextbox", .Width = 150, .LabelWidth = 50, .Margin = 1}
        Me.Controls.Add(txtUser)
    End Sub

End Class

and my page source is

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link type="text/css" rel="stylesheet" href="/extjs/packages/ext_theme_gray/build/resources/ext-theme-gray-all-embedded-css/ext.axd?v=20312" id="ext-theme" />
    <link type="text/css" rel="stylesheet" href="/extnet/resources/css/extnet-all-embedded-css/ext.axd?v=20312" id="extnet-styles" />
    <script type="text/javascript" src="/extjs/ext-all-js/ext.axd?v=20312"></script>
    <script type="text/javascript" src="/extjs/packages/ext_theme_gray/build/ext-theme-gray-js/ext.axd?v=20312"></script>
    <script type="text/javascript" src="/extnet/extnet-all-js/ext.axd?v=20312"></script>
    <script type="text/javascript" src="/extnet/locale/ext-locale-it-js/ext.axd?v=20312"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>

</title>
    <script type="text/javascript">
    //<![CDATA[
        Ext.net.ResourceMgr.init({id:"ctl03",theme:"gray"});Ext.onReady(function(){Ext.create("Ext.form.field.Text",{id:"UserNameTextbox",margin:1,renderTo:"App.UserNameTextbox_Container",width:150,labelWidth:50});});
    //]]>
    </script>
</head>
<body>


<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"47be39a861634cea8eb0d43e7ef2b049"}
</script>
<script type="text/javascript" src="http://localhost:50689/215b89c0b4bc48ad84d45262479703d4/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>
<div id="App.UserNameTextbox_Container"></div>

**Daniil** · Dec 30, 2014, 7:38 AM

Well, yes, you are adding the TextField into the Page's Controls. You should put it into a <body> or a <form> (if exists).

For example:

Markup

<body id="Body" runat="server">

Code Behind

Me.Body.Controls.Add(txtUser)

or

Markup

<body runat="server">
    <form runat="server">
        <ext:ResourceManager runat="server" />
    </form>
</body>

Code Behind

Me.Form.Controls.Add(txtUser)

**bbros** · Dec 30, 2014, 8:38 AM

Thanks Daniil, now I have been able to have a source code identical to Raphael's one, EXCEPT for one thing.
Raphael's code addresses css and javascript resources that have "debug" in those paths, in my case this won't happen.

So changing the ResourceManager declaration, using ScriptMode = Debug, I don't have the issue anymore.

 Dim rm As New Ext.Net.ResourceManager With {.ScriptMode = Ext.Net.ScriptMode.Debug}

In my opinion you can mark this post closed.
Are you now able to reproduce this behavior? In the beginning you can't do it, and me neither on Win7 or other computer, so I really don't know what else to check.
Does debug script mode impact in some performance issue?

Tnx

**Daniil** · Dec 30, 2014, 8:56 AM

Generally speaking, there must not be any difference between a minified version of JavaScript files like ext-all.js and non-minified - ext-all-debug.js.

Though, once I faced the issue when the files behaved a bit different for some scenario. I don't remember the details. I would say that there might be a possibility that the JavaScript minifier does something wrong.

Raphael, can you reproduce the issue with ScriptMode="Release"?

**RCN** · Dec 30, 2014, 10:40 AM

I am gonna try to reproduce the issue. Please wait some minutes

**RCN** · Dec 30, 2014, 10:54 AM

Everything works as expected on ScriptMode set to Release.

Bbros, is your browser panning and zooming?

If you agree, i can connect to your pc remotely tomorrow, anytime you want.

**RCN** · Dec 30, 2014, 11:20 AM

I'd like to inform that i also tested with all possible themes and i was not able to reproduce.

**bbros** · Dec 30, 2014, 2:09 PM

No zoom, do you use skype? I sent you an e-mail with my contact for sharing my desktop with you.

Thread: [CLOSED] TextField reduces its width when losing focus

Thread Tools

Search Thread

Display

Similar Threads

[CLOSED] TextField - Change Style on Focus

TextField Width property includes Label Width now?

[CLOSED] Textfield losing focus when button is enabled

[FIXED] Editable GridPanel textfield editor width does not fit column width

Focus on Textfield

Posting Permissions

Sitemap

Downloads

Resources