Ext.Net动态构建树-TreePanel使用详解

构建TeePanel有很多种方式，也是这几天研究的成果：

 1.通过TreeSote动态构建树。两种思想去创建，但有一种方式存在找不到treeSote。

 2.通过Node动态构建树。

第一种：构建静态树:

 这是可行的一种方式：

 1.先在页面上构建TreeStore，用OnReadData事件来加载

<ext:TreeStore ID="TreeStore1" runat="server" OnReadData="GetExamplesNodes" >
        <Proxy>
         <ext:PageProxy>
          <RequestConfig Method="GET" Type="Load" />
         </ext:PageProxy>
        </Proxy>
        <Root>
         <ext:Node NodeID="Root" Expanded="true" />
        </Root>
       </ext:TreeStore>

2.在页面上创建TreePanel用来显示TreeStore。

 <ext:TreePanel
                        runat="server"
                        Title="TreePanel"
                        Width="300"
                        Height="200"
                        Margin="10"
                        RootVisible="false"
                        Lines="false"
                        UseArrows="true"
                        StoreID="TreeStore1" />

另一种，创建思想是页面的我就什么TreePanel与TreeStore都不要了，直接都从代码创建，如下：

1.代码创建TreeStore对象。

TreeStore treeStore = new TreeStore()
                    {
                        ID = "treeStore" + entity.Id.ToString()
                        ,
                        Proxy = {
                                new PageProxy(){
                                    RequestConfig = {
                                        Method = HttpMethod.GET,
                                        Type = DirectEventType.Load
                                    }
                                }
                            }
                         ,
                        Root = {
                                new Node(){
                                    NodeID = "Root",
                                    Expanded = true
                                }
                            }

                    };

                    //this.ResourceManager1.AllUpdatePanels.Add(treeStore);

                    //treeStore.ReadData += new TreeStoreBase.ReadDataEventHandler(GetExamplesNodes);

 2.创建TreePanel

                    TreePanel treePanel = new TreePanel()
                    {
                        ID = "treePanel" + entity.Id.ToString(),
                        Header = false,
                        AutoScroll = true,
                        Lines = false,
                        UseArrows = true,
                        CollapseFirst = false,
                        RootVisible = false,
                        Animate = false,
                        Border = false

                        //Store = {
                            //    treeStore
                            //},
                        ,
                        Listeners =
                            {
                                ItemClick = { Handler = "onTreeItemClick(record, e);" },
                                AfterRender = { Handler = "onTreeAfterRender" }
                            }
                    };

                    treePanel.Store.Add(treeStore);
        3.创建一个Panel来显示。            

       Panel p = new Panel()
                    {
                        ID = "p" + entity.Id.ToString(),
                        Title = entity.FullName + "-功能菜单树",
                        Border = false,
                        BodyStyle = "padding:6px;",
                        Icon = Icon.User,
                        //Items = {

                        //}
                    };
                    p.Items.Add(treePanel);

                    WestPanel.Items.Add(p);//增加到页面显示

思路没有错吧，可写了这么多代码居然报错，说什么treeStroe...找不到。not found

这可把我气坏了，想了一晚上也没想出来结果，后来转变了一个思路，又查API。

可能TreeStroe必须得在页面创建，不允许动态创建，这是我查找的结果如果有人能创建希望留言留下您宝贵的实现方式。

 到最后终于找到了另一种实现方法如下：

 

第二种:通过Node动态构建树方法实现，从我个从角度推荐此方法：

1.创建根目录

Node root = new Node() { NodeID = entity.Id.ToString() };
                    LoadModules(root);

                    root.AllowDrag = false;
                    root.Expanded = true;
                    //treePanel.Root.Add(root);

2.直接把创建的TreePanel加入到页面控件显示。
                    WestPanel.Items.Add(new Panel()
                    {
                        ID = "pNavigation" + entity.Id.ToString(),
                        Title = entity.FullName + "功能菜单树",
                        Border = false,
                        BodyStyle = "padding:6px;",
                        Icon = Icon.User,
                        AutoScroll = true,
                        Items = {
                            new TreePanel() {//属性配置
                               ID="treePanel"+ entity.Id.ToString(),
                               Header = false,
                               AutoScroll = true,
                               Border = false,
                               Lines = false,
                               UseArrows = true,
                               CollapseFirst = false,
                               RootVisible = false,Animate = false,
                               Root = {
                                    root
                               }
                               ,
                               //Store = {
                               //    treeStore
                               //},
                               Listeners={//注册事件
                                    ItemClick={ Handler="onTreeItemClick(record, e);" },
                                    AfterRender={ Handler="onTreeAfterRender"}
                               }                     
                            }
                       
                        }
                    });

上面的各种方法我可是花费了我的时间、精力实验出来决定好用的方式了，在这里记录一下，以后如果哪里忘了过来瞧瞧。

如果早能找到上面代码，我就不用花这么长时间研究了，TreePanel网上的资料不多也不太全。

下面是我用于做记录的代码：就是上面动态生成的代码结构:

 

 //<ext:Panel ID="Navigation" runat="server" Title="功能菜单树" Border="false" BodyStyle="padding:6px;" Icon="User">
        //                 <Items>
        //                  <ext:TreePanel
        //                    ID="exampleTree2"
        //                    runat="server"
        //                    Header="false"
        //                    AutoScroll="true"
        //                    Lines="false"
        //                    UseArrows="true"
        //                    CollapseFirst="false"
        //                    RootVisible="false"
        //                    Animate="false">
        //                                <Store>
                       
        //                        <ext:TreeStore ID="TreeStore2" runat="server" OnReadData="GetExamplesNodes" >
        //                            <Proxy>
        //                                <ext:PageProxy>
        //                                    <RequestConfig Method="GET" Type="Load" />
        //                                </ext:PageProxy>
        //                            </Proxy>
        //                            <Root>
        //                                <ext:Node NodeID="Root" Expanded="true" />
        //                            </Root>
        //                        </ext:TreeStore>
        //                    </Store>

        //                    <Listeners>
        //                        <ItemClick Handler="onTreeItemClick(record, e);" />
        //                        <AfterRender Fn="onTreeAfterRender" />
        //                    </Listeners>                                                          
        //                  </ext:TreePanel>
        //                 </Items>
        //               </ext:Panel>
        //               <ext:Panel ID="Settings" runat="server" Title="自定义功能" Frame="false" Border="false"
        //                            BodyStyle="padding:16px;" Icon="Wand" Html="<b>您可在此添加自定义功能，或直接删除</b>" />