用Coolite有段时间了,项目也做了几个,总体来说功能还是很不错。现有拿出TreePanel右键功能菜单和大家交流下。
功能如上图:
要点。1、TreePanel右键菜单显示与后台交互。
2、win窗口数据显示与取值
3、确定删除操作
现在具体功能详细说明下。
1、右键功能菜单
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
1
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
需要注意 <Click Handler="Coolite.AjaxMethods.del(this.parentMenu.node.id,'del');" /> 是Coolite 异步调用1-2 TreePanel 代码
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<ext:FitLayout ID="FitLayout1" runat="server">
<ext:TreePanel ID="TreePanel1" runat="server" AutoShow="true" Header="false"
Title="Tree" AutoHeight="true" Border="false" ContextMenuID="cmenu"
>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:ToolbarFill/>
<ext:ToolbarButton ID="ToolbarButton1" runat="server" IconCls="icon-expand-all">
<Listeners>
<Click Handler="#{TreePanel1}.root.expand(true);" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="ToolTip1" IDMode="Ignore" runat="server" Html="Expand All" />
</ToolTips>
</ext:ToolbarButton>
<ext:ToolbarButton ID="ToolbarButton2" runat="server" IconCls="icon-collapse-all">
<Listeners>
<Click Handler="#{TreePanel1}.root.collapse(true);" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="ToolTip2" IDMode="Ignore" runat="server" Html="Collapse All" />
</ToolTips>
</ext:ToolbarButton>
</Items>
</ext:Toolbar>
</TopBar>
<Listeners>
<ContextMenu Handler=" #{cmenu}.node=node;#{cmenu}.showAt(e.getPoint());" />
<BeforeLoad Fn="nodeLoad" />
<Click Handler="addTab(node);" />
</Listeners>
<Root>
<ext:AsyncTreeNode NodeID="0" Text="节点管理" />
</Root>
</ext:TreePanel>
</ext:FitLayout>
右键功能菜单调用<ContextMenu Handler=" #{cmenu}.node=node;#{cmenu}.showAt(e.getPoint());" />
1-3 Tree 数据源绑定(后台代码)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack && !Ext.IsAjaxRequest)
{
AsyncTreeNode atn = new AsyncTreeNode();
atn.NodeID = "0";
atn.Text = "功能菜单";
atn.Expanded = true;
NodeLoad("0");
}
}
#region 0、数据源绑定
[AjaxMethod]
public string NodeLoad(string nodeID)
{
return TreeJson;//返回Tree的JSon数据
/* 返回数据如下格式:
{result:"[\n{id:'10',text:'部室主任',parentID:'7',path:'7|10|',url:'Role/Role_list.aspx',openType:'1',type:'1',orderNum:'0',pass:'1',mark:'2222222222222222',leaf:true},\n{id:'14',text:'开发',parentID:'7',path:'7|14|',url:'开发',openType:'0',type:'10000',orderNum:'0',pass:'1',mark:'开发',leaf:true}]"}
*/
}
#endregion
2、win窗口 设计
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
1
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
34
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
35
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
36
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
37
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
38
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
39
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
40
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
41
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
42
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
43
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
44
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
45
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
46
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
47
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
48
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
49
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
50
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
51
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
52
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
53
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
54
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
55
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
56
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
57
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
58
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
59
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
60
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
61
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
62
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
63
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
64
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
65
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2、锁定更新区域:更新时锁定操作区域<EventMask CustomTarget="={#{Window1}.body}" Target="CustomTarget" ShowMask="true" MinDelay="20" />
3、表单验证: MonitorValid="true" 是一个FromPanel全局验证。我们只需要在需要验证的控件上添加BlankText="节点名称不能为空!" AllowBlank="false",在按钮时就能触发全局表单验证。当然如你想个性化验证,只需要在按钮上添加 <Click Handler="if(!#{txf_TreeName}.validate()){Ext.Msg.alert('提示','节点名称不能为空!'); return false;}" /> 也可以验证。
TreePanel上右键功能操作Cs代码
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
[AjaxMethod]//win 显示
public void readInfo(string id, string action)
{
this.Window1.Show();
}
#region 0-0 操作判断
[AjaxMethod]//确定、删除
public void del(string id, string action)
{
switch (action)
{
case "del":
Ext.Msg.Confirm("提示", "是否确定删除?", new MessageBox.ButtonsConfig
{
Yes = new MessageBox.ButtonConfig
{
Handler = "Coolite.AjaxMethods.TreeNote_Del(" + id + ");",
Text = "确 定"
},
No = new MessageBox.ButtonConfig
{
Text = "取 消"
}
}).Show();
break;
}
}
#endregion
#region 2、删除操作
[AjaxMethod]
public void TreeNote_Del(string treeNote)
{
int dt = TD.ArrayUpdata(treeNote, " set pass=4");
if (dt == 1)
{
Ext.Msg.Alert("提示", "更新成功!").Show();
Ext.DoScript(TreePanel1.ClientID + ".root.reload();");
}
else Ext.Msg.Alert("提示", "更新失败!").Show();
}
#endregion
基本上就是这些代码。欢迎大家提出更好的建议!