Dec 09, 2020, 8:47 AM
Component column with multiple coponents
I would like to have two component columns, whole with nuch of controls, that would be displayed according some logic
"some logic means" that if value is equal to predefined value, only some of controls will display in the particular column and as well only some controls will display in next columns ( so list of controls displayed in second column is dependent on value of the control in the first column)
in example (little modified https://examples5.ext.net/#/GridPane...Column/Editor/ )
what is missing:
1) setting value of the first textbox to store ( if I uncomment record.set('NumberInLeftColumn', value); it will end with js exception)
2) according value if first column, I would like to display/hide controls in second column
Note
as an alternative - I was thinking whether it is not possible to construct componetn column "dynamically in javascript" - in when the grid is going to render, handle some its event, and assign to each cell only controls that i want to display (so rather then having on each cell bunch of controls, each hidden, assign only the controls I want to show)
Thanks
"some logic means" that if value is equal to predefined value, only some of controls will display in the particular column and as well only some controls will display in next columns ( so list of controls displayed in second column is dependent on value of the control in the first column)
in example (little modified https://examples5.ext.net/#/GridPane...Column/Editor/ )
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = new object[]
{
new object[] { },
};
this.Store1.DataBind();
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>ComponentColumn Editor - Ext.NET Examples</title>
</head>
<body>
<script>
Ext.onReady(function() {
var grid = Ext.getCmp('grid');
for (var i = 0; i < grid.columns.length; i++) {
var column = grid.columns[i];
if (column.dataIndex == 'NumberInLeftColumn') {
column.on('bind', numberInLeft_bind, grid);
}
}
});
function numberInLeft_bind(column, cmp, record) {
var leftNumber = cmp.down('#leftNumber');
leftNumber.on('change', Ext.bind(leftNumber_change, this, [column, cmp, record, leftNumber], false));
}
function leftNumber_change(column, cmp, record, leftNumber) {
var text1 = cmp.down('#text1');
var number1 = cmp.down('#number1');
var value = leftNumber.getValue();
text1.setVisible(value == 1);
number1.setVisible(value != 1);
// here I would like to set record.data.NumberInLeftColumn to the "value" variable, record.set('NumberInLeftColumn', value);
// and I would like to display edit fields in next column using same logic
}
</script>
<form runat="server">
<ext:ResourceManager runat="server" />
<h1>ComponentColumn as Editor</h1>
<ext:GridPanel
runat="server"
Title="ComponentColumn Editor"
Width="1000"
ID="grid"
IDMode="Static"
Height="325">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="NumberInLeftColumn" Type="Int" />
<ext:ModelField Name="Text1InLeft" Type="String" />
<ext:ModelField Name="Text2InLeft" Type="String" />
<ext:ModelField Name="Text1" Type="Int" />
<ext:ModelField Name="Number1" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="NumberInLeftColumn"
Flex="1"
Text="Integer">
<Component>
<ext:Container runat="server">
<LayoutConfig>
<ext:HBoxLayoutConfig />
</LayoutConfig>
<Items>
<ext:NumberField runat="server" ItemID="leftNumber" Flex="1"/>
<ext:TextField runat="server" FieldLabel="text 1" Hidden="true" ItemID="text1" Flex="1"/>
<ext:NumberField runat="server" FieldLabel="number 1" Hidden="true" ItemID="number1" Flex="1"/>
</Items>
</ext:Container>
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="Text1"
Flex="1"
Text="Text">
<Component>
<ext:Container runat="server">
<Items>
<ext:TextField runat="server" FieldLabel="text 1" Hidden="true" ItemID="text1"/>
<ext:NumberField runat="server" FieldLabel="number 1" Hidden="true" ItemID="number1"/>
</Items>
</ext:Container>
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>
as you can see, if value of the first textbox is 1 , it will display textfield, if other then number fieldwhat is missing:
1) setting value of the first textbox to store ( if I uncomment record.set('NumberInLeftColumn', value); it will end with js exception)
2) according value if first column, I would like to display/hide controls in second column
Note
as an alternative - I was thinking whether it is not possible to construct componetn column "dynamically in javascript" - in when the grid is going to render, handle some its event, and assign to each cell only controls that i want to display (so rather then having on each cell bunch of controls, each hidden, assign only the controls I want to show)
Thanks