初始Ext.net(一)

最新推荐文章于 2024-05-21 14:15:14 发布
最新推荐文章于 2024-05-21 14:15:14 发布
阅读量77 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/xichen/archive/2012/04/16/2451728.html
版权

--------------------------------------小插曲------------------------------------------

首先报告一个郁闷了一个早上的问题，官网：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,行布局。

转载于:https://www.cnblogs.com/xichen/archive/2012/04/16/2451728.html

weixin_30362083
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ext.Net 1.x_Ext.Net.常用控件属性集合
德仔
09-14 5154
转自：http://blog.csdn.net/lulu_jiang/article/category/669748  Ext_数字输入框_Ext.form.NumberField: /* Ext.form.NumberField独有配置表: allowDecimals             Boolean             是否允许输入小数(默认true) allo
Ext中的iconCls以及baseCls
fenghaoo的博客
05-12 446
:idea: 1：给button加icon Css: .user { background:url(../Teacher/Images/User.gif) no-repeat 1px 2px !important; } EXT: new Ext.Button({ text:'User', iconCl...
Ext frame=true与baseCls=x-plain共用出现问题
ghl116的专栏
11-29 140
在Ext中，一般会在Window中嵌入一个FormPanel，为了使得FormPanel与window的背景颜色一致，需要设置formPanel的属性为baseCls=x-plain.   最近在做项目过程中，Window设置了CardLayout布局，有一个formPanel设置了columnLayout，然后同时设置了 frame=true与baseCls=x-plain属性，结果切换到那...
EXT.NET循环并且选中TreePanel的某些值
蚂蚁筑巢
10-09 1034
之前公司项目做了一个这个，不过我发现有个BUG，就是只能选到2级，然后在下级就不能选中了。不过我这人就是倔脾气来了就非要弄出来。可能一下方法不太完美，但是可以实现，欢迎大家提供更好的方法以及建议。 先说一说前台代码： 先是一个ext:DropDownField控件， 里面嵌套了ext:TreePanel控件。下面只贴ext:TreePanel代码                    
ext.net combobox 的初始化
czf2505的专栏
11-18 1003
1  建立一个Store       Dim objStore As New Ext.Net.Store    Dim objModel As New Ext.Net.Model    objModel.Fields.Add("myID")     objModel.Fields.Add("myName")      objStore.Model.Add(objModel)
Ext.Net 1.2.0_Ext.net.DirectMethods 使用
水果篮子
10-26 3082
文章转自http://www.cnblogs.com/liuning8023/archive/2012/04/20/2460629.html http://examples.ext.net/#/Events/DirectMethods/Overview/   本文在几个月前写过一次，当时刚刚使用 Ext.Net，现在重新整理一下，说说自己的理解，并附上源代码。 本 B
Ext.Net学习笔记19：Ext.Net FormPanel 简单用法
weixin_34162228的博客
11-26 91
FormPanel是一个常用的控件，Ext.Net中的FormPanel控件同样具有非常丰富的功能，在接下来的笔记中我们将一起见证FormPanel的强大。 FieldLabel FieldLabel属性是每一个Field都具有的属性，它为我们的字段显示一个标签，例如上面登陆窗口中的“用户名”和“密码”。 我们可以通过LabelWidth控制标...
EXT.NET 后台加载GridPanel，加载了却没有显示，原因旺旺如下
czf2505的专栏
03-31 769
1    初始化IniGpRole() IniGpUser() IniFileType() IniStatus() gbTabPanel.Render() 2 初始化的过程 Private Sub IniGpDepartment() mobjDepartment.ExtNetStore = stoG
EXT.NET对话框
蚂蚁筑巢
04-05 455
最简单的对话框： Ext.Msg.alert("提示", "保存失败"); 含是否对话框： Ext.MessageBox.confirm("注意", "是否继续？", function (btn) {                 //返回的为no何yes                 if (btn == "yes") {                         
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 grid panel 滚动条位置不变
02-17
Ext grid panel 滚动条位置不变，适用于实时数据的刷新
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
01-19
•可限制最大输入字符长度 •可设置字符截取速度 •可自定义提示信息文本样式(可以... options = $.extend({ maxlength: 140, // 定义一个最大输入长度变量,初始化为500 speed: 15, // 定义删除字符的速度变量 msgstyle
阿里云服务器CentOS服务器初始化设置步骤
01-10
CentOS服务器初始化设置其实不分阿里云或其它服务器了，操作配置过程与步骤也差不多，下面和小编一起来看看。 一、挂载硬盘 1、磁盘分区 fdisk -l #查看设备，一般可以看到设备名为/dev/xvdb fdisk /dev/xvdb #对...
ExtAspNet v2.2.1 （2009-4-1） 值得一看
04-01
ExtAspNet是一组专业的Asp.net控件库，拥有原生的AJAX支持和丰富的UI效果， 目标是创建没有JavaScript，没有CSS，没有UpdatePanel，没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome ...
ExtAspNet_v2.3.2_dll
09-29
ExtAspNet是一组专业的Asp.net控件库，拥有原生的AJAX支持和丰富的UI效果， 目标是创建没有ViewState，没有JavaScript，没有CSS，没有UpdatePanel，没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox...
openlayers绘制经纬网格，有添加或者移除功能
最新发布
qq_52959651的博客
05-21 121
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 200
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 245
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 760
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
.NET 怎么初始化一个二维数组
06-11
在 .NET 中初始化一个二维数组可以使用以下方法： ```csharp // 定义一个 2 * 3 的二维数组 int[,] array = new int[2, 3] { { 1, 2, 3 }, { 4, 5, 6 } }; ``` 这个语句会定义一个名为 `array` 的二维数组，其中...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值