[Ext.Net] 1.2.0_在程序集中自定义 TreePanel 控件

2023-12-26 14:20
文章标签 程序 自定义 控件 net 集中 1.2 ext treepanel

本文主要是介绍[Ext.Net] 1.2.0_在程序集中自定义 TreePanel 控件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本文内容

  • 概述
  • 演示在程序集中自定义 TreePanel 控件
  • 运行结果

 

概述

之前，我在博文 Ext.Net_在 Web 应用程序中自定义 TreePanel 控件 中，演示如何用 Ext.Net 在 Web 应用程序中自定义 TreePanel 控件。自定义的 TreePanel 控件由两个文件、三部分组成：控件的类文件和外部脚本文件。其中，控件类文件是一个分部类，分别实现控件的 UI 代码和逻辑代码。UI 代码负责创建控件标记；逻辑代码创建控件的客户端事件和服务器端事件。外部脚本文件用于在客户端操作控件。类文件和脚本文件都在 Web 应用程序中，但是它们也可以在程序集中，而且可以把脚本文件作为程序集的嵌入资源，在 Web 应用程序中使用。

 

演示在程序集中自定义 TreePanel 控件

  • 解决方案结构

2011-12-30_225715

  • 自定义 TreePanel UI
using System;
using System.Collections.Generic;
using System.ComponentModel;
using Ext.Net;
 
namespace MyExtNet.MyControl
{
    public partial class TreePanel : Ext.Net.TreePanel
    {
        public TreePanel()
        {
            this.ID = "TreePanel1";
            this.Title = "MyTreePanel";
            this.Width = System.Web.UI.WebControls.Unit.Pixel(300);
            this.Height = System.Web.UI.WebControls.Unit.Pixel(400);
            this.UseArrows = true;
            this.AutoScroll = true;
            this.Animate = true;
            this.EnableDD = true;
            this.ContainerScroll = true;
            this.RootVisible = false;
 
            this.LoadMask.ShowMask = true;
 
            this.SelectionModel.Add(new Ext.Net.DefaultSelectionModel());
 
            this.BuildTree();
            this.InitLogic();
        }
 
        private void BuildTree()
        {
            Ext.Net.TreeNode root = new Ext.Net.TreeNode("Composers");
            root.Expanded = true;
            this.Root.Add(root);
 
 
            List<Composer> composers = MyData.GetData();
 
            foreach (Composer composer in composers)
            {
                Ext.Net.TreeNode composerNode = new Ext.Net.TreeNode(composer.Name, Icon.UserGray);
                composerNode.Checked = Ext.Net.ThreeStateBool.False;
                composerNode.Leaf = false;
                composerNode.Icon = Ext.Net.Icon.Folder;
                root.Nodes.Add(composerNode);
 
                foreach (Composition composition in composer.Compositions)
                {
                    Ext.Net.TreeNode compositionNode = new Ext.Net.TreeNode(composition.Type.ToString());
                    compositionNode.Checked = Ext.Net.ThreeStateBool.False;
                    compositionNode.Leaf = false;
                    compositionNode.Icon = Ext.Net.Icon.Folder;
                    composerNode.Nodes.Add(compositionNode);
 
                    foreach (Piece piece in composition.Pieces)
                    {
                        Ext.Net.TreeNode pieceNode = new Ext.Net.TreeNode(piece.Title, Icon.Music);
                        pieceNode.Checked = Ext.Net.ThreeStateBool.False;
                        pieceNode.Leaf = true;
                        compositionNode.Nodes.Add(pieceNode);
                    }
                }
            }
        }
    }
}
  • 自定义 TreePanel Logic
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.UI;
using Ext.Net.Utilities;
using Ext.Net;
 
namespace MyExtNet.MyControl
{
    [DirectMethodProxyID(IDMode = DirectMethodProxyIDMode.None)]
    public partial class TreePanel
    {
        public const string SCOPE = "MyExtNet.MyControl.TreePanel";
 
        private void InitLogic()
        {
            this.Listeners.Render.Fn = TreePanel.SCOPE + ".init";
            this.Listeners.Render.Scope = TreePanel.SCOPE;
            this.Listeners.CheckChange.Handler = TreePanel.SCOPE + ".SelectParentChildNodes(node,checked);";
 
 
            Ext.Net.Button button = new Ext.Net.Button();
            button.ID = "btnGet";
            button.Text = "获得勾选";
            button.Listeners.Click.Handler = TreePanel.SCOPE + ".getSelectedNode('" + this.ClientID + "')";
            this.Buttons.Add(button);
            button = new Ext.Net.Button();
            button.ID = "btnClear";
            button.Text = "清除勾选";
            button.Listeners.Click.Handler = TreePanel.SCOPE + ".clearSelectedNode('" + this.ClientID + "')";
            this.Buttons.Add(button);
        }
    }
}

  • 自定义数据 Composition.cs
using System;
using System.Collections;
using System.Collections.Generic;
 
namespace MyExtNet.MyControl
{
    /// <summary>
    /// 作曲家
    /// </summary>
    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;
            }
        }
    }
    /// <summary>
    /// 作品
    /// </summary>
    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;
            }
        }
    }
    /// <summary>
    /// 作品
    /// </summary>
    public class Piece
    {
        public Piece() { }
 
        public Piece(string title)
        {
            this.Title = title;
        }
 
        public string Title { get; set; }
    }
    /// <summary>
    /// 作品类型
    /// </summary>
    public enum CompositionType
    {
        Concertos,
        Quartets,
        Sonatas,
        Symphonies
    }
 
    public class MyData
    {
        public static 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 };
        }
    }
}
  • 自定义脚本 myTreePanel.js
Ext.ns("MyExtNet.MyControl");
 
MyExtNet.MyControl.TreePanel = {
    tr: null,
    init: function(tree) {
        this.tr = tree;
    },
    SelectParentChildNodes: function(node, state) {
        var tree = node.getOwnerTree();
        tree.suspendEvents();
        if (node.parentNode != null) {
            // 勾选该节点所有子节点
            node.cascade(function(node) {
                node.attributes.checked = state;
                node.ui.toggleCheck(state);
                return true;
            });
            // 勾选该节点父节点
            var pNode = node.parentNode;
            while (pNode != null) {
                if (state) { //如果选中状态无所谓
                    pNode.ui.toggleCheck(state);
                    pNode.attributes.checked = state;
                    pNode = pNode.parentNode;
                }
                else { //如果未选中状态，需要查看该节点是否所有子节点都未选中
                    var chk = false;
                    pNode.eachChild(function(child) {
                        if (child.attributes.checked || child.getUI().isChecked())
                            chk = true;
                    });
                    pNode.ui.toggleCheck(chk);
                    pNode.attributes.checked = chk;
                    pNode = pNode.parentNode;
                }
            }
        }
        tree.resumeEvents();
    },
    getSelectedNode: function(treeId) {
        var tree = Ext.getCmp(treeId);
        var msg = [];
        var selNodes = tree.getChecked();
 
        Ext.each(selNodes, function(node) {
            msg.push(node.text);
        });
 
        Ext.Msg.show({
            title: "勾选节点",
            msg: msg.join(','),
            icon: Ext.Msg.INFO,
            minWidth: 200,
            buttons: Ext.Msg.OK
        });
    },
    clearSelectedNode: function(treeId) {
        var tree = Ext.getCmp(treeId);
        tree.clearChecked();
    }
};
  • 创建页面

<%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register Assembly="MyExtNet.MyControl" Namespace="MyExtNet.MyControl" TagPrefix="cc1" %>
<!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></title>
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
 
    <script runat="server">
   1:  
   2:         protected void Page_Load(object sender, EventArgs e)
   3:         {
   4:             if (!X.IsAjaxRequest)
   5:             {
   6:                 string url = X.ResourceManager.GetWebResourceUrl(typeof(MyExtNet.MyControl.MyResourceManager),
   7:                                                              "MyExtNet.MyControl.Resources.myTreePanel.js");
   8:                 X.ResourceManager.RegisterClientScriptInclude(string.Format("{0}_Script", MyExtNet.MyControl.TreePanel.SCOPE), url);
   9:             }
  10:         }
  11:     
</script>
 
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <cc1:TreePanel ID="TreePanel1" runat="server">
    </cc1:TreePanel>
    </form>
</body>
</html>
说明
  1. 在页面的 Page_Load 事件里，引入程序集的嵌入资源——myTreePanel.js。
  2. 利用 Ext.Net.ResourceManager 来管理自定义脚本，可以自动设置脚本的资源的 Expire 和 Cache-Control 头，减少 HTTP 请求的次数。

 

运行结果

2011-12-30_225715

 

下载 Demo

这篇关于[Ext.Net] 1.2.0_在程序集中自定义 TreePanel 控件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/539739。

相关文章

使用Sentinel自定义返回和实现区分来源方式

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》：本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定
阅读更多...
如何自定义Nginx JSON日志格式配置

如何自定义Nginx JSON日志格式配置

《如何自定义NginxJSON日志格式配置》Nginx作为最流行的Web服务器之一,其灵活的日志配置能力允许我们根据需求定制日志格式,本文将详细介绍如何配置Nginx以JSON格式记录访问日志,这种... 目录前言为什么选择jsON格式日志？配置步骤详解1. 安装Nginx服务2. 自定义JSON日志格式各
阅读更多...
Android自定义Scrollbar的两种实现方式

Android自定义Scrollbar的两种实现方式

《Android自定义Scrollbar的两种实现方式》本文介绍两种实现自定义滚动条的方法,分别通过ItemDecoration方案和独立View方案实现滚动条定制化,文章通过代码示例讲解的非常详细,... 目录方案一：ItemDecoration实现（推荐用于RecyclerView）实现原理完整代码实现
阅读更多...
基于Spring实现自定义错误信息返回详解

基于Spring实现自定义错误信息返回详解

《基于Spring实现自定义错误信息返回详解》这篇文章主要为大家详细介绍了如何基于Spring实现自定义错误信息返回效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录背景目标实现产出背景Spring 提供了 @RestConChina编程trollerAdvice 用来实现 HTT
阅读更多...
SpringSecurity 认证、注销、权限控制功能(注销、记住密码、自定义登入页)

SpringSecurity 认证、注销、权限控制功能(注销、记住密码、自定义登入页)

《SpringSecurity认证、注销、权限控制功能(注销、记住密码、自定义登入页)》SpringSecurity是一个强大的Java框架,用于保护应用程序的安全性,它提供了一套全面的安全解决方案... 目录简介认识Spring Security“认证”（Authentication）“授权” （Auth
阅读更多...
如何用java对接微信小程序下单后的发货接口

如何用java对接微信小程序下单后的发货接口

《如何用java对接微信小程序下单后的发货接口》：本文主要介绍在微信小程序后台实现发货通知的步骤,包括获取Access_token、使用RestTemplate调用发货接口、处理AccessTok... 目录配置参数 调用代码获取Access_token调用发货的接口类注意点总结配置参数 首先需要获取Ac
阅读更多...
SpringBoot自定义注解如何解决公共字段填充问题

SpringBoot自定义注解如何解决公共字段填充问题

《SpringBoot自定义注解如何解决公共字段填充问题》本文介绍了在系统开发中,如何使用AOP切面编程实现公共字段自动填充的功能,从而简化代码,通过自定义注解和切面类,可以统一处理创建时间和修改时间... 目录1.1 问题分析1.2 实现思路1.3 代码开发1.3.1 步骤一1.3.2 步骤二1.3.3
阅读更多...
基于Python开发PDF转Doc格式小程序

基于Python开发PDF转Doc格式小程序

《基于Python开发PDF转Doc格式小程序》这篇文章主要为大家详细介绍了如何基于Python开发PDF转Doc格式小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 用python实现PDF转Doc格式小程序以下是一个使用Python实现PDF转DOC格式的GUI程序，采用T
阅读更多...
dubbo3 filter(过滤器)如何自定义过滤器

dubbo3 filter(过滤器)如何自定义过滤器

《dubbo3filter(过滤器)如何自定义过滤器》dubbo3filter（过滤器）类似于javaweb中的filter和springmvc中的intercaptor,用于在请求发送前或到达前进... 目录dubbo3 filter（过滤器）简介dubbo 过滤器运行时机自定义 filter第一种 @A
阅读更多...
基于.NET编写工具类解决JSON乱码问题

基于.NET编写工具类解决JSON乱码问题

《基于.NET编写工具类解决JSON乱码问题》在开发过程中,我们经常会遇到JSON数据处理的问题,尤其是在数据传输和解析过程中,很容易出现编码错误导致的乱码问题,下面我们就来编写一个.NET工具类来解... 目录问题背景核心原理工具类实现使用示例总结在开发过程中，我们经常会遇到jsON数据处理的问题，尤其是
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2