Question

我要用自定义节点创建一个Ext.Net的TreeGrid 例如：
TreeGrid的所有节点都应该在自己的前面有一个文本框，用户应该在其上写一个数字见下图：

Custom Ext.Net TreeGrid

另外，我必须在回发时将代码中的每个节点的文本框值都取消。

请您指导我，如何使用Ext.net和C＃创建它？感谢。

Answer 1

不幸的是，在Ext.NET（v1.x）中使用当前版本的<ext:TreeGrid>实现这些功能非常困难。 <ext:TreeGrid>只是没有为此类渲染设置。

在下一个Ext.NET版本（v2）中有帮助，尽管此时尚未发布。

以下是帮助您开始渲染<input>字段的基本示例。

示例

<%@ Page Language="C#" %> <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>TreeGrid - Ext.NET Examples</title> <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var formatHours = function (v) { if (v || v === 0) { return "Number : <input class=\"x-form-text x-form-field\" type=\"text\" value=\"" + v + "\" />"; } return ""; }; </script> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" /> <ext:TreeGrid ID="TreeGrid1" runat="server" Title="Projects" Width="500" Height="300" NoLeafIcon="true" EnableDD="true"> <Columns> <ext:TreeGridColumn Header="Task" Width="230" DataIndex="task" /> <ext:TreeGridColumn Header="Score" Width="200" DataIndex="duration" Align="Center" SortType="AsFloat"> <XTemplate runat="server"> <Html> {duration:this.formatHours} </Html> <Functions> <ext:JFunction Name="formatHours" Fn="formatHours" /> </Functions> </XTemplate> </ext:TreeGridColumn> </Columns> <Root> <ext:TreeNode Text="Tasks"> <Nodes> <ext:TreeNode Icon="Folder" Expanded="true"> <CustomAttributes> <ext:ConfigItem Name="task" Value="Project: Shopping" Mode="Value" /> </CustomAttributes> <Nodes> <ext:TreeNode Icon="Folder" Expanded="true"> <CustomAttributes> <ext:ConfigItem Name="task" Value="Remodeling" Mode="Value" /> </CustomAttributes> <Nodes> <ext:TreeNode Icon="Folder"> <CustomAttributes> <ext:ConfigItem Name="task" Value="Paint bedroom" Mode="Value" /> </CustomAttributes> <Nodes> <ext:TreeNode Leaf="true"> <CustomAttributes> <ext:ConfigItem Name="task" Value="Ceiling" Mode="Value" /> <ext:ConfigItem Name="duration" Value="1.25" /> </CustomAttributes> </ext:TreeNode> <ext:TreeNode Leaf="true"> <CustomAttributes> <ext:ConfigItem Name="task" Value="Walls" Mode="Value" /> <ext:ConfigItem Name="duration" Value="1.5" /> </CustomAttributes> </ext:TreeNode> </Nodes> </ext:TreeNode> <ext:TreeNode Leaf="true"> <CustomAttributes> <ext:ConfigItem Name="task" Value="Decorate living room" Mode="Value" /> <ext:ConfigItem Name="duration" Value="12" /> </CustomAttributes> </ext:TreeNode> <ext:TreeNode Leaf="true"> <CustomAttributes> <ext:ConfigItem Name="task" Value="Fix lights" Mode="Value" /> <ext:ConfigItem Name="duration" Value="0" /> </CustomAttributes> </ext:TreeNode> <ext:TreeNode Leaf="true"> <CustomAttributes> <ext:ConfigItem Name="task" Value="Reattach screen door" Mode="Value" /> <ext:ConfigItem Name="duration" Value="142" /> </CustomAttributes> </ext:TreeNode> <ext:TreeNode Leaf="true"> <CustomAttributes> <ext:ConfigItem Name="task" Value="Retile kitchen" Mode="Value" /> <ext:ConfigItem Name="duration" Value="96" /> </CustomAttributes> </ext:TreeNode> </Nodes> </ext:TreeNode> </Nodes> </ext:TreeNode> </Nodes> </ext:TreeNode> </Root> </ext:TreeGrid> </form> </body> </html>

Answer 2

我能找到答案：

<ext:TreeGrid ID="KnowledgeFieldsTreeGridWithTextBox1" runat="server" Title="Fileds "
    Icon="Plugin" Height="300" AutoHeight="true" AutoExpandColumn="KnowledgeFiled">
    <TopBar>
        <ext:Toolbar ID="KnowledgeFieldsTreeGridWithTextBoxToolbar1" runat="server">
            <Items>
                <ext:ToolbarFill ID="KnowledgeFieldsTreeGridWithTextBoxToolbarFill1" runat="server" />
                <ext:ToolbarTextItem ID="KnowledgeFieldsTreeGridWithTextBoxTextItem1" runat="server"
                    Text=" Filter : " />
                <ext:TriggerField ID="KnowledgeFieldsTreeGridWithTextBox_TriggerField1" runat="server" EnableKeyEvents="true">
                    <Triggers>
                        <ext:FieldTrigger Icon="Clear" />
                    </Triggers>
                    <Listeners>
                        <KeyUp Fn="KnowledgeFieldsTreeGridWithTextBox_KeyUp" Buffer="250" />
                        <TriggerClick Fn="KnowledgeFieldsTreeGridWithTextBox_ClearFilter" />
                    </Listeners>
                </ext:TriggerField>
            </Items>
        </ext:Toolbar>
    </TopBar>
    <Columns>
        <ext:TreeGridColumn Header="Filed Name" DataIndex="KnowledgeFiledName" Width="100" Align="Center" />
        <ext:TreeGridColumn Header="Score" DataIndex="KnowledgeScore" Width="200" Align="Right">
            <XTemplate runat="server">
                <Html>
                    <tpl if="values.leaf">
                        <input type="text" style="width:30px; text-align:left;" maxlength="5" value="{KnowledgeFiledScore}"></input>
                    </tpl>
                </Html>
            </XTemplate>
        </ext:TreeGridColumn>
    </Columns>
    <Root>

    </Root>
    <Listeners>
        <BeforeClick Handler="return !Ext.fly(e.getTarget()).is('input[type=text]');" />
    </Listeners>
</ext:TreeGrid>

自定义Ext.Net TreeGrid节点？

2 个答案: