[CLOSED] Set a ComponentColumns Textfield ReadOnly = false / Java Script

  1. #1

    [CLOSED] Set a ComponentColumns Textfield ReadOnly = false / Java Script

    Hi all

    I have the following Grid Definition

    
                <ext:FieldSet ID="PreviousDocumentsFieldSet" runat="server" Title="PreviousDocuments" Collapsible="true" Collapsed="false">
                  <Items>
                    <ext:GridPanel runat="server" ID="gridPreviousDocuments" AutoScroll="true" Height="100px">
                      <Store>
                        <ext:Store ID="storePreviousDocuments" runat="server">
                          <Model>
                            <ext:Model ID="modelPreviousDocuments" runat="server">
                              <Fields>
                                <ext:ModelField Name="Id" />
                                <ext:ModelField Name="NewId" />
                                <ext:ModelField Name="PreviousDocumentTypeFull" />
                                <ext:ModelField Name="PreviousDocumentReference" />
                                <ext:ModelField Name="AdditionalInformation" />
                              </Fields>
                            </ext:Model>
                          </Model>
                        </ext:Store>
                      </Store>
                      <ColumnModel runat="server">
                        <Columns>
                          <ext:Column ID="colPreviousDocumentTypeId" runat="server" Cls="" Text="Id" Hidden="true" DataIndex="Id" />
                          <ext:Column ID="colPreviousDocumentTypeNewId" runat="server" Cls="" Text="NewId" Hidden="true" DataIndex="NewId" />
                        
                          <ext:ComponentColumn ID="colPreviousDocumentTypeFull" runat="server" Editor="true" DataIndex="PreviousDocumentTypeFull" Text="DocumentType">
                            <Component>
                              <codeBox:CodeComboBox runat="server" ID="cboDocumentType" />
                            </Component>
                          </ext:ComponentColumn>
    
                          <ext:ComponentColumn ID="colPreviousDocumentReference" runat="server" Text="DocumentReference" DataIndex="PreviousDocumentReference">
                            <Component>
                              <ext:TextField ID="txtPreviousDocumentReference" runat="server" ReadOnly="True" />
                            </Component>
                          </ext:ComponentColumn>
                          
                          <ext:Column ID="colAdditionalInformation" runat="server" Text="AdditionalInfo" DataIndex="AdditionalInformation" Flex="1" />
                        </Columns>
                      </ColumnModel>
                    </ext:GridPanel>
                  </Items>
                  <Listeners>
                    <BoxReady Handler="collapseFieldset('PreviousDocumentsFieldSet')" />
                    <Expand Handler="refreshGrid('gridPreviousDocuments')" Single="true" Delay="100" />
                  </Listeners>
                </ext:FieldSet>
    Now I need to set the Field 'txtPreviousDocumentReference' to ReadOnyl 'false'. I have to do this in Javascript...
    It's Friday and I got no Idea how to do that :-(

    Peter
    Last edited by Daniil; Oct 25, 2013 at 2:09 PM. Reason: [CLOSED]
  2. #2
    The following approach uses MessageBus to accomplish it. For more information: http://examples2.ext.net/#/MessageBus/Basic/Simple/
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:Button Text="Set ReadOnly = False" runat="server">
            <Listeners>
                <Click Handler="Ext.net.Bus.publish('DisableTxtPreviousDocumentReference');" />
            </Listeners>
        </ext:Button>
        <ext:GridPanel runat="server" Title="Records" Frame="false" Width="500" Height="500">
            <Store>
                <ext:Store ID="_str" runat="server">
                    <Proxy>
                        <ext:AjaxProxy Url="/Example/LoadFakeRecords/">
                            <ActionMethods Read="POST" />
                            <Reader>
                                <ext:JsonReader Root="data" />
                            </Reader>
                        </ext:AjaxProxy>
                    </Proxy>
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="ID" Type="String" />
                                <ext:ModelField Name="Name" Type="String" />
                                <ext:ModelField Name="Address" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Text="ID" DataIndex="ID" runat="server" />
                    <ext:Column Text="Name" DataIndex="Name" runat="server" />
                    <ext:Column Text="Address" DataIndex="Address" runat="server" />
                    <ext:ComponentColumn ID="colPreviousDocumentReference" runat="server" Text="DocumentReference"
                        DataIndex="PreviousDocumentReference">
                        <Component>
                            <ext:TextField ID="txtPreviousDocumentReference" runat="server" ReadOnly="True">
                                <MessageBusListeners>
                                    <ext:MessageBusListener Name="DisableTxtPreviousDocumentReference" Handler="this.setReadOnly(false);" />
                                </MessageBusListeners>
                            </ext:TextField>
                        </Component>
                    </ext:ComponentColumn>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </body>
    </html>
    namespace SandBox.Controllers
    {
        public class ExampleController : System.Web.Mvc.Controller
        {
            public ActionResult Index()
            {
                return View();
            }
            
            public StoreResult LoadFakeRecords()
            {
                List<Person> lst = new List<Person>();
    
                for (int index = 0; index < 15; index++)
                {
                    lst.Add(new Person
                    {
                        ID = index,
                        Name = "Name" + index,
                        Address = "Address" + index,
                    });
                }
    
                return new StoreResult(lst, lst.Count());
            }
        }
    
        public class Person
        {
            public int ID { get; set; }
    
            public string Name { get; set; }
    
            public string Address { get; set; }
        }
    }
  3. #3
    Plese let me know whether the approach presented above helps you
  4. #4
    Hi Raphael,

    I am afraid the read-only change will be lost after a subsequent grid refresh (for example, after sorting), because all the TextFields will be re-rendered.

    To configure a ComponentColumn's Component, the BeforeBind and Bind events should be used.

    Something like this:
    <ext:ComponentColumn ID="ComponentColumn1" runat="server">
        <Component>
            <ext:TextField runat="server" />
        </Component>
        <CustomConfig>
            <ext:ConfigItem Name="readOnly" Value="true" Mode="Raw" />
        </CustomConfig>
        <Listeners>
            <BeforeBind Handler="e.config[0].readOnly = this.readOnly;" />
        </Listeners>
    </ext:ComponentColumn>
    App.ComponentColumn1.readOnly = false;
    App.GridPanel1.getView().refresh();
    App.ComponentColumn1.readOnly = true;
    App.GridPanel1.getView().refresh();
  5. #5
    I aggree with you Daniil
  6. #6
    Good Evening

    Daniil, I use your approach - works perfect !

    RCN, thanks for the input too :-)

    Peter
  7. #7
    You're welcome. Sorry for not cover the scenario as a whole.

Similar Threads

  1. [CLOSED] java script error
    By elke.schreiber in forum 2.x Legacy Premium Help
    Replies: 11
    Last Post: May 13, 2013, 2:19 PM
  2. Replies: 0
    Last Post: Jun 15, 2012, 11:49 AM
  3. change HyperLink NavigateUrl by Java Script
    By BLOZZY in forum 1.x Help
    Replies: 2
    Last Post: Aug 09, 2011, 11:32 AM
  4. [CLOSED] [1.0] Java Script broken under IE
    By tdracz in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 06, 2010, 4:46 PM
  5. call java script methos on Textarea
    By Sameera in forum 1.x Help
    Replies: 2
    Last Post: Sep 18, 2009, 9:24 AM

Posting Permissions