FineUI（开源版）基于 ExtJS 的开源 ASP.NET 控件库。
1 using System; 2 using System.Collections.Generic; 3 using System.Text; 4 using System.Collections.ObjectModel; 5 using System.Web.UI; 6 using System.Collections; 7 8 namespace FineUI 9 {10 /// 11 /// 控件集合，继承自Collection 12 /// 13 public class BaseCollection : Collection where T : ControlBase14 {15 private ControlBase _parent;16 private string _groupName;17 18 /// 19 /// 构造函数20 /// 21 /// 父控件实例22 public BaseCollection(ControlBase parentControl)23 {24 _parent = parentControl;25 _groupName = Guid.NewGuid().ToString();26 }27 28 /// 29 /// 向集合中插入一个元素30 /// 31 /// 32 /// 33 protected override void InsertItem(int index, T item)34 {35 item.CollectionGroupName = _groupName;36 item.RenderWrapperNode = false;37 38 int startIndex = GetStartIndex();39 _parent.Controls.AddAt(startIndex + index, item);40 41 base.InsertItem(index, item);42 }43 44 /// 45 /// 删除集合中的一个元素46 /// 47 /// 48 protected override void RemoveItem(int index)49 {50 int startIndex = GetStartIndex();51 _parent.Controls.RemoveAt(startIndex + index);52 53 base.RemoveItem(index);54 }55 56 /// 57 /// 清空集合58 /// 59 protected override void ClearItems()60 {61 int startIndex = GetStartIndex();62 // We should only remove this collection related controls63 // Note we must loop from the last element(Count-1) to the first one(0)64 for (int i = startIndex + Count - 1; i >= startIndex; i--)65 {66 _parent.Controls.RemoveAt(i);67 }68 69 base.ClearItems();70 }71 72 73 /// 74 /// 获取类型 T 在父控件子集中的开始位置75 /// 76 /// 
1 function onReady() { 2 var btnExpandAll = Ext.getCmp(IDS.btnExpandAll); 3 var btnCollapseAll = Ext.getCmp(IDS.btnCollapseAll); 4 var mainMenu = Ext.getCmp(IDS.mainMenu); 5 var mainTabStrip = Ext.getCmp(IDS.mainTabStrip); 6 var windowSourceCode = Ext.getCmp(IDS.windowSourceCode); 7 8 function getExpandedPanel() { 9 var panel = null; 10 mainMenu.items.each(function (item) { 11 if (!item.collapsed) { 12 panel = item; 13 } 14 }); 15 return panel; 16 } 17 18 // 点击全部展开按钮 19 btnExpandAll.on('click', function () { 20 if (IDS.menuType == "menu") { 21 mainMenu.expandAll(); 22 } else { 23 var expandedPanel = getExpandedPanel(); 24 if (expandedPanel) { 25 expandedPanel.items.itemAt(0).expandAll(); 26 } 27 } 28 }); 29 30 // 点击全部折叠按钮 31 btnCollapseAll.on('click', function () { 32 if (IDS.menuType == "menu") { 33 mainMenu.collapseAll(); 34 } else { 35 var expandedPanel = getExpandedPanel(); 36 if (expandedPanel) { 37 expandedPanel.items.itemAt(0).collapseAll(); 38 } 39 } 40 }); 41 42 function createToolbar() { 43 44 // 由工具栏上按钮获得当前标签页中的iframe节点 45 function getCurrentIframeNode(button) { 46 // 注意：button.ownerCt 是工具栏，button.ownerCt.ownerCt 就是当前激活的标签页。 47 return Ext.DomQuery.selectNode('iframe', button.ownerCt.ownerCt.el.dom); 48 } 49 50 // 动态创建按钮 51 var sourcecodeButton = new Ext.Button({ 52 text: "源代码", 53 type: "button", 54 cls: "x-btn-text-icon", 55 icon: "./icon/page_white_code.png", 56 listeners: { 57 click: function (button, e) { 58 windowSourceCode.x_show('./common/source.aspx?files=' + getCurrentIframeNode(button).attributes['src'].value, '源代码'); 59 e.stopEvent(); 60 } 61 } 62 }); 63 64 var openNewWindowButton = new Ext.Button({ 65 text: '新标签页中打开', 66 type: "button", 67 cls: "x-btn-text-icon", 68 icon: "./icon/tab_go.png", 69 listeners: { 70 click: function (button, e) { 71 window.open(getCurrentIframeNode(button).src, "_blank"); 72 e.stopEvent(); 73 } 74 } 75 }); 76 77 var refreshButton = new Ext.Button({ 78 text: '刷新', 79 type: "button", 80 cls: "x-btn-text-icon", 81 icon: "./icon/reload.png", 82 listeners: { 83 click: function (button, e) { 84 getCurrentIframeNode(button).contentWindow.location.reload(); //.replace(href); 85 e.stopEvent(); 86 } 87 } 88 }); 89 90 return new Ext.Toolbar({ 91 items: ['->', sourcecodeButton, '-', refreshButton, '-', openNewWindowButton] 92 }); 93 } 94 95 96 // 初始化主框架中的树(或者Accordion+Tree)和选项卡互动，以及地址栏的更新 97 // 1. treeMenu, 主框架中的树控件实例，或者内嵌树控件的手风琴控件实例 98 // 2. mainTabStrip, 主框架中的选项卡控件实例 99 // 3. tbarCallback, 在每个选项卡上创建工具栏的回调函数，如果不需要选项卡工具栏，可以设置此值为null100 // 4. updateLocationHash, 切换选项卡时是否在top.location.hash记录当前页面的地址101 X.util.initTreeTabStrip(mainMenu, mainTabStrip, createToolbar, true);102 103 104 // 公开添加示例标签页的方法105 window.addExampleTab = function (id, url, text, icon) {106 X.util.addMainTab(mainTabStrip, id, url, text, icon);107 };108 109 window.removeActiveTab = function () {110 var activeTab = mainTabStrip.getActiveTab();111 mainTabStrip.removeTab(activeTab.id);112 };113 114 }