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

  1. #1

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

    Hi

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

    public class MyTextField : Ext.Net.TextField
    I am setting the ext.net ?ReadOnly? property in javascript like below?
    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?
    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?
  2. #2
    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
    input.x-read-only{
          border:0px !important;
          background: transparent;
    }
    Javascript
    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#
    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
    <head runat="server">
            <title></title>
            <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles"/>
            
           <script type="text/javascript">
                   // here is the code
          </script> 
    </head>
    Vladimir Shcheglov
    Sr. Developer
  3. #3
    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
    Attached Thumbnails Error_Code_Snapshot.jpg   Error_Screen1.png  
  4. #4
    Please provide your code which demonstrates how you extend control (server side class, client side class and example)
    Vladimir Shcheglov
    Sr. Developer
  5. #5
    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
    Vladimir Shcheglov
    Sr. Developer
  6. #6
    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.pngClick image for larger version. 

Name:	AssemblyStructure.png 
Views:	61 
Size:	8.1 KB 
ID:	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.
    NxtTextField.js.txtAssemblyInfo.cs.txtNxtTextField.cs.txt
  7. #7
    Hi,
    You have to use 'ClientScriptItem' instead 'ClientStyleItem'
    Vladimir Shcheglov
    Sr. Developer
  8. #8
    Hi Vladimir

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

Similar Threads

  1. [CLOSED] Need for a composite control extending Ext.NET
    By Aparna_B in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 10, 2011, 5:38 PM
  2. [CLOSED] Creating custom control
    By jchau in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 29, 2010, 6:03 PM
  3. Extending Ext.Net.TextField Control
    By David Pelaez in forum 1.x Help
    Replies: 1
    Last Post: Dec 22, 2010, 10:43 AM
  4. [CLOSED] Error creating control
    By flaviodamaia in forum 1.x Help
    Replies: 5
    Last Post: Mar 20, 2009, 8:32 AM
  5. ERROR CREATING CONTROL in VS2005 sp2
    By magoo in forum Bugs
    Replies: 0
    Last Post: Mar 20, 2009, 8:14 AM

Posting Permissions