Ext.Net 1.2.0_在程序集中自定义 TreePanel 控件
发布日期:2021-09-10 04:49:48 浏览次数:1 分类:技术文章

本文共 9878 字,大约阅读时间需要 32 分钟。

本文内容

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

 

概述

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

 

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

  • 解决方案结构

  • 自定义 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
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
{
/// 
/// 作曲家
/// 
public class Composer
{
public Composer(string name) { this.Name = name; }
public string Name { get; set; }
 
private List
compositions;
public List
Compositions
{
get
{
if (this.compositions == null)
{
this.compositions = new List
();
}
return this.compositions;
}
}
}
/// 
/// 作品
/// 
public class Composition
{
public Composition() { }
 
public Composition(CompositionType type)
{
this.Type = type;
}
 
public CompositionType Type { get; set; }
 
private List
pieces;
public List
Pieces
{
get
{
if (this.pieces == null)
{
this.pieces = new List
();
}
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 class MyData
{
public static List
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
{
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
{
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
{
new Piece{ Title = "Sonata in A Minor" },
new Piece{ Title = "sonata in F Major" }
});
 
beethovenSymphonies.Pieces.AddRange(new List
{
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
{
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
{
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
{
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
{
new Piece{ Title = "Two Sonatas for Clarinet - F Minor" },
new Piece{ Title = "Two Sonatas for Clarinet - E-Flat Major" }
});
 
brahmsSymphonies.Pieces.AddRange(new List
{
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
{
brahmsConcertos,
brahmsQuartets,
brahmsSonatas,
brahmsSymphonies
});
 
 
Composer mozart = new Composer("Mozart");
 
Composition mozartConcertos = new Composition(CompositionType.Concertos);
 
mozartConcertos.Pieces.AddRange(new List
{
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
{ 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" %>
 
 
 
 
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
>
 
 
 
 
 
 
 
 
说明
  1. 在页面的 Page_Load 事件里,引入程序集的嵌入资源——myTreePanel.js。
  2. 利用 Ext.Net.ResourceManager 来管理自定义脚本,可以自动设置脚本的资源的 Expire 和 Cache-Control 头,减少 HTTP 请求的次数。

 

运行结果

 

转载地址:https://blog.csdn.net/weixin_34375251/article/details/86096291 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Android Intent的几种用法全面总结
下一篇:软件开发还远不是一种“科学”

发表评论

最新留言

关注你微信了!
[***.104.42.241]2024年03月23日 00时21分37秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

mysql 重启数据库实例_mysql 单机多实例重启数据库服务 2019-04-21
collator java_Java Collator getInstance(Locale)用法及代码示例 2019-04-21
dtc mysql_DTCC归来-高可用可扩展数据库架构探讨 2019-04-21
java怎样将日期本土化_Java中的日期操作 2019-04-21
java生产者消费者模型到精通_java生产者消费者模型 2019-04-21
java 执行 awk_3.1 biostar lesson3 linux学习日记;java版本;awk 2019-04-21
java二叉树求权值_百度笔试题目:二叉树路径权值和【转】 2019-04-21
欧亚马 java折叠车_如何选择欧亚马折叠车? 2019-04-21
python函数代码块以什么开头_Python初体验-开篇 代码全析 2019-04-21
java闹钟程序设计_JAVA课程设计_闹钟的设计与实现项目-报告_附源代码.doc 2019-04-21
java中的无效的列类型_java.sql.SQLException: 无效的列类型: 1111 2019-04-21
php rewrite url_PHP_URL Rewrite的设置方法,URL Rewrite需要服务器的支持! - phpStudy 2019-04-21
php读取大文件某行内容,PHP读取和修改大文件的某行内容_PHP教程 2019-04-21
打印php错误日志,php怎样打印错误日志 2019-04-21
Calendar导入java,Java程序使用Calendar.add()方法将分钟添加到当前时间 2019-04-21
mysql中用户线程作用,mysql用户线程的建立与用户线程的状态源码解析 2019-04-21
php页面引用公共文件,WeiPHP插件模板中快速引入公共模板文件 2019-04-21
php tracy,admin.php 2019-04-21
php访问父类的所有属性,php – 在父类中使用$this仅在子类中显示父类属性 2019-04-21
oracle比较强大的函数,SQL和ORACLE函数比较 2019-04-21