Ext.NET-WebForm之TreePanel组件

开启VS2017创建WebForm项目

打开NuGet搜索Ext.NET并安装

 

安装后可见

还自动帮我们创建了一个页面和文件夹项

打开自动添加的页面Ext.NET.Default.aspx，运行项目出错了，程序集Newtonsoft.Json找不到，估计是这个页面引用了这个第三方json解析包，而你还没引进项目

打开Nuget包管理器，搜索Newtonsoft.Json, 并安装。

发现已经按照了，但版本有更新，那就更新一些吧。。

更新完后，有个警告，先不管，在运行一下页面

可以显示了，但页面好像丢失CSS，很难看。

 经过多次刷新和等待，终于页面显示正常了，原因是该页面引用了外站的CSS，所以加载慢了

以上算是Ext.NET WebForm入个门吧，现在我们加入主题—— TreePanel组件示例

Ext.NET 没有设计视图界面，所以一切都是蒙拐骗，做好心理准备就行。

添加一个WebForm新页面，aspx页面内容如下

然后再后置代码cs文件里添加动态创建TreePanel组件

整体结构

完整页面 WebForm1.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;

namespace WebApplication1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Ext.Net.TreePanel tree = new Ext.Net.TreePanel();

            this.PlaceHolder1.Controls.Add(tree);

            tree.ID = "TreePanel1";
            tree.Width = Unit.Pixel(300);
            tree.Height = Unit.Pixel(450);
            tree.Icon = Icon.BookOpen;
            tree.Title = "Catalog";
            tree.AutoScroll = true;

            Ext.Net.Button btnExpand = new Ext.Net.Button();
            btnExpand.Text = "Expand All";
            btnExpand.Listeners.Click.Handler = tree.ClientID + ".expandAll();";

            Ext.Net.Button btnCollapse = new Ext.Net.Button();
            btnCollapse.Text = "Collapse All";
            btnCollapse.Listeners.Click.Handler = tree.ClientID + ".collapseAll();";

            Toolbar toolBar = new Toolbar();
            toolBar.ID = "Toolbar1";
            toolBar.Items.Add(btnExpand);
            toolBar.Items.Add(btnCollapse);
            tree.TopBar.Add(toolBar);

            StatusBar statusBar = new StatusBar();
            statusBar.ID = "StatusBar1";
            statusBar.AutoClear = 1000;
            tree.BottomBar.Add(statusBar);

            tree.Listeners.ItemClick.Handler = statusBar.ClientID + ".setStatus({text: 'Node Selected: <b>' + record.data.text + '</b>', clear: false});";
            tree.Listeners.ItemExpand.Handler = statusBar.ClientID + ".setStatus({text: 'Node Expanded: <b>' + item.data.text + '</b>', clear: false});";
            tree.Listeners.ItemExpand.Buffer = 30;
            tree.Listeners.ItemCollapse.Handler = statusBar.ClientID + ".setStatus({text: 'Node Collapsed: <b>' + item.data.text + '</b>', clear: false});";
            tree.Listeners.ItemCollapse.Buffer = 30;

            Ext.Net.Node root = new Ext.Net.Node()
            {
                Text = "Composers"
            };
            root.Expanded = true;
            tree.Root.Add(root);

            List<Composer> composers = this.GetData();

            foreach (Composer composer in composers)
            {
                Ext.Net.Node composerNode = new Ext.Net.Node()
                {
                    Text = composer.Name,
                    Icon = Icon.UserGray
                };
                root.Children.Add(composerNode);

                foreach (Composition composition in composer.Compositions)
                {
                    Ext.Net.Node compositionNode = new Ext.Net.Node()
                    {
                        Text = composition.Type.ToString()
                    };
                    composerNode.Children.Add(compositionNode);

                    foreach (Piece piece in composition.Pieces)
                    {
                        Ext.Net.Node pieceNode = new Ext.Net.Node()
                        {
                            Text = piece.Title,
                            Icon = Icon.Music,
                            Leaf = true
                        };
                        compositionNode.Children.Add(pieceNode);
                    }
                }
            }
        }

        public class Composer
        {
            public Composer(string name) { this.Name = name; }
            public string Name { get; set; }

            private List<Composition> compositions;
            public List<Composition> Compositions
            {
                get
                {
                    if (this.compositions == null)
                    {
                        this.compositions = new List<Composition>();
                    }
                    return this.compositions;
                }
            }
        }

        public class Composition
        {
            public Composition() { }

            public Composition(CompositionType type)
            {
                this.Type = type;
            }

            public CompositionType Type { get; set; }

            private List<Piece> pieces;
            public List<Piece> Pieces
            {
                get
                {
                    if (this.pieces == null)
                    {
                        this.pieces = new List<Piece>();
                    }
                    return this.pieces;
                }
            }
        }

        public class Piece
        {
            public Piece() { }

            public Piece(string title)
            {
                this.Title = title;
            }

            public string Title { get; set; }
        }

        public enum CompositionType
        {
            Concertos,
            Quartets,
            Sonatas,
            Symphonies
        }

        public List<Composer> GetData()
        {
            Composer beethoven = new Composer("Beethoven");

            Composition beethovenConcertos = new Composition(CompositionType.Concertos);
            Composition beethovenQuartets = new Composition(CompositionType.Quartets);
            Composition beethovenSonatas = new Composition(CompositionType.Sonatas);
            Composition beethovenSymphonies = new Composition(CompositionType.Symphonies);

            beethovenConcertos.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "No. 1 - C" },
            new Piece{ Title = "No. 2 - B-Flat Major" },
            new Piece{ Title = "No. 3 - C Minor" },
            new Piece{ Title = "No. 4 - G Major" },
            new Piece{ Title = "No. 5 - E-Flat Major" }
        });

            beethovenQuartets.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "Six String Quartets" },
            new Piece{ Title = "Three String Quartets" },
            new Piece{ Title = "Grosse Fugue for String Quartets" }
        });

            beethovenSonatas.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "Sonata in A Minor" },
            new Piece{ Title = "sonata in F Major" }
        });

            beethovenSymphonies.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "No. 1 - C Major" },
            new Piece{ Title = "No. 2 - D Major" },
            new Piece{ Title = "No. 3 - E-Flat Major" },
            new Piece{ Title = "No. 4 - B-Flat Major" },
            new Piece{ Title = "No. 5 - C Minor" },
            new Piece{ Title = "No. 6 - F Major" },
            new Piece{ Title = "No. 7 - A Major" },
            new Piece{ Title = "No. 8 - F Major" },
            new Piece{ Title = "No. 9 - D Minor" }
        });

            beethoven.Compositions.AddRange(new List<Composition>{
            beethovenConcertos,
            beethovenQuartets,
            beethovenSonatas,
            beethovenSymphonies
        });


            Composer brahms = new Composer("Brahms");

            Composition brahmsConcertos = new Composition(CompositionType.Concertos);
            Composition brahmsQuartets = new Composition(CompositionType.Quartets);
            Composition brahmsSonatas = new Composition(CompositionType.Sonatas);
            Composition brahmsSymphonies = new Composition(CompositionType.Symphonies);

            brahmsConcertos.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "Violin Concerto" },
            new Piece{ Title = "Double Concerto - A Minor" },
            new Piece{ Title = "Piano Concerto No. 1 - D Minor" },
            new Piece{ Title = "Piano Concerto No. 2 - B-Flat Major" }
        });

            brahmsQuartets.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "Piano Quartet No. 1 - G Minor" },
            new Piece{ Title = "Piano Quartet No. 2 - A Major" },
            new Piece{ Title = "Piano Quartet No. 3 - C Minor" },
            new Piece{ Title = "Piano Quartet No. 3 - B-Flat Minor" }
        });

            brahmsSonatas.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "Two Sonatas for Clarinet - F Minor" },
            new Piece{ Title = "Two Sonatas for Clarinet - E-Flat Major" }
        });

            brahmsSymphonies.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "No. 1 - C Minor" },
            new Piece{ Title = "No. 2 - D Minor" },
            new Piece{ Title = "No. 3 - F Major" },
            new Piece{ Title = "No. 4 - E Minor" }
        });

            brahms.Compositions.AddRange(new List<Composition>{
            brahmsConcertos,
            brahmsQuartets,
            brahmsSonatas,
            brahmsSymphonies
        });


            Composer mozart = new Composer("Mozart");

            Composition mozartConcertos = new Composition(CompositionType.Concertos);

            mozartConcertos.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "Piano Concerto No. 12" },
            new Piece{ Title = "Piano Concerto No. 17" },
            new Piece{ Title = "Clarinet Concerto" },
            new Piece{ Title = "Violin Concerto No. 5" },
            new Piece{ Title = "Violin Concerto No. 4" }
        });

            mozart.Compositions.Add(mozartConcertos);

            return new List<Composer> { beethoven, brahms, mozart };
        }
    }


}

 

运行查看