自定义Ext.Net TreeGrid节点？

问题描述：

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

Custom Ext.Net TreeGrid

另外，我在回发的代码来获得每个节点的文本框的值后面。

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

你试图设置网格编辑？ – Baidaly

其实，我想要有可见的文本框，而不是双击来显示它。 –

你能帮我一把吗？ http://stackoverflow.com/questions/9058921/configuration-required-to-get-sencha-extjs-treegrid-example-working – MacGyver

答

我找到了答案：

<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（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>

我已经测试过它。我们无法专注于treegrid中的文本框 –

自定义Ext.Net TreeGrid节点？

相关推荐