Apr 19, 2016, 3:11 PM
[FIXED] [#1307] [4.2.0] Control validation in ComponentColumn with TreePanel
Hello,
I have a TreePanel whose nodes are generated dynamically from code-behind. There is a ComponentColumn which contains a NumberField. Based on a specific condition a NumberField is generated or not (in the code example below for simplicity's sake, I take the node name as my condition). I also want to disable the NumberField if the node is not checked, and enable it when the node is checked.
The problem, however, is that the NumberField is being rendered over and over, with the ID constantly changing. So when I try to get a value or validate, it seems like an old control is being fetched instead of the current one.
I have provided a sample of the problem. Check one of the nodes and then click on the Save button.
I have a TreePanel whose nodes are generated dynamically from code-behind. There is a ComponentColumn which contains a NumberField. Based on a specific condition a NumberField is generated or not (in the code example below for simplicity's sake, I take the node name as my condition). I also want to disable the NumberField if the node is not checked, and enable it when the node is checked.
The problem, however, is that the NumberField is being rendered over and over, with the ID constantly changing. So when I try to get a value or validate, it seems like an old control is being fetched instead of the current one.
I have provided a sample of the problem. Check one of the nodes and then click on the Save button.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
var beforeBindWeightField = function (componentColumn, context) {
//random condition to bind or not bind
return (context.record.data.text == "Test");
}
var bindWeightField = function (componentColumn, field, node) {
field.setDisabled(!node.data.checked);
}
function validateForm() {
var valid = true;
var column = App.treeParameters.headerCt.items.get(1);
var len = App.treeParameters.getStore().getCount();
var field;
for (var i = 0; i < len; i++) {
field = column.getComponent(i);
if (field != null) {
if (!field.isValid() || (field.disabled == false && field.value == null)) {
valid = false;
break;
}
}
alert(valid);
}
}
</script>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
try
{
if (!IsPostBack)
{
treeParameters.Root.Add(new Node() { Checked = false });
Node.Config nodeConfig = new Node.Config();
nodeConfig.Checked = false;
nodeConfig.Leaf = true;
NodeProxy rootnode = treeParameters.GetRootNode();
for (int i = 0; i < 5; i++)
{
Node node = new Node();
node.Text = (i % 2 == 0 ? "Test" : "test");
node.Expanded = true;
node.Checked = false;
node.Leaf = false;
node.Icon = Icon.GroupGear;
node.NodeID = "Test" + i;
rootnode.AppendChild(node);
}
}
}
catch (Exception ex)
{
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server"></ext:ResourceManager>
<ext:TreePanel Title="Configuration Parameters" runat="server" ID="treeParameters" RootVisible="false" Border="true"
Height="400" Lines="false" UseArrows="true" DisableSelection="true">
<Store>
<ext:TreeStore ID="treeStoreParemeters" runat="server" ShowWarningOnFailure="false">
</ext:TreeStore>
</Store>
<ColumnModel>
<Columns>
<ext:TreeColumn runat="server" DataIndex="text" Width="400" Text="Parameter" />
<ext:ComponentColumn ID="clComponent" runat="server" Width="120" Text="Weight">
<Component>
<ext:NumberField runat="server" AllowBlank="false" MinValue="0">
</ext:NumberField>
</Component>
<Listeners>
<BeforeBind Fn="beforeBindWeightField" />
<Bind Fn="bindWeightField" />
</Listeners>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
</ext:TreePanel>
<ext:Button runat="server" ID="btnSave" Text="Save">
<Listeners>
<Click Handler="validateForm();" />
</Listeners>
</ext:Button>
</form>
</body>
</html>
Last edited by Daniil; May 12, 2016 at 11:14 AM.