Tag <ext:resourceplaceholder id= "ResourcePlaceHolder1" runat= "Server" mode= "Scriptfiles"/>,mode= "Scriptfiles" is for mytreepanel rendering, to ensure that the page is loaded at the right time, and to execute the MyCustomControl.MyTreePanel.init method to initialize its TR property so that the control is manipulated on the client side;
Public Const string SCOPE = "Mycustomcontrol.mytreepanel"; Statement, EXT.NS with script ("MyCustomControl"); and Mycustomcontrol.mytreepanel = {...}, create namespaces and Mytreepanel classes in scripts.
This approach improves page performance to a large extent, making it easier to maintain the control later.
After looking at the package, refer to the custom control in the page, the code is as follows:
| The code is as follows | Copy Code |
| <%@ Page language= "C #"%> <%@ Register assembly= "ext.net" namespace= "ext.net" tagprefix= "Ext"%> <%@ Register assembly= "Extnettreepanlecustomcontrol" namespace= "Extnettreepanlecustomcontrol.mycustomcontrol" tagprefix= "MyControl"%> <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <title></title> <ext:resourceplaceholder id= "ResourcePlaceHolder1" runat= "Server" mode= "Scriptfiles"/> <script src= "Resources/mytreepanel.js" type= "Text/javascript" ></script> <body> <form id= "Form1" runat= "Server" > <ext:resourcemanager id= "ResourceManager1" runat= "Server" initscriptmode= "linked" Removeviewstate= "true" idmode= "Explicit"/> <mycontrol:mytreepanel id= "MyTreePanel1" runat= "Server"/> </form> </body> |
|
Where the "<mycontrol:mytreepanel id=" MyTreePanel1 "runat=" Server "/>" is a custom Treepanel control.
The partial class Mytreepanel of the custom control, with the filename MyTreePanelLogic.cs and MyTreePanelUI.cs respectively
| The code is as follows | Copy Code |
| Using System; Using System.Collections.Generic; Using System.Linq; Using Ext.Net.Utilities; Using Ext.net; Namespace Extnettreepanlecustomcontrol.mycustomcontrol { [Directmethodproxyid (Idmode = directmethodproxyidmode.none)] public partial class Mytreepanel { Public Const string SCOPE = "Mycustomcontrol.mytreepanel"; private void Initlogic () { This. Listeners.Render.Fn = Mytreepanel.scope + ". Init"; This. Listeners.Render.Scope = Mytreepanel.scope; This. Listeners.CheckChange.Handler = Mytreepanel.scope + ". Selectparentchildnodes (node,checked); "; Ext.Net.Button Button = new Ext.Net.Button (); Button.id = "Btnget"; button. Text = "Get tick"; button. Listeners.Click.Handler = Mytreepanel.scope + ". Getselectednode (#{" + This.id + "})"; This. Buttons.add (button); button = new Ext.Net.Button (); Button.id = "Btnclear"; button. Text = "clear tick"; button. Listeners.Click.Handler = Mytreepanel.scope + ". Clearselectednode (#{" + This.id + "})"; This. Buttons.add (button); } } } Using System; Using System.Collections.Generic; Using System.ComponentModel; Using System.Linq; Using System.Xml.Serialization; Using Ext.net; Using Newtonsoft.json; Namespace Extnettreepanlecustomcontrol.mycustomcontrol { public partial class Mytreepanel:treepanel { Public Mytreepanel () { This.id = "MyTreePanel1"; 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); } } } } } } |
|
Data
| The code is as follows | Copy Code |
| Using System; Using System.Collections; Using System.Collections.Generic; Using System.Globalization; Using System.Web; Using System.Xml; Using Ext.net; Namespace Extnettreepanlecustomcontrol { 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 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}; } } } |
|
External script file Mytreepanel.js
| The code is as follows | Copy Code |
| EXT.NS ("MyCustomControl"); ------------------Mytreepanel---------------------------------- Mycustomcontrol.mytreepanel = { Tr:null, Init:function (tree) { this.tr = tree; }, Selectparentchildnodes:function (node, state) { var tree = Node.getownertree (); Tree.suspendevents (); if (Node.parentnode!= null) { Check all child nodes of the node Node.cascade (function (node) { node.attributes.checked = State; Node.ui.toggleCheck (state); return true; }); Check the node parent node var pnode = Node.parentnode; while (Pnode!= null) { if (state) {//If selected it doesn't matter PNode.ui.toggleCheck (state); pNode.attributes.checked = State; Pnode = Pnode.parentnode; } else {//if unchecked, need to see if all child nodes are not selected for this node 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 (tree) { var msg = []; var selnodes = tree.getchecked (); Ext.each (selnodes, function (node) { Msg.push (Node.text); }); Ext.Msg.show ({ Title: "Check Node", Msg:msg.join (', '), Icon:Ext.Msg.INFO, MINWIDTH:200, Buttons:Ext.Msg.OK }); }, Clearselectednode:function (tree) { Tree.clearchecked (); } }; |
|
The results of the operation are as follows
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
