[CLOSED] Creating a control by extending the ext:TextField control

Printable View

Sep 06, 2011, 7:23 AM
Shanth

[CLOSED] Creating a control by extending the ext:TextField control

Hi

I have created a control by extending the ext:TextField control like below?

Code:

public class MyTextField : Ext.Net.TextField

I am setting the ext.net ?ReadOnly? property in javascript like below?

Code:

txtCompanyName.setReadOnly(true);

I want to change the visual appearance of the control based on the ReadOnly property value (I don?t want the default behavior of the ext:TextField and compulsorily want to create my custom control). I am trying to do that in the PreRender function like below?

Code:

protected override void OnPreRender(EventArgs e) { if (ReadOnly == true) { base.StyleSpec = "border-top: 0px; border-left: 0px; border-right:0px; background: transparent;"; base.AllowBlank = true; base.EmptyText = ""; } base.MsgTarget = MessageTarget.Side; base.OnPreRender(e); }

I see that the ReadOnly property is always false in PreRender and hence the code doesn?t get into the conditional block. Why doesn?t the change to the property in javascript get reflected during PreRender. What am I missing? Is there an alternate way of achieving the requirement of changing control appearance of the derived control?
Sep 06, 2011, 7:52 AM
Vladimir

Javascript changes are not reflected to server side at all.
Indeed PreRender server side event is executed before any javascript code execution (first, page are rendered on the server side, generated html is sent to the browser, browser build DOM and execute javascript code)

You have to create javascript class for your new custom control

(code is not tested)

CSS rule

Code:

input.x-read-only{ border:0px !important; background: transparent; }

Javascript

Code:

Ext.form.MyTextField = Ext.extend(Ext.form.TextField, { setReadOnly : function(readOnly){ Ext.form.MyTextField.superclass.setReadOnly.apply(this, arguments); this.el[readOnly ? "addClass" : "removeClass"]('x-read-only'); } }); Ext.reg('mytextfield', Ext.form.MyTextField);

C#

Code:

public partial class MyTextField : TextField { public override string XType { get { return "mytextfield"; } } public override string InstanceOf { get { return "Ext.form.MyTextField"; } } }

Please ensure that javascript code (with your custom class) is added to page

Code:

<head runat="server"> <title></title> <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles"/> <script type="text/javascript"> // here is the code </script> </head>
Sep 08, 2011, 4:01 PM
Shanth

2 Attachment(s)

Hi Vladimir

We tried as per your suggestion and also tried extending the control in Javascript as mentioned in the link below.

http://forums.ext.net/showthread.php...NET-components

However, we got the error (attached: Error_Screen1.png, ) while loading the screen. The detail of which is also attached.
I was not able to attach the error text file.

Could you please provide a concise working example which we can customize to our needs? Looking forward to your reply.

Regards,
Shanth
Sep 08, 2011, 4:15 PM
Vladimir

Please provide your code which demonstrates how you extend control (server side class, client side class and example)
Sep 08, 2011, 4:16 PM
Vladimir

Quote:

Could you please provide a concise working example which we can customize to our needs?

Any Ext.Net widget is example how to extend control
Sep 09, 2011, 2:38 PM
Shanth

4 Attachment(s)

Hi,

The extending of TextField worked when the Ext.reg() is placed in the ASPX file. However, our requirement is to push the Javascript code as file into the same assembly where the control file resides.

After following some of the EXT forums, we have added Resource Property in the class (in NxtTextField.cs.txt attached) and created a folder extjs and added the Javascript file as Embedded Resource (NxtTextField.js.txt attached. Appended .txt to upload in the forum). Further, we have added as WebResource in AssemblyInfo.cs (AssemblyInfo.cs.txt attached). The assembly file structure is also attached (AssemblyStructure.pngAttachment 3156

Unfortunately, we are getting the same error as Object Expected. Is there anything we are missing or we need to do something more ? We also tried registering in Code Behind. Nothing worked.
Attachment 3153 Attachment 3154 Attachment 3155
Sep 09, 2011, 2:50 PM
Vladimir

Hi,
You have to use 'ClientScriptItem' instead 'ClientStyleItem'
Sep 12, 2011, 2:58 PM
Shanth

Hi Vladimir

Thank you for your support, it worked. you can close the thread