PDA

View Full Version : [CLOSED] Set a ComponentColumns Textfield ReadOnly = false / Java Script



Peter.Treier
Oct 25, 2013, 1:01 PM
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

RCN
Oct 25, 2013, 1:11 PM
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('DisableTxtPreviousDocumentRef erence');" />
</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; }
}
}

RCN
Oct 25, 2013, 1:22 PM
Plese let me know whether the approach presented above helps you

Daniil
Oct 25, 2013, 1:39 PM
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();

RCN
Oct 25, 2013, 1:47 PM
I aggree with you Daniil

Peter.Treier
Oct 25, 2013, 2:06 PM
Good Evening

Daniil, I use your approach - works perfect !

RCN, thanks for the input too :-)

Peter

RCN
Oct 25, 2013, 2:13 PM
You're welcome. Sorry for not cover the scenario as a whole.