初始Ext.net(一)
--------------------------------------小插曲------------------------------------------
首先报告一个郁闷了一个早上的问题,官网:http://www.ext.net/
Ext.net现在有1.3 和2.0beta二个版本(之前还有几个版本不做介绍)
Demo对应1.3的地址是http://examples1.ext.net/
对应2.0bata的是http://examples.ext.net/
早上下载了1.3版本的dll,结果看的Demo是2.0的,里面有些标签的属性还是不一样的,拷贝到本地VS里搞了半天运行不了,郁闷了老半天。。
希望新来的同学可以绕开这个弯路,话说http://www.ext.net/ 首页里根本找不到1.3对应的Demo,找了半天才发现的。。。泪目。
-------------------------------------------------------布局-------------------------------------------------
要用EXT.NET搭一套管理系统,首先要做的当然是布局啦最外层的框架,这里可以参照,注意对应的Region标签
附上代码
View Code
<head id="Head1" runat="server"> <title>Viewport with BorderLayout - Ext.NET Examples</title> <script type="text/javascript"> //打开新tab var addTab = function (tabPanel, id, url) { var tab = tabPanel.getComponent(id); if (!tab) { tab = tabPanel.add({ id : id, title : id, closable : true, autoLoad : { showMask : true, url : url, mode : "iframe", maskMsg : "Loading " + url + "..." } }); // tab.on("activate", function () { // var item = MenuPanel1.menu.items.get(id + "_item"); // // if (item) { // MenuPanel1.setSelection(item); // } // }, this); } tabPanel.setActiveTab(tab); } //过滤 var filterTree = function (el, e) { var tree = TreePanel1, text = this.getRawValue(); tree.clearFilter(); if (Ext.isEmpty(text, false)){ return; } if (e.getKey() === Ext.EventObject.ESC) { clearFilter(); } else { var re = new RegExp(".*" + text + ".*", "i"); tree.filterBy(function (node) { return re.test(node.text); }); } }; //清除过滤条件 var clearFilter = function () { var field = TriggerField1, tree = TreePanel1; field.setValue(""); tree.clearFilter(); tree.getRootNode().collapseChildNodes(true); tree.getRootNode().ensureVisible(); }; </script> </head> <body> <ext:ResourceManager ID="ResourceManager1" runat="server" /> <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout"> <Items> <%-- 顶部Logo区域--%> <ext:Panel ID="Panel1" runat="server" Height="50" Region="North" Layout="accordion" BaseCls="x-bubble" Frame="true" StyleSpec="padding-top: 5px;" BodyStyle="padding-left: 8px;color: #0d2a59" Html="<h3>MPS EASY SELECT GUIDE</h3>" /> <%-- 左边菜单栏目--%> <ext:Panel ID="Panel2" runat="server" Title="West" Region="West" Layout="accordion" Width="235" MinWidth="225" MaxWidth="400" Split="true" Collapsible="true"> <Items> <ext:TreePanel ID="TreePanel1" runat="server" Width="300" Height="450" Icon="BookOpen" Title="Catalog" RootVisible="false" AutoScroll="true"> <TopBar> <ext:Toolbar ID="Toolbar1" runat="server"> <Items> <ext:TriggerField ID="TriggerField1" runat="server" EnableKeyEvents="true" EmptyText="Filter"> <Triggers> <ext:FieldTrigger Icon="Clear" /> </Triggers> <Listeners> <%-- <KeyUp Handler="={filterTree}" />--%> <KeyUp Fn="filterTree" Buffer="250" /> <TriggerClick Handler="clearFilter();" /> </Listeners> </ext:TriggerField> <%-- 图标按钮--%> <%-- <ext:SplitButton ID="SplitButton1" runat="server" Icon=Application > <Listeners> </Listeners> </ext:SplitButton>--%> <ext:Button ID="Button1" runat="server" Text="Expand"> <Listeners> <Click Handler="#{TreePanel1}.expandAll();" /> </Listeners> </ext:Button> <ext:Button ID="Button2" runat="server" Text="Collapse"> <Listeners> <Click Handler="#{TreePanel1}.collapseAll();" /> </Listeners> </ext:Button> </Items> </ext:Toolbar> </TopBar> <Root> <ext:TreeNode Text="Composers" Expanded="true"> <Nodes> <ext:TreeNode Text="Beethoven" Icon="UserGray"> <Nodes> <ext:TreeNode Text="Concertos"> <Nodes> <ext:TreeNode Text="No. 1 - C" Icon="Music"> <Listeners> <Click Handler="addTab(#{TabPanel1}, 'defualt1', 'default1.aspx');" /> </Listeners> </ext:TreeNode> <ext:TreeNode Text="No. 2 - B-Flat Major" Icon="Music"> <Listeners> <Click Handler="addTab(#{TabPanel1}, 'link', 'link.aspx');" /> </Listeners> </ext:TreeNode> <ext:TreeNode Text="No. 3 - C Minor" Icon="Music" /> <ext:TreeNode Text="No. 4 - G Major" Icon="Music" /> <ext:TreeNode Text="No. 5 - E-Flat Major" Icon="Music" /> </Nodes> </ext:TreeNode> <ext:TreeNode Text="Quartets"> <Nodes> <ext:TreeNode Text="Six String Quartets" Icon="Music" /> <ext:TreeNode Text="Three String Quartets" Icon="Music" /> <ext:TreeNode Text="Grosse Fugue for String Quartets" Icon="Music" /> </Nodes> </ext:TreeNode> <ext:TreeNode Text="Sonatas"> <Nodes> <ext:TreeNode Text="Sonata in A Minor" Icon="Music" /> <ext:TreeNode Text="sonata in F Major" Icon="Music" /> </Nodes> </ext:TreeNode> <ext:TreeNode Text="Symphonies"> <Nodes> <ext:TreeNode Text="No. 1 - C Major" Icon="Music" /> <ext:TreeNode Text="No. 2 - D Major" Icon="Music" /> <ext:TreeNode Text="No. 3 - E-Flat Major" Icon="Music" /> <ext:TreeNode Text="No. 4 - B-Flat Major" Icon="Music" /> <ext:TreeNode Text="No. 5 - C Minor" Icon="Music" /> <ext:TreeNode Text="No. 6 - F Major" Icon="Music" /> <ext:TreeNode Text="No. 7 - A Major" Icon="Music" /> <ext:TreeNode Text="No. 8 - F Major" Icon="Music" /> <ext:TreeNode Text="No. 9 - D Minor" Icon="Music" /> </Nodes> </ext:TreeNode> </Nodes> </ext:TreeNode> <ext:TreeNode Text="Brahms" Icon="UserGray"> <Nodes> <ext:TreeNode Text="Concertos"> <Nodes> <ext:TreeNode Text="Violin Concerto" Icon="Music" /> <ext:TreeNode Text="Double Concerto - A Minor" Icon="Music" /> <ext:TreeNode Text="Piano Concerto No. 1 - D Minor" Icon="Music" /> <ext:TreeNode Text="Piano Concerto No. 2 - B-Flat Major" Icon="Music" /> </Nodes> </ext:TreeNode> <ext:TreeNode Text="Quartets"> <Nodes> <ext:TreeNode Text="Piano Quartet No. 1 - G Minor" Icon="Music" /> <ext:TreeNode Text="Piano Quartet No. 2 - A Major" Icon="Music" /> <ext:TreeNode Text="Piano Quartet No. 3 - C Minor" Icon="Music" /> <ext:TreeNode Text="Piano Quartet No. 3 - B-Flat Minor" Icon="Music" /> </Nodes> </ext:TreeNode> <ext:TreeNode Text="Sonatas"> <Nodes> <ext:TreeNode Text="Two Sonatas for Clarinet - F Minor" Icon="Music" /> <ext:TreeNode Text="Two Sonatas for Clarinet - E-Flat Major" Icon="Music" /> </Nodes> </ext:TreeNode> <ext:TreeNode Text="Symphonies"> <Nodes> <ext:TreeNode Text="No. 1 - C Minor" Icon="Music" /> <ext:TreeNode Text="No. 2 - D Minor" Icon="Music" /> <ext:TreeNode Text="No. 3 - F Major" Icon="Music" /> <ext:TreeNode Text="No. 4 - E Minor" Icon="Music" /> </Nodes> </ext:TreeNode> </Nodes> </ext:TreeNode> <ext:TreeNode Text="Mozart" Icon="UserGray"> <Nodes> <ext:TreeNode Text="Concertos"> <Nodes> <ext:TreeNode Text="Piano Concerto No. 12" Icon="Music" /> <ext:TreeNode Text="Piano Concerto No. 17" Icon="Music" /> <ext:TreeNode Text="Clarinet Concerto" Icon="Music" /> <ext:TreeNode Text="Violin Concerto No. 5" Icon="Music" /> <ext:TreeNode Text="Violin Concerto No. 4" Icon="Music" /> </Nodes> </ext:TreeNode> </Nodes> </ext:TreeNode> </Nodes> </ext:TreeNode> </Root> <BottomBar> <ext:StatusBar ID="StatusBar1" runat="server" AutoClear="1500" /> </BottomBar> <Listeners> <Click Handler="#{StatusBar1}.setStatus({text: 'Node Selected: <b>' + node.text + '<br />', clear: true});" /> <ExpandNode Handler="#{StatusBar1}.setStatus({text: 'Node Expanded: <b>' + node.text + '<br />', clear: true});" Delay="30" /> <CollapseNode Handler="#{StatusBar1}.setStatus({text: 'Node Collapsed: <b>' + node.text + '<br />', clear: true});" /> </Listeners> </ext:TreePanel> <%-- 左边菜单选项栏--%> <%-- <ext:Panel ID="Panel4" runat="server" Title="Settings" Border="false" Padding="6" Icon="FolderWrench" Html="Some settings in here" />--%> </Items> </ext:Panel> <%-- 中间内容区域--%> <ext:TabPanel ID="TabPanel1" runat="server" Region="Center"> <Items> <ext:Panel ID="Panel5" runat="server" Title="Center" Border="false" Padding="6" Html="<h1>Viewport with BorderLayout</h1>" /> <ext:Panel ID="Panel6" runat="server" Title="Close Me" Closable="true" Border="false" Padding="6" Html="Closeable Tab" /> </Items> </ext:TabPanel> </Items> </ext:Viewport> </body>
整个框架可以分成三个部分。
1.上(LOGO)
logo的实现方式只是一个简单的panel控件,不带titel属性。
2.左(菜单)
树形菜单也十分简单,具体对应实现也只是简单的JS+封装好的控件使用
3.中(内容)
中间内容区域还可以继续布局,这边我使用了RowLayout,行布局。