EXT.NET的学习笔记(一)：布局构架

最新推荐文章于 2019-07-11 10:18:47 发布
最新推荐文章于 2019-07-11 10:18:47 发布
阅读量94 收藏
点赞数
文章标签： xhtml ui javascript ViewUI
原文链接：http://www.cnblogs.com/rjf1979/archive/2011/03/31/2000783.html
版权
说起布局构架，大家都会想到用 panel，在EXT.NET里就有 ext.Panel 这个控件，是个布局的好利器，但光这个还不够，有时考虑到布局时能自适应全局的尺寸，就要用到ext.ViewPort，接下来我们就举个例子，先让大家熟悉熟悉：
< ext:Viewport  runat ="server"  Layout ="border" >
     < Items >
            < ext:Panel  runat ="server"  Region ="North"   />
            < ext:Panel  runat ="server"  Region ="West"   />
     </ Items >
</ ext:Viewport >

 这个是简单的布局模式，注意的是PANEL里，如果你没设定Layout属性值，那必需要设置高和宽，否则是无法看到布局显示效果，在每次插入子控件时，必须要items包裹着，具体大家可以自己去练练，里面的布局有很多属性，我贴出官方主页的布局源代码，大家可以更仔细的看明白，由于CODE无法传递，故直接粘帖上来！

还有在每次起页面时，要首页加入 ext:ResourceManager 资源管控件！

 

 

 

 

<%@ Page Language="C#" %>

<%@ Register Src="~/Code/UI/CommentsWindow.ascx" TagName="CommentWindow" TagPrefix="exm" %>

<%@ Import Namespace="Ext.Net.Utilities"%>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Import Namespace="Ext.Net.Examples" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.ResourceManager1.DirectEventUrl = this.Request.Url.AbsoluteUri;
            
            // Reset the Session Theme on Page_Load.
            // The Theme switcher will persist the current theme only
            // until the main Page is refreshed.
            this.Session["Ext.Net.Theme"] = Ext.Net.Theme.Default;

            this.TriggerField1.Focus();
        }
    }

    protected void GetExamplesNodes(object sender, NodeLoadEventArgs e)
    {
        if (e.NodeID == "root")
        {
            var nodes = this.Page.Cache["ExamplesTreeNodes"] as Ext.Net.TreeNodeCollection;

            if (nodes == null)
            {
                nodes = UIHelpers.BuildTreeNodes(false);
                this.Page.Cache.Add("ExamplesTreeNodes", nodes, null, DateTime.Now.AddHours(1), System.Web.Caching.Cache.NoSlidingExpiration, CacheItemPriority.Default, null);
            }

            e.Nodes = nodes;
        }
    }

    [DirectMethod]
    public string GetThemeUrl(string theme)
    {
        Theme temp = (Theme)Enum.Parse(typeof(Theme), theme);

        this.Session["Ext.Net.Theme"] = temp;

        return temp == Ext.Net.Theme.Default ? "Default" : this.ResourceManager1.GetThemeUrl(temp);
    }
    
    [DirectMethod]
    public static int GetHashCode(string s)
    {
        return Math.Abs("/Examples".ConcatWith(s).ToLower().GetHashCode());
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head runat="server">
    <title>Ext.NET Examples - Open Source ASP.NET Web Controls with Ext JS</title>
    <ext:ResourcePlaceHolder runat="server" Mode="Script" />
    <ext:ResourcePlaceHolder runat="server" Mode="Style" />
    <link rel="stylesheet" type="text/css" href="resources/css/main.css" />
    <script type="text/javascript" src="resources/js/main.js"></script>
</head>
<body>
    <ext:ResourceManager
        ID="ResourceManager1"
        runat="server"
        InitScriptMode="Linked"
        DirectMethodNamespace="X"
        IDMode="Explicit"
        />
    
    <ext:History ID="History1" runat="server">
        <Listeners>
            <Change Fn="change" />
        </Listeners>
    </ext:History>
    
    <ext:Viewport runat="server" Layout="border">
        <Items>
            <ext:Panel
                runat="server"
                Header="false"
                Region="North"
                Border="false"
                Html="<div id='header' style='height:32px;'><a style='float:right;margin-right:10px;' href='http://www.ext.net/' target='_blank'><img style='margin-top: 4px;' src='resources/images/ext_net_badge.gif'/></a><div class='api-title'>Ext.NET Examples Explorer (1.0 RC)</div></div>"
                />
            <ext:Panel
                runat="server"
                Region="West"
                Layout="Fit"
                Width="240"
                Header="false"
                Collapsible="true"
                Split="true"
                CollapseMode="Mini"
                Margins="0 0 4 4"
                Border="false">
                <Items>
                    <ext:TreePanel
                        ID="exampleTree"
                        runat="server"
                        Header="false"
                        AutoScroll="true"
                        Lines="false"
                        UseArrows="true"
                        CollapseFirst="false"
                        ContainerScroll="true"
                        RootVisible="false">
                        <TopBar>
                            <ext:Toolbar runat="server">
                                <Items>
                                    <ext:TriggerField
                                        ID="TriggerField1"
                                        runat="server"
                                        EnableKeyEvents="true"
                                        Width="150"
                                        EmptyText="Filter...">
                                        <Triggers>
                                            <ext:FieldTrigger Icon="Clear" HideTrigger="true" />
                                        </Triggers>
                                        <Listeners>
                                            <KeyUp Fn="keyUp" Buffer="100" />
                                            <TriggerClick Fn="clearFilter" />
                                            <SpecialKey Fn="filterSpecialKey" />
                                        </Listeners>
                                    </ext:TriggerField>
                                            
                                    <ext:ToolbarFill runat="server" />
                                            
                                    <ext:Button ID="Button1" runat="server" Icon="Cog" ToolTip="Options">
                                        <Menu>
                                            <ext:Menu runat="server">
                                                <Items>
                                                    <ext:MenuItem runat="server" Text="Expand All" IconCls="icon-expand-all">
                                                        <Listeners>
                                                            <Click Handler="#{exampleTree}.root.expand(true);" />
                                                        </Listeners>
                                                    </ext:MenuItem>
                                                            
                                                    <ext:MenuItem runat="server" Text="Collapse All" IconCls="icon-collapse-all">
                                                        <Listeners>
                                                            <Click Handler="#{exampleTree}.root.collapse(true);" />
                                                        </Listeners>
                                                    </ext:MenuItem>
                                                    <ext:MenuSeparator runat="server" />
                                                    <ext:MenuItem runat="server" Text="Theme" Icon="Paintcan">
                                                        <Menu>
                                                            <ext:Menu runat="server">
                                                                <Items>
                                                                    <ext:CheckMenuItem ID="MenuItem1" runat="server" Text="Default" Group="theme" Checked="true" />
                                                                    <ext:CheckMenuItem ID="MenuItem2" runat="server" Text="Gray" Group="theme" />
                                                                    <ext:CheckMenuItem ID="MenuItem4" runat="server" Text="Slate" Group="theme" />
                                                                    <ext:CheckMenuItem ID="MenuItem3" runat="server" Text="Access" Group="theme" />
                                                                </Items>
                                                                <Listeners>
                                                                    <ItemClick Handler="X.GetThemeUrl(menuItem.text,{
                                                                        success : function (result) {
                                                                            Ext.net.ResourceMgr.setTheme(result);
                                                                            ExampleTabs.items.each(function (el) {
                                                                                if (!Ext.isEmpty(el.iframe)) {
                                                                                    if (el.getBody().Ext) {
                                                                                        el.getBody().Ext.net.ResourceMgr.setTheme(result, menuItem.text.toLowerCase());
                                                                                    }
                                                                                }
                                                                            });
                                                                        }
                                                                    });" />
                                                                </Listeners>
                                                            </ext:Menu>
                                                        </Menu>
                                                    </ext:MenuItem>
                                                </Items>
                                            </ext:Menu>
                                        </Menu>
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                        <Root>
                            <ext:AsyncTreeNode Text="Examples" NodeID="root" Expanded="true">
                                <CustomAttributes>
                                    <ext:ConfigItem Name="loaded" Value="false" Mode="Raw" />
                                </CustomAttributes>
                            </ext:AsyncTreeNode>
                        </Root>
                        <Loader>
                            <ext:PageTreeLoader
                                RequestMethod="GET"
                                OnNodeLoad="GetExamplesNodes"
                                PreloadChildren="true">
                                <EventMask ShowMask="true" Target="Parent" Msg="Loading..." />
                                <BaseAttributes>
                                    <ext:Parameter Name="singleClickExpand" Value="true" Mode="Raw" />
                                    <ext:Parameter Name="loaded" Value="true" Mode="Raw" />
                                </BaseAttributes>
                            </ext:PageTreeLoader>
                        </Loader>
                        <Listeners>
                            <Click Handler="if (node.isLeaf()) { e.stopEvent(); loadExample(node.attributes.href, node.id, node.text); }" />
                        </Listeners>                                                           
                    </ext:TreePanel>
                </Items>
            </ext:Panel>
            <ext:TabPanel
                ID="ExampleTabs"
                runat="server"
                Region="Center"
                Margins="0 4 4 0"
                EnableTabScroll="true"
                MinTabWidth="85">
                <Items>
                    <ext:Panel
                        ID="tabHome"
                        runat="server"
                        Title="Home"
                        IconCls="icon-application">
                        <AutoLoad Mode="IFrame" Url="Home/" ShowMask="false" />
                    </ext:Panel>
                </Items>
                <Listeners>
                    <TabChange Fn="addToken" />
                </Listeners>
                <Plugins>
                    <ext:TabCloseMenu runat="server" />
                </Plugins>
            </ext:TabPanel>
        </Items>
    </ext:Viewport>
    
    <ext:Window
        ID="LinkWindow"
        runat="server"
        Modal="true"
        Hidden="true"
        Icon="Link"
        Layout="absolute"
        DefaultButton="exampleLink"
        Width="400"
        Height="110"
        Title="Direct Link"
        Closable="false"
        Resizable="false">
        <Items>
            <ext:TextField
                ID="exampleLink"
                runat="server"
                Width="364"
                Cls="dlText"
                X="10"
                Y="10"
                SelectOnFocus="true"
                ReadOnly="true"
                />            
        </Items>
        <Listeners>
            <Show Handler="exampleLink.setValue(this.exampleName);" />
        </Listeners>
        <Buttons>
            <ext:Button
                runat="server"
                Text=" Open"
                Icon="ApplicationDouble">
                <Listeners>
                    <Click Handler="window.open(LinkWindow.exampleName);" />
                </Listeners>
                <ToolTips>
                    <ext:ToolTip runat="server" Title="Open Example in the separate window" />
                </ToolTips>
            </ext:Button>
            <ext:Button
                runat="server"
                Text=" Open (Direct)"
                Icon="ApplicationGo">
                <Listeners>
                    <Click Handler="window.open(LinkWindow.exampleUrl, '_blank');" />
                </Listeners>
                <ToolTips>
                    <ext:ToolTip runat="server" Title="Open Example in the separate window using a direct link" />
                </ToolTips>
            </ext:Button>
            <ext:Button runat="server" Text="Close">
                <Listeners>
                    <Click Handler="this.findParentByType('window').hide(null);" />
                </Listeners>
            </ext:Button>
        </Buttons>
    </ext:Window>
    
    <exm:CommentWindow runat="server" />
    

</body>
</html>

 

 

 

转载于:https://www.cnblogs.com/rjf1979/archive/2011/03/31/2000783.html

weixin_30566149
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ext.Net学习笔记之button小结
01-02
1.触发客户端事件 代码如下:<ext ID=”Button1″ runat=”server” Text=”快点我”>　<Listeners>　”Greet()”></Click>　</Listeners></ext> [removed]function Greet() {alert(“Hello World!”);}...
【ASP.NET编程知识】Ext.Net学习笔记之button小结.docx
最新发布
05-20
【ASP.NET编程知识】Ext.Net学习笔记之button小结.docx
【Ext.Net学习笔记】02：Ext.Net用法概览、Ext.Net MessageBus用法、Ext.Net布局
05-27 171
Ext.Net用法概览 Ext.Net还是很强大，如果运用熟练可以极大的提高编程效率。如果你也要学习Ext.Net，原文博主推荐书籍：《Ext.Net Web 应用程序开发教程》，是英文的，有基础的可以看下，可以百度到PDF文档的。 Ext.Net与ExtJS代码比较 上一篇中我们创建了一个使用Ext.Net创建了一个window窗口，代码非常简单： <ext:W...
ext.net 后台方法调用
蚂蚁筑巢
08-19 3089
大家知道EXT.NET可以和MVC一起使用，就没有CS页，全部靠JS或者控制域来操作。 另外一种是有CS页面，直接可以后台操作。下面我们就先来说一下直接后台操作的一些注意事项： 首先我们前面提到每个页面都必须添加一个extHT" /> 才能使用EXT.NET。我相信很多人和我一样，不知道这个有什么作用。看到看到我给ResourceManager的名称空间是extHT   的这个名称空间。 当
Ext.Net 1.2.0_分析 Ext.Net.ResourceHandler 资源处理程序
weixin_33734785的博客
12-21 137
本文内容 概述 Ext.Net.ResourceHandler 资源处理程序 参考资料 概述 页面依赖 Ext.Net. ResourceManager 控件初始化其资源，将 CSS 和脚本的引用和内容加入到页面。 若在页面引用 Ext.Net. ResourceManager 控件，如下所示： 那么，页面呈现的内...
ext.net 开发学习——常用布局（八）
weixin_30814329的博客
07-11 121
Ext.Net 官网Demo 有几种布局http://examples.ext.net/ 因需求不同，布局也同样多种多样，现整理部分常用的布局+源码 源码： <form id="form1" runat="server"> <ext:ResourceManager ID="RMEmployeeInfos" runat="server" /> ...
Ext.Net中，第三种AnchorLayout布局方式。
weixin_30648587的博客
05-13 92
（近期会连续更新有关Ext.Net 控件的一些资料，与大家分享，有兴趣或者最近也在研究这方面知识的朋友可以加关注！！！） 在Ext.Net中一共有14种布局方式，下面我会一一介绍。 第三种：AnchorLayout布局方式。 AnchorLayout布局方式也称为：锚布局方式。 这种布局方式比较简单！ 它只支持用AnchorHorizontal（锚水平）和AnchorVerti...
Ext.NET 3.1破解版
01-17
Ext.NET 3.1破解版,仅供参考和学习!
examples.ext.net-5.zip
10-12
ext.net实例代码，应该是5.2版的，webform的，估计也是绝版了，珍惜吧大家。 ext.net实例代码，应该是5.2版的，webform的，估计也是绝版了，珍惜吧大家。
Ext.Net控件中，常用的三种界面控件简单介绍。
weixin_30326745的博客
05-10 126
（近期会连续更新有关Ext.Net 控件的一些资料，与大家分享，有兴趣或者最近也在研究这方面知识的朋友可以加关注！！！） 今天给大家介绍一下常用的三种界面控件。 1.Viewport控件，我们把它称之为：视图界面。 2.Panel控件，我们把它称之为：面板。 3.Window控件，我们把它称之为：窗口。 大家先看一下代码： 页面源码： <ext:ResourceM...
EXT.NET登录界面布局
10-09
非常简洁漂亮的EXT.NET登录界面布局
ExtNet第二篇
daxun0795的博客
12-16 148
接下来演示第一个EXTNET使用案例,在演示之前请容我首先先介绍EXTNET中最基本的几个标记元素： 　　　　　ext:ResourceManager ： 很明示是代码标记是管理EXTNET中的所有代码，如果没有此标记，EXTNET代码将不会运行。 　　　　 ext:Store : 存储作用　　　　　 　　　　　ext:GridPanel: 显示表格。 　　　　　注意...
初识Ext.NET
weixin_34162695的博客
05-07 126
以前从没想过会用到ExtJS，总是对它有着一种反感：认为脚本资源大，执行脚本多，性能差等等。最近因为一个项目使用到了，就用上了。相对JQuery，ExtJS没有那么方便灵活，但是其界面美观，功能实用，可以节约不少开发时间。玩ExtJS，就感觉是在玩配置，也许Java程序员会习惯些。熟悉那些配置无疑也是一件麻烦而且棘手的事情，稍不留心，就得为自己的失误埋单。虽然网上有些设计器，但是大都满足不了需求。...
Ext.Net-GridPanel基础使用方法一
weixin_34396103的博客
05-12 96
Step1.在页面加入ResourceManager控件    &lt;ext:ResourceManager ID="ResourceManager1" runat="server"&gt;    &lt;/ext:ResourceManager&gt;Step2.编写Ext 数据源    &lt;ext:Store ID="store" runat="server"&
Ext.NET-布局
Guog
05-12 1026
前一篇介绍了Ext.NET基础知识，并对Ext.NET的布局进行了简要的说明，本文中我们用一个完整的示例代码来看看Ext.NET的布局。
Ext.Net 1.2.0_Ext.Net.ResourceManage 如何初始化页面资源
weixin_34248487的博客
12-19 129
本文内容 引入——对比页面在使用或不使用 Ext.Net 控件的区别     没引用 Ext.Net     引用了 Ext.Net Ext.Net.XControl 和 Ext.Net.ResourceManager 修改记录   引入——对比页面在使用或不使用 Ext.Net 控件的区别 本文旨在初步分析 Ext.Net 初始化的过程。也就是，不...
EXT.NET的布局方式
小K的大师兄
12-08 2305
一、BorderLayout布局方式 BorderLayout布局方式：边框式布局方式，他是通过设置控件的Region属性来确定控件的布局
EXT.NET(二十五)综合布局
数据库天地
02-09 145
先上图吧： 代码： &lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="ZeQuoteDetail.aspx.cs" Inherits="ERP_EXT_ZeQuoteDetail" %&gt; &lt;%@ Register Assembly="Ext.Net" Namespace="Ext.Net
Ext.Net 布局
HelloLWei的专栏
03-01 1616
Panel布局类有10种：容器布局，自适应布局，折叠布局，卡片式布局，锚点布局，绝对位置布局，表单布局，列布局，表格布局，边框布局       1，Ext.layout.ContainerLayout 容器布局       提供容器作为布局的基础逻辑，通常会被扩展而不通过new 关键字直接创建，一般作为默认布局存在           2，Ext.layout.FitLayout 自适应布局
ext.net 5.3
05-05
Ext.NET 5.3 是一个基于 ASP.NET Core 的 Web 应用程序开发框架，它提供了丰富的 UI 组件和工具，可帮助开发人员快速构建出现代化的 Web 应用程序。Ext.NET 5.3 还支持跨平台开发，可以在 Windows、Linux 和 macOS ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值