【转载】Coolite之ComboTree控件附加与实际引用、取值

Coolite之ComboTree控件附加与实际引用、取值

在发这个贴子之前，我想说几句话。强烈笔视～～那些只发代码不写怎么调用的XXX人。看了N遍还没有明白那位老兄是怎么调用这个ComBoTree　控件。

说明：以上是comboTree.js 与ComboTree.cs的存放位置。

 1using System;
 2using System.Collections.Generic;
 3using System.ComponentModel;
 4using System.Drawing;
 5using System.Linq;
 6using System.Text;
 7using System.Web.UI;
 8using Coolite.Ext.Web;
 9
10 [assembly: WebResource("Coolite.Ext.UX.Extensions.ComboTree.resources.ComboTree.js", "text/javascript")]
11
12namespace Coolite.Ext.UX
13{
14    [Designer(typeof(EmptyDesigner))]
15    [DefaultProperty("")]
16    [Xtype("combotree")]
17    [InstanceOf(ClassName = "Ext.ux.ComboTree")]
18
19    [ClientScript(Type = typeof(ComboTree), FilePath = "/ux/extensions/combotree/combotree.js", 
20        WebResource = "Coolite.Ext.Web.Build.Resources.Coolite.ux.extensions.ComboTree.ComboTree.js")]
21    [ToolboxData("<{0}:ComboTree runat=\"server\" Title=\"Combo tree\" Height=\"300\"></{0}:ComboTree>")]
22    [Description("Combobox with tree functionality")]
23    public class ComboTree : ComboBox
24   & nbsp;{
25        private ItemsCollection<TreePanel> tree;
26
27        [ClientConfig("tree", typeof(ItemCollectionJsonConverter))]
28        [Category("Config Options")]
29        [NotifyParentProperty(true)]
30        [DefaultValue(null)]
31        [PersistenceMode (PersistenceMode.InnerProperty)]
32        public virtual ItemsCollection<TreePanel> Tree
33   & nbsp;    {
34            get
35   & nbsp;        {
36                 if (this.tree == null)
37   & nbsp;            {
38                     this.tree = new ItemsCollection<TreePanel> ();
39                 }
40                 return this.tree;
41            }
42        }
43
44        protected override void OnLoad(EventArgs e)
45   & nbsp;    {
46            this.Controls.Add(Tree[0]);
47            if (!this.LazyItems.Contains(Tree[0]))
48   & nbsp;        {
49                 this.LazyItems.Add(Tree [0]);
50            }
51            base.OnLoad(e);
52        }
53    }
54}
55

comboTree.cs  　注意　    [ClientScript(Type = typeof(ComboTree), FilePath = "/ux/extensions/combotree/combotree.js",
        WebResource = "Coolite.Ext.Web.Build.Resources.Coolite.ux.extensions.ComboTree.ComboTree.js")]　这行中提到的路径，不要写错（我在经过网上考过的代码怎么调也调也调不出JS来，原来它的路径写错了。） 

 1Ext.namespace('Ext.ux');
 2
 3/**//**
 4*
 5* @class ComboTree
 6* @extends Ext.form.ComboBox
 7*/
 8Ext.ux.ComboTree = Ext.extend(Ext.form.ComboBox, {
 9    tree: null,
10    treeId: 0,
11    setValue: function(v) {
12        var text = v;
13        if (this.valueField) {
14            var r = this.findExtRecord(this.valueField, v);
15            if (r) {
16                text = r.data[this.displayField];
17            } else if (this.valueNotFoundText !== undefined) {
18                text = this.valueNotFoundText;
19            }
20        }
21        Ext.ux.ComboTree.superclass.setValue.call(this, text);
22        this.lastSelectionText = text;
23        if (this.hiddenField) {
24            this.hiddenField.value = v;
25        }
26        this.value = v;
27    },
28    initComponent: function() {
29        this.treeId = Ext.id();
30        this.focusLinkId = Ext.id();
31        Ext.apply(this, {
32            store: new Ext.data.SimpleStore({
33                fields: [],
34                data: [[]]
35            }),
36            editable: false,
37            shadow: false,
38            mode: 'local',
39            triggerAction: 'all',
40            maxHeight: 200,
41            tpl: '<tpl for="."><div style="height:200px"><div id="'
42                + this.treeId + '"></div></div></tpl>',
43            selectedClass: '',
44            onSelect: Ext.emptyFn,
45            valueField: 'text'
46        });
47
48        this.tree = new Coolite.Ext.TreePanel(this.tree);
49        this.on('expand', this.onExpand);
50        this.tree.on('click', this.onClick, this);
51        Ext.ux.ComboTree.superclass.initComponent.apply(this, arguments);
52    },
53    findExtRecord: function(prop, value) {
54        var record;
55        if (this.store != null) {
56            if (this.store.getCount() > 0) {
57                this.store.each(function(r) {
58                    if (r.data[prop] == value) {
59                        record = r;
60                        return false;
61                    }
62                });
63            }
64        }
65        return record;
66    },
67    onClick: function(node) {
68        if (node.attributes.parameter == 9) {
69            // 
70        } else {
71            // 
72            this.setValue(node.text);
73            this.hiddenField.value = node.id;
74            this.collapse();
75        }
76    },
77    onExpand: function() {
78        this.tree.render(this.treeId);
79    }
80});
81
82
83Ext.reg("combotree", Ext.ux.ComboTree);

    这点要注意了valueField: 'text'　，先在这里说明下，这个text需要与combox中的 text相对应，不要写错，不是网上说的 valueField: 'id'.

设置好了那就生成吧。

接来说下生成过后怎么引用了。

在Cs 中增加了 this.Controls.Add(Tree[0]);　在前台引用时　就里要用到。具体如下： 

 1    <cc1:ComboTree ID="ComboTree1" runat="server" Height="300"  StoreID="Store1" >
 2    <Tree>
 3             <ext:TreePanel 
 4            ID="TreePanel1" 
 5            runat="server" 
 6            Title="Tree" 
 7            AutoHeight="true" 
 8            Border="false">
 9            <Loader>
10                <ext:PageTreeLoader OnNodeLoad="NodeLoad">
11                    <BaseParams>
12                        <ext:Parameter Name="prefix" Value="10" Mode="Raw" />
13                    </BaseParams>
14                </ext:PageTreeLoader>
15            </Loader>
16            <Root>
17                <ext:AsyncTreeNode NodeID="0" Text="Root" />
18            </Root>
19        </ext:TreePanel>      
20    </Tree>
21    </cc1:ComboTree>

简单引用下，　里面放一个TreePanel就OK了。实际上前并不是这样的.comboTree只是完成了绘制菜单画布没有完成数据的填充。所以还需要增加

<Load  Handler="load();" />在数据加载完成后进行对comboTree的store填充。

    <script type="text/javascript">
    //<![CDATA[ 
    var load=function(){
        <%=ComboTree1.ClientID %>.store = <%=Store1.ClientID %>;
        }
         //]]> 
    </script>

后台cs部分引用如下

 1 protected void Page_Load(object sender, EventArgs e)
 2            {
 3                if (!Ext.IsAjaxRequest)
 4                {
 5                    List<object> list = new List<object>
 6                                        {
 7                                            new {text = "1001", value = "1001"},
 8                                            new {text = "1002", value = "1002"},
 9                                            new {text = "1003", value = "1003"}
10                                        };
11                    Store1.DataSource = list;
12                    Store1.DataBind();
13                }
14            }
15
16        protected void NodeLoad(object sender, NodeLoadEventArgs e)
17        {
18            string prefix = e.ExtraParams["prefix"] ?? "";
19            if (!string.IsNullOrEmpty(e.NodeID))
20            {
21                for (int i = 1; i < 6; i++)
22                {
23                    AsyncTreeNode asyncNode = new AsyncTreeNode();
24                    asyncNode.Text = prefix + e.NodeID + i;
25                    asyncNode.NodeID = e.NodeID + i;
26                    e.Nodes.Add(asyncNode);
27                }
28                for (int i = 6; i < 11; i++)
29                {
30                    Coolite.Ext.Web.TreeNode treeNode = new Coolite.Ext.Web.TreeNode();
31                    treeNode.Text = prefix + e.NodeID + i;
32                    treeNode.NodeID = e.NodeID + i;
33                    treeNode.Leaf = true;
34                    e.Nodes.Add(treeNode);
35                }
36            }
37        }

接下来增加一个Button来取值吧，看我们取到的值对不。

    <ext:Button ID="Button1" runat="server" Text="Submit">
2<AjaxEvents>
3    <Click OnEvent="OutValue"></Click>
4</AjaxEvents>
5    </ext:Button>

其实这些代码在整理完成后就很少了，　我在这里还是把它分段说明，同时也希望大家在看别人代码时注意下他们写的是否是自己测试通过的。好了就这么多了。有需要引用的朋友请注明出处！

  1<%@ Page Language="C#" %>
  2 <%@ Import Namespace="System.Collections.Generic" %>
  3
  4<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.UX" TagPrefix="cc1" %>
  5
  6<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
  7
  8<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  9    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 10
 11<html xmlns="http://www.w3.org/1999/xhtml">
 12<head id="Head1" runat="server">
 13    <title>TreePanel with Async TreeLoader using Page - Coolite Toolkit Examples</title>
 14    
 15    <link href="http://www.cnblogs.com/http://www.cnblogs.com/resources/css/examples.css" rel="stylesheet" type="text/css" />
 16
 17        <script runat="server">
 18            
 19            protected void Page_Load(object sender, EventArgs e)
 20            {
 21                if (!Ext.IsAjaxRequest)
 22                {
 23                    List<object> list = new List<object>
 24                                        {
 25                                            new {text = "1001", value = "1001"},
 26                                            new {text = "1002", value = "1002"},
 27                                            new {text = "1003", value = "1003"}
 28                                        };
 29                    Store1.DataSource = list;
 30                    Store1.DataBind();
 31                }
 32            }
 33
 34        protected void NodeLoad(object sender, NodeLoadEventArgs e)
 35        {
 36            string prefix = e.ExtraParams["prefix"] ?? "";
 37            if (!string.IsNullOrEmpty(e.NodeID))
 38            {
 39                for (int i = 1; i < 6; i++)
 40                {
 41                    AsyncTreeNode asyncNode = new AsyncTreeNode();
 42                    asyncNode.Text = prefix + e.NodeID + i;
 43                    asyncNode.NodeID = e.NodeID + i;
 44                    e.Nodes.Add(asyncNode);
 45                }
 46                for (int i = 6; i < 11; i++)
 47                {
 48                    Coolite.Ext.Web.TreeNode treeNode = new Coolite.Ext.Web.TreeNode();
 49                    treeNode.Text = prefix + e.NodeID + i;
 50                    treeNode.NodeID = e.NodeID + i;
 51                    treeNode.Leaf = true;
 52                    e.Nodes.Add(treeNode);
 53                }
 54            }
 55        }
 56        protected void OutValue(object sender, AjaxEventArgs e) {
 57
 58            string ss = this.ComboTree1.SelectedItem.Value;
 59            string tt = this.ComboTree1.SelectedItem.Text;
 60            Ext.Msg.Alert("", ss+"<<<"+tt).Show();
 61        } 
 62    </script>
 63</head>
 64<body>
 65    <form id="form1" runat="server">
 66        <ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug"  />
 67          <ext:Store runat="server" ID="Store1" >
 68            <Reader>
 69                <ext:JsonReader ReaderID="text">
 70                    <Fields>
 71                        <ext:RecordField Name="text" />
 72                        <ext:RecordField Name="value" />
 73                    </Fields>
 74                </ext:JsonReader>
 75            </Reader>
 76               <Listeners>
 77                     <Load  Handler="load();" />
 78               </Listeners>
 79        </ext:Store>
 80
 81        <h1>TreePanel using PageTreeLoader</h1> 
 82        
 83        <p>Set custom node prefix: </p>
 84        <ext:TextField ID="TextField1" runat="server" Text="Node" />
 85        
 86    <cc1:ComboTree ID="ComboTree1" runat="server" Height="300"  StoreID="Store1" >
 87    <Tree>
 88             <ext:TreePanel 
 89            ID="TreePanel1" 
 90            runat="server" 
 91            Title="Tree" 
 92            AutoHeight="true" 
 93            Border="false">
 94            <Loader>
 95                <ext:PageTreeLoader OnNodeLoad="NodeLoad">
 96                    <BaseParams>
 97                        <ext:Parameter Name="prefix" Value="10" Mode="Raw" />
 98                    </BaseParams>
 99                </ext:PageTreeLoader>
100            </Loader>
101            <Root>
102                <ext:AsyncTreeNode NodeID="0" Text="Root" />
103            </Root>
104        </ext:TreePanel>      
105    </Tree>
106    </cc1:ComboTree>
107     <ext:ComboBox runat="server" ID="ComboBox2">
108        <Items>
109            <ext:ListItem Text="1001" Value="1001" />
110        </Items>
111     </ext:ComboBox>
112          
113    <ext:Button ID="Button1" runat="server" Text="Submit">
114<AjaxEvents>
115    <Click OnEvent="OutValue"></Click>
116</AjaxEvents>
117    </ext:Button>
118    </form>
119    
120    <script type="text/javascript">
121    //<![CDATA[ 
122    var load=function(){
123        <%=ComboTree1.ClientID %>.store = <%=Store1.ClientID %>;
124        }
125         //]]> 
126    </script>
127</body>
128</html>