[CLOSED] [#31] Show/Hide ComponentColumn Textfield

Printable View

Oct 02, 2012, 3:30 AM
Antonio09

[CLOSED] [#31] Show/Hide ComponentColumn Textfield

I have a Gridpanel with a Componentcolumn:

Code:

<ext:ComponentColumn ID="ComponentColumnComentarios" runat="server" Editor="true" DataIndex="Coment" Flex="1" Text="Comentarios"> <Component> <ext:TextField ID="TextFieldComentarios" runat="server" /> </Component> </ext:ComponentColumn>

I want to hide or disable the Textfield when the record data has a specific value, for example, when record.data.status="0" the user can't edit the Coment column.

I haven't found any example to do something like this, can you provide one please?
Oct 02, 2012, 5:23 AM
Daniil

Hi @Antonio09,

You can configure a Component within a ComponentColumn Bind listener.
Oct 12, 2012, 12:24 AM
Antonio09

thanks! I solved it by adding this listener to the ComponentColumn:

Code:

<Listeners> <Bind Fn="ConfigComent"> </Bind> </Listeners> </ext:ComponentColumn>

Code:

var ConfigComent = function (column, cmp, record) { if ((record.get('Paso') == 0) || (record.get('BoletinadoPuesto') == 1) || (record.get('BoletinadoOrg') == 1)) { cmp.hide(); } };

But when the TextField is hided the column doesn't show the value, I try with cmp.setReadOnly(true); but I want to hide the TextField and keep the value displayed in the column, please help!
Oct 12, 2012, 4:41 AM
Daniil

Hi Antonio,

Thank for sharing the solution. It can help someone on the forums in the future!
Oct 12, 2012, 1:53 PM
Antonio09

Hi, I think you missed this part:

Quote:

Originally Posted by Antonio09

But when the TextField is hided the column doesn't show the value, I try with cmp.setReadOnly(true); but I want to hide the TextField and keep the value displayed in the column, please help!
Oct 12, 2012, 2:59 PM
Daniil

Apologize.

Such behavior is currently not supported if you need editing options. We will investigate a possibility how to achieve it.
Nov 17, 2012, 12:20 AM
Baidaly

Opened an Issue to track this defect, see

https://github.com/extnet/Ext.NET/issues/31
Feb 14, 2013, 9:39 AM
Daniil

We have committed the improvement to SVN trunk. It will be also available with the v2.2 release.

Please take a look at the example.

Example

Code:

<%@ Page Language="C#" %> <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { if (!X.IsAjaxRequest) { this.Store1.Data = new object[] { new object[] { 0, 1 }, new object[] { 1, "text" }, new object[] { 2, DateTime.Now }, new object[] { 3, "Item4" }, new object[] { 4, true } }; } } </script> <!DOCTYPE html> <html> <head runat="server"> <title>Multiple Editors - Ext.NET Examples</title> <link href="/resources/css/examples.css" rel="stylesheet" /> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" /> <h1>Multiple Editors</h1> <ext:GridPanel runat="server" Title="Multiple Editors" Width="400" Height="180"> <Store> <ext:Store ID="Store1" runat="server"> <Model> <ext:Model runat="server"> <Fields> <ext:ModelField Name="Index" Type="Int" /> <ext:ModelField Name="Value"> <Convert Handler="if(record.data.Index == 2){return Ext.Date.parse(value, 'Y-m-d\\TH:i:s');} else {return value;}" /> </ext:ModelField> </Fields> </ext:Model> </Model> <Reader> <ext:ArrayReader /> </Reader> </ext:Store> </Store> <ColumnModel runat="server"> <Columns> <ext:RowNumbererColumn runat="server" /> <ext:ComponentColumn runat="server" Flex="1" Editor="true" DataIndex="Value"> <Component> <ext:NumberField runat="server" /> <ext:TextField runat="server" /> <ext:DateField runat="server" /> <ext:ComboBox runat="server"> <Items> <ext:ListItem Text="Item1" /> <ext:ListItem Text="Item2" /> <ext:ListItem Text="Item3" /> <ext:ListItem Text="Item4" /> <ext:ListItem Text="Item5" /> </Items> </ext:ComboBox> <ext:Checkbox runat="server" /> </Component> <Listeners> <BeforeBind Handler="e.config = e.config[e.record.data.Index];" /> </Listeners> <Renderer Handler="metadata.style='color:gray;'; return '[none]';" /> </ext:ComponentColumn> </Columns> </ColumnModel> </ext:GridPanel> </form> </body> </html>