ExtJS框架菜单设备

最新推荐文章于 2015-11-10 15:04:29 发布
最新推荐文章于 2015-11-10 15:04:29 发布
阅读量621 收藏
点赞数
分类专栏： .NET程序 JavaScript & CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hdhai9451/article/details/38727171
版权 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Erp.Web.Admin.Default1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>XXXX后台管理系统</title>
    <link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" />
    <link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/xtheme-green.css" />

    <script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>

    <script type="text/javascript" src="ExtJS/ext-all.js"></script>

    <script type="text/javascript" src="js/theme.js"></script>

    <script type="text/javascript" src="js/bottom.js"></script>

    <script type="text/javascript" src="js/rightKeyTabPanel.js"></script>

    <script type="text/javascript" src="js/centerGrid.js"></script>

    <style type="text/css">
        html, body
        {
            font: normal 12px verdana;
            margin: 0;
            padding: 0;
            border: 0 none;
            overflow: hidden;
            height: 100%;
        }
        .x-panel-body p
        {
            margin: 5px;
        }
        .x-column-layout-ct .x-panel
        {
            margin-bottom: 5px;
        }
        .x-column-layout-ct .x-panel-dd-spacer
        {
            margin-bottom: 5px;
        }
        .settings
        {
            background-image: url(icons/fam/folder_wrench.png) !important;
        }
        .nav
        {
            background-image: url(icons/fam/folder_go.png) !important;
        }
        .panel_icon
        {
            background-image: url(images/first.gif);
        }
        .win_icon
        {
            background-image: url(images/05503711.gif);
        }
        .template
        {
            background-image: url(images/myBBImg.PNG);
        }
        .body_title
        {
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 22px;
            background-color: #d9e4f4;
        }
        .btn_logoff
        {
            height: 25px;
            padding-top: 2px;
            padding-left: 10px;
            padding-right: 10px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <img id="headImg" src="images/header22.gif" alt="欢迎进入" />
    <div>

        <script type="text/javascript">
            function BuildTree() {
                //上面
                var toolbar = new Ext.Toolbar
                    ({
                        border: false, x: 0, y: 0, id: "toolbars",
                        items:
                         [
                            {
                                xtype: "tbbutton", text: "主菜单", id: "btnEnter", icon: 'images/first.gif', cls: 'x-btn-text-icon',
                                listeners: { "click": function() { loadPanelWest("reload"); } }
                            }
                         ]
                    });
                var panel_toolbar = new Ext.Panel
                    ({
                        border: false, x: 0, y: 0,
                        items: [toolbar]
                    });
                var panel_north = new Ext.Panel
                    ({
                        id: "panel_north", region: "north", contentEl: "headImg",
                        height: 60, frame: false, border: false,
                        html: "<div class='body_title'>XXXX后台管理系统<div style='float:right;padding-right:20px;padding-top:5px'><input type='button' class='btn_logoff' value='注销' class='x-button' οnclick='onLogoff();' /></div></div>",
                        items: [panel_toolbar]
                    });
                //中间
                var tabpanel = new Ext.TabPanel
                    ({
                        activeTab: 0, autoWidth: true, border: false, frame: false, id: "TabPanelID", enableTabScroll: true,
                        items:
                        [
                            {
                                xtype: "panel", layout: 'fit', title: "首页", border: false, frame: false, iconCls: 'panel_icon',
                                html: "<iframe scrolling='no' width='100%' height='100%'  frameborder='0' src='Pages/MyProfile/MyProfile.aspx'></iframe>"
                            }
                        ]
                    });
                var panel_center = new Ext.Panel
                    ({
                        id: 'panleCenter', frame: false, border: false,
                        region: 'center',
                        split: true,
                        items: [tabpanel],
                        layout: 'fit'

                    });
                //左面
                var panel_west = new Ext.Panel
                    ({
                        id: 'panWestMenu',
                        region: 'west',
                        split: true,
                        width: 200,
                        collapsible: true,
                        margins: '0 0 0 0',
                        layout: 'accordion',
                        layoutConfig: { animate: true }
                    });
                var viewport = new Ext.Viewport
                    ({
                        id: 'vpMain',
                        layout: 'border',
                        items:
                        [
                            panel_north,
                            panel_center,
                            panel_west,
                            Ext.getCmp("BottomPanelID")
                        ]
                    });



                //加载左面的数据
                var loadPanelWest = function(init) {
                    Ext.Ajax.request
                     ({
                         url: 'Pages/TreeJson.ashx?Param=0',
                         success: function(response, options) {
                             try {
                                 var panWestMenu = Ext.getCmp("panWestMenu");
                                 if (panWestMenu) {
                                     var children = panWestMenu.findByType('panel');
                                     if (children) {
                                         for (var i = 0, len = children.length; i < len; i++) {
                                             panWestMenu.remove(children[i], true);
                                         }
                                     }
                                 }

                                 var toolBars = Ext.getCmp("toolbars");
                                 var menusArray = Ext.util.JSON.decode(response.responseText);

                                 for (var j = 0; j < menusArray.length; j++) {
                                     var mp = CreateMenuPanel(menusArray[j].TypeTitle, menusArray[j].TypeID);
                                     panWestMenu.add(mp);
                                     if (init == "load") {
                                         var tempBtn = CreteButton(menusArray[j].TypeTitle, menusArray[j].TypeID);
                                         toolBars.addItem(tempBtn);
                                     }
                                 }
                                 panWestMenu.doLayout();
                                 if (init == "load") {
                                     toolBars.addFill();

                                     toolBars.addSeparator();
                                     toolBars.addText("更换皮肤 ");
                                     toolBars.addItem(new makeCookie().cbThemes);
                                     panel_north.doLayout();
                                 }
                             }
                             catch (e) {

                             }
                         }
                     });
                };


                loadPanelWest("load");
                //创建单个treePanel
                var CreateMenuPanel = function(title, TypeID) {
                    return new Ext.Panel
                    ({
                        title: title,
                        layout: 'fit',
                        border: false,
                        frame: true,
                        items:
                          [{
                              xtype: 'treepanel',
                              singleExpand: true,
                              animate: true,
                              autoScroll: true,
                              containerScroll: true,
                              border: false,
                              width: 200, height: 370, enableDD: false, dropConfig: { appendOnly: true },
                              loader: new Ext.tree.TreeLoader({ dataUrl: "Pages/TreeJson.ashx?Param=1&TypeID=" + TypeID }),
                              root: new Ext.tree.AsyncTreeNode
                              ({
                                  id: TypeID,
                                  text: title,
                                  draggable: false,
                                  expanded: true

                              }),
                              rootVisible: false,
                              listeners: { "click": function(node, e) {
                                  if (typeof node.attributes.TypeID == "undefined") {
                                      //Ext.Msg.alert("提示消息", "不可以对根节点执行右键操作！");
                                      return;
                                  }
                                  var _TypeID = node.attributes.TypeID;
                                  var _TypeTitle = node.attributes.TypeTitle;
                                  var _TypeEName = node.attributes.TypeEName;
                                  var tabs = Ext.getCmp("TabPanelID");
                                  var title = _TypeTitle;
                                  var _linkUrl = node.attributes.LinkUrl;
                                  for (var i = 0; i < tabs.items.length; i++) {
                                      if (tabs.items.items[i].title == title) {
                                          // Ext.Msg.alert("消息","该菜单项[ " + node.attributes.text + " ]已经存在Tab里面！");
                                          tabs.activate(tabs.items.items[i]);
                                          return;
                                      }
                                  }
                                  //var pnl = new BuildGridView(_TypeID, title).gridView;
                                  var pnl = new Ext.Panel({
                                      title: title,
                                      border: false,
                                      closable: true,
                                      html: '<iframe id="' + _TypeID + '" scrolling="auto" frameborder="0" width="100%" height="100%" src="' + _linkUrl + '"></iframe>'
                                  });
                                  tabs.add(pnl);
                                  tabs.activate(pnl);
                              }

                              }
}]
                    });
                };


                //创建单个按钮
                var CreteButton = function(MenuTitle, MenuID) {
                    return new Ext.Toolbar.Button
                        ({
                            id: "MenuID" + MenuID, text: MenuTitle, icon: 'images/plugin.gif', cls: 'x-btn-text-icon',
                            tooltip: MenuID,
                            listeners:
                              {
                                  "click": function(o, e) {

                                      var panWestMenu = Ext.getCmp('panWestMenu');

                                      var toolbars = Ext.getCmp('toolbars');
                                      var panel_north = Ext.getCmp('panel_north');
                                      if (toolbars && toolbars.items.length > 0) {
                                          for (var i = 0; i < toolbars.items.length; i++) {
                                              if (toolbars.items.items[i].id == o.id) {
                                                  toolbars.items.items[i].pressed = true;
                                              }
                                              else {
                                                  toolbars.items.items[i].pressed = false;
                                              }
                                          }
                                      }
                                      if (panWestMenu) {
                                          var children = panWestMenu.findByType('panel');
                                          if (children) {
                                              for (var i = 0, len = children.length; i < len; i++) {
                                                  panWestMenu.remove(children[i], true);
                                              }
                                          }
                                          var mp = CreateMenuPanel(o.text, o.tooltip);
                                          panWestMenu.add(mp);
                                          panWestMenu.doLayout();
                                      }
                                  }
                              }
                        });
                };

            }
        </script>

        <script type="text/javascript">
            function ready() {
                makeCookie();
                BuildBottomPanel();
                BuildTree();
                RightKeyTabPanel();
            }
            Ext.onReady(ready);

            function onLogoff() {
                if (confirm("确认要注销吗？")) {
                    window.location.href = "Login.aspx";
                }
            }
        </script>

    </div>
    </form>
</body>
</html>

Andy__Huang
关注
专栏目录
ExtJS 设置级联菜单的默认值
10-29
本文将详细介绍如何使用ExtJS框架设置级联菜单的默认值。首先，需要明白在ExtJS中设置普通控件（如文本框）的默认值相对简单，通常只用一行代码即可完成。然而，对于ComboBox（下拉列表组件）来说，情况就没那么简单...
EXTJS学习系列提高篇:第七篇(转载)作者殷良胜,制作树形菜单之一
literaryfly的专栏
02-23 110
制作树形菜单的原理是:首先连接数据库,将数据按照树的结构形式返回,在客户端遍历数据时,将每条记录生成一个treepanel,然后在每个treepanel都包含在一个Panel组件里面,最后在将每个Panel组件都添加到一个上级Panel组件里面,最后在将这个上级Panel添加到Viewport里面.这里用到三个Ext组件,分别是:Viewport ; Panel ; TreePanel. 这...
js ui菜单框架 extjs
上尚若水
10-15 521
http://zh.wikipedia.org/wiki/Extjs 注明的maven私服 nexus
EXTJS4 菜单栏
12-08
EXTJS4是一款强大的JavaScript框架，专门用于构建富客户端应用程序。其菜单栏是用户界面中一个重要的组成部分，提供了丰富的功能选项，使用户能够方便地访问和操作应用的不同部分。EXTJS4的菜单栏设计灵活，可自定义...
Extjs实现下拉菜单效果
11-24
在提供的代码中，可以看到引用了`ext-all.css`和`bootstrap.js`，这些都是ExtJS框架的基础组成部分，确保了组件的正常渲染和功能实现。 创建下拉树的组件类 `TreeComboBox` 是基于ExtJS的`Ext.form.field.ComboBox`...
ExtJS5树形菜单
12-13
ExtJS5是一款强大的JavaScript框架，主要用于构建富客户端的Web应用程序。在ExtJS5中，树形菜单（Tree Menu）是一种常见的UI组件，它允许用户以层次结构的方式展示数据，非常适合用于目录浏览、文件系统导航或者复杂...
Extjs学习笔记之四 工具栏和菜单
10-29
Extjs工具栏（Toolbar）和菜单（Menu）组件的学习笔记提供了丰富的知识点，帮助...这些组件和配置方式的详细介绍可以在Extjs的官方API文档中找到详细说明，这对于理解和运用Extjs框架构建复杂用户界面非常有帮助。
MD5、SHA256、SHA512加密算法，以及可逆算法
热门推荐
hdhai9451的专栏
09-09 4万+
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Security.Cryptography; using System.Text;
枚举类型转换成List
hdhai9451的专栏
09-09 2万+
--定义一个枚举 public enum Gender { [Description("男")] Male = 1, [Description("女")] Female = 2 } /// /// 此类专门是针对枚举相关的数据进行服务一个类 /// public static class EnumDataUtility {
C#导出到txt文件的三种方法
hdhai9451的专栏
03-12 1万+
方法一：  HttpResponse resp = System.Web.HttpContext.Current.Response; resp.ContentEncoding = System.Text.Encoding.GetEncoding("GB2312"); resp.AppendHeader("Content-Disposition", "attachment;filename="
C#写日志两个简单方法
hdhai9451的专栏
06-11 1万+
在开时为了验证程序运行是否正确，通常要写日志来记录操作，在一个日志类里，通常有两个方法： 方法一：以日期为日志文件名 public void WriteLog(string msg) { string filePath = AppDomain.CurrentDomain.BaseDirectory + "Log"; if (!Directory.Exists(fileP
大数据量、高并发量网站解决方案
hdhai9451的专栏
03-10 1万+
一个小型的网站，可以使用最简单的html静态页面就实现了，配合一些图片达到美化效果，所有的页面均存放在一个目录下，这样的网站对系统架构、性能的要求都很简单。随着互联网业务的不断丰富，网站相关的技术经过这些年的发展，已经细分到很细的方方面面，尤其对于大型网站来说，所采用的技术更是涉及面非常广，从硬件到软件、编程语言、数据库、WebServer、防火墙等各个领域都有了很高的要
有时候替换Table更好用, CSS3设置Table奇数行和偶数行
hdhai9451的专栏
10-11 1万+
标签dl,dt,dd不是经常用，用可以做简单列表，它也用独特好用之处。还有ol,ul,li,它还能自动产生序呢。 一个普通列表 中国城市 北京 上海 广州 美国城市 华盛顿 芝加哥 纽约 Apple Car Coffee Mile 运行效果： 中国城市 北京 上海 广州 美国城市 华盛顿
sessionState为什么设置TimeOut没有用？
hdhai9451的专栏
09-02 1万+
虽然已经设置了timeout=60，但实际上不到60分钟系统就报错过时而退出。   原来问题在这里：   cookieless="UseCookies" timeout="60">
C#时间格式转换成ISO8601标准
hdhai9451的专栏
11-10 9777
 string ISO8601time = DateTime.Now.ToString("yyyy-MM-ddTHH:mm:sszzzz", DateTimeFormatInfo.InvariantInfo); Console.WriteLine(ISO8601time);
WCF的配置Web.config及发布需要注意的问题
hdhai9451的专栏
09-27 7657
在开发环境下可以正常调用，但到发布后，为何不可以调用？   一、WCF的配置文件web.config，主要配置：behaviors、bindings、services <messageLogging logMalformedMessages="true" logMessagesAtServiceLevel="true" logMessages
C#读取和导出到Excel简单实例
hdhai9451的专栏
08-08 4605
ReaderExcelData,NPOI.dll
ASP.NET(C#) 最简单的弹出层
hdhai9451的专栏
07-03 3768
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">                 body         {             margin: 0px;         }                     登
XSD文件格式
hdhai9451的专栏
09-02 3715
一、水晶报表可以直接使用这个文件作为数据源         targetNamespace="http://tempuri.org/XMLSchema.xsd"     elementFormDefault="qualified"     xmlns="http://tempuri.org/XMLSchema.xsd"     xmlns:mstns="http://tempu
ExtJS框架详解：高级事件与基础应用
"高级事件在ExtJs框架中的应用和ExtJs框架的基本介绍" 在Web开发中，ExtJs是一个强大的JavaScript框架，特别适用于构建富客户端应用程序，它提供了丰富的组件和优秀的用户体验。本文将深入探讨ExtJs中的高级事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值