Пользовательские узлы Ext.Net TreeGrid? - PullRequest
Новая
       4

Пользовательские узлы Ext.Net TreeGrid?

2 голосов
/ 20 ноября 2011

Я собираюсь создать TreeGrid в Ext.Net с пользовательскими узлами.
например:
Все узлы TreeGrid должны иметь текстовое поле спереди, и пользователи должны написать на нем число.
Смотрите изображение ниже:

Custom Ext.Net TreeGrid

Кроме того, я должен получить значения текстовых полей каждого узла в коде при обратной передаче.

Подскажите, пожалуйста, как я могу создать его с помощью Ext.net и C #?
Спасибо.

Ответы [ 2 ]

0 голосов
/ 07 декабря 2011

Я мог бы найти ответ: 

<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>
0 голосов
/ 21 ноября 2011

К сожалению, реализация этих функций в текущей версии <ext:TreeGrid> в Ext.NET (v1.x) досадно трудна.<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>
...