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. mount: can't find cdrom in /etc /fstab or /etc/mtab

    我用的linux操作系统类别是CentOS-6.5 首先在虚拟机选项的设置里设置CD/DVD选项其中勾选Connect at power on选项 在连接中选择Use ISO image file:即 ...

  2. LeetCode 342

    Power of Four Given an integer (signed 32 bits), write a function to check whether it is a power of ...

  3. [改善Java代码]慎用动态编译

    建议17: 慎用动态编译 //=========这篇博文暂时理解不透......... 动态编译一直是Java的梦想,从Java 6版本它开始支持动态编译了,可以在运行期直接编译.java文件,执行. ...

  4. 【基础数学知识】UVa 11314 - Hardly Hard

    Problem H HARDLY HARD You have been given the task of cutting out a quadrilateral slice of cake out ...

  5. Delphi7使用ADO直接连接Excel读取数据

    我之前是连接成功的,现在不知道为什么怎样连都失败.最后才知道是Office版本的问题,office2007已经是基于xml的.和以前的不一样. Excel2003的连接字符串: 'Provider=M ...

  6. linq检索带命名空间的xml

    XElement el = XElement.Load(fil); XNamespace ns = "http://schemas.microsoft.com/ado/2009/11/edm ...

  7. Lombok(1.14.8) - @Synchronized

    @Synchronized @Synchronized,实现同步. package com.huey.lombok; import java.util.Date; import lombok.Sync ...

  8. Android系统中提供的原子操作

    代码的实现位于文件system/core/include/cutils中 http://androidxref.com/4.4.3_r1.1/xref/system/core/include/cuti ...

  9. Web前端开发:SQL Jsp小项目(一)

    Jsp的学习算是告一段落,针对这段时间的学习,写了一个Jsp小项目来巩固学到的知识. 框架示意图 User list process UserAdd process 需要的界面效果: 需要工具:Ecl ...

  10. Js 赋值传值和引用传址

    赋值传值和引用传址 在JavaScript中基本数据类型都是赋值传值,复合数据类型都是引用传址(传地址) 基本数据类型的变量名和数据是直接存在"快速内存"(栈内存)中,而复合数据类 ...