EXTJS 代码:

第一种方法:

{
title: '汽车信息管理',
layout: 'fit',
items: [
{
xtype: 'treepanel',
border: 0,
rootVisible: false,
root: {
expanded: true,
children: [
{
text: '汽车信息管理1',
leaf: true,
id: '/UI/Page/ProductManagement/ui_html_PKU_Car/PM_CT_CarType.html'
}, {
text: '汽车信息管理2',
leaf: true,
id: '/UI/Page/ProductManagement/ui_html_PKU_Car/PM_CT_CarType.html1'
},
]
},
listeners: {
//添加节点点击事件
itemclick: function (v, r, item) {
var n = tab.getComponent(r.raw.id);
if (r.raw.id == 'root') {
return;
}
if (!n) { // 判断是否已经打开该面板
n = tab.add({
'id': r.raw.id,
'title': r.raw.text,
closable: true, // 通过html载入目标页
html: '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="' + r.raw.id + '"></iframe>'
});
}
tab.setActiveTab(n);
}
}
}
]
},

第二种写法:

{
title: '实体商品订单管理',
xtype: 'treepanel',
expanded: true,
animate: true,
enableDD: false,
border: false,
containerScroll: true,
root: {
text: '实体商品订单管理',
id: 'root',
children: [{
text: '买家查看',
leaf: true,
id: '/UI/Page/ProductManagement/ui_html_Orders/ui_html_Orders_Real_byBuyer.html'
}, {
text: '卖家查看',
leaf: true,
id: '/UI/Page/ProductManagement/ui_html_Orders/ui_html_Orders_Real_bySeller.html'
}, {
text: '商品类型(汽车配件)',
leaf: true,
id: '/UI/Page/ProductManagement/ui_html_Orders/ui_html_Orders_Real_byProductModelForCarPart.html'
}, {
text: '商品类型(汽车用品)',
leaf: true,
id: '/UI/Page/ProductManagement/ui_html_Orders/ui_html_Orders_Real_byProductModelForCarAcce.html'
}]
},
listeners: {
//添加节点点击事件
itemclick: function (v, r, item) {
var n = tab.getComponent(r.raw.id);
if (r.raw.id == 'root') {
return;
}
if (!n) { // 判断是否已经打开该面板
n = tab.add({
'id': r.raw.id,
'title': r.raw.text,
closable: true, // 通过html载入目标页
html: '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="' + r.raw.id + '"></iframe>'
});
}
tab.setActiveTab(n);
}
}
}

EXTJS4.2 后台管理菜单栏的更多相关文章

  1. 黄聪:自定义WordPress前台、后台顶部菜单栏管理工具条的技巧

    使用WordPress开发网站项目,很多时候都需要对进行后台定制,今天倡萌主要分享下自定义顶部管理工具条的使用技巧. 注:如无特殊说明,请将下面的代码添加到主题的 functions.php  或者插 ...

  2. 10天学会phpWeChat——第六天:实现新闻的后台管理

    通过前面五讲的系列教程,我们完成了一个简单模块的前端发布.列表展示.详情展示.实际生产环境中,所有前台的数据都会有对应的后台操作进行统筹管理.我们称之为后台管理系统. 今天,我们开始<10天学会 ...

  3. yii2-basic后台管理功能开发之一:引入模板

    前景:哎没想到用php的yii2框架写了官网……自己选择的框架,跪着也要码完,当年用yii2-basic搭建了官网,原是想偷懒的,没想到还要写后台.... 需求:实现一个可编辑页面图片及新闻内容的后台 ...

  4. 老男孩Day16作业:登录、注册、后台管理页面(动态)

    一.作业需求: 1.后台管理主界面(左边菜单框.(全选.反选)框.返回顶部按钮) 2.老男孩登录.注册页面 二.博客地址:https://www.cnblogs.com/catepython/p/93 ...

  5. 前端武器库系列之html后台管理页面布局

    设计网页,让网页好看:网上找模板 搜 HTML模板 BootStrap 一.页面布局之主站页面 主站布局一般不占满页面,分为菜单栏.主页面.底部 上中下三部分.伪代码如下: <div class ...

  6. HTML后台管理页面布局

    设计网页,让网页好看:网上找模板 搜 HTML模板 BootStrap 一.内容回顾: HTML 一大堆的标签:块级.行内 CSS position background text-align mar ...

  7. MVC5 网站开发之七 用户功能 1、角色的后台管理

    角色是网站中都有的一个功能,用来区分用户的类型.划分用户的权限,这次实现角色列表浏览.角色添加.角色修改和角色删除. 目录 奔跑吧,代码小哥! MVC5网站开发之一 总体概述 MVC5 网站开发之二 ...

  8. 后台管理UI的选择

    最近要做一个企业的OA系统,以前一直使用EasyUI,一切都好,但感觉有点土了,想换成现在流行的Bootstrap为基础的后台UI风格,想满足的条件应该达到如下几个: 1.美观.大方.简洁 2.兼容I ...

  9. Django-Admin后台管理

    Rhel6.5 Django1.10 Python3.5 应用环境:Python+Virtualenv(Python Virtualenv运行Django环境配置) Django-Admin后台管理 ...

随机推荐

  1. 搭建yum源服务器

    在生产环境中,受到网络环境的影响,服务器可能带宽有限,连外网速度较慢或者局域网内的某些机器由于安全的限制,本身就不允许和外网和任何的连接.而这时候现在通过yum安装包或update包时就是一件比较麻烦 ...

  2. Windows Embedded CE 6.0开发环境的搭建

    最近开始在学习嵌入式,在这里首先得安装Windows Embedded CE 6.0,其中遇到了很多问题,电脑的系统以及相关配置都会在安装过程中受到影响,因此笔者就安装中的问题以及环境搭建来介绍一下. ...

  3. C# 委托的几种写法

    class Program    {         delegate string Get(string ss);        delegate string Get2(int i);       ...

  4. Apache ab 测试工具使用(一)

    简述: 试用apache ab测试工具 下载点 http://httpd.apache.org/download.cgi 参考: http://jingyan.baidu.com/article/e3 ...

  5. HTML5与CSS3基础教程第八版学习笔记7~10章

    第七章,CSS构造块 CSS里有控制基本格式的属性(font-size,color),有控制布局的属性(position,float),还有决定访问者打印时在哪里换页的打印控制元素.CSS还有很多控制 ...

  6. .NET 认识

  7. CSS3如何实现2D转换和3D转换,他们有何区别

    CSS3中2D3D技术的发展,带来了更丰富的视觉效果~他们的实现机理是怎样的呢? 1定义 2D: 能够对元素进行移动,缩放,转动,拉长或拉伸. 3D: 允许对元素进行格式化,在三维空间进行操作.元素改 ...

  8. Ehcache(2.9.x) - API Developer Guide, Cache Eviction Algorithms

    About Cache Eviction Algorithms A cache eviction algorithm is a way of deciding which element to evi ...

  9. SQL Server 编程入门经典(3)之T-SQL基本语句

    本章内容简介: 如何从数据库检索数据(SELECT) 如何向表中插入数据(INSERT) 如何适当更新数据(UPDATE) 如何删除表中数据(DELETE) 3.1 基本SELECT语句  如果你在此 ...

  10. Android之点击切换图片

    package com.example.SlidePictures; import java.util.Timer; import java.util.TimerTask; import com.ex ...