EXTJS4.2 后台管理菜单栏
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 后台管理菜单栏的更多相关文章
- 黄聪:自定义WordPress前台、后台顶部菜单栏管理工具条的技巧
使用WordPress开发网站项目,很多时候都需要对进行后台定制,今天倡萌主要分享下自定义顶部管理工具条的使用技巧. 注:如无特殊说明,请将下面的代码添加到主题的 functions.php 或者插 ...
- 10天学会phpWeChat——第六天:实现新闻的后台管理
通过前面五讲的系列教程,我们完成了一个简单模块的前端发布.列表展示.详情展示.实际生产环境中,所有前台的数据都会有对应的后台操作进行统筹管理.我们称之为后台管理系统. 今天,我们开始<10天学会 ...
- yii2-basic后台管理功能开发之一:引入模板
前景:哎没想到用php的yii2框架写了官网……自己选择的框架,跪着也要码完,当年用yii2-basic搭建了官网,原是想偷懒的,没想到还要写后台.... 需求:实现一个可编辑页面图片及新闻内容的后台 ...
- 老男孩Day16作业:登录、注册、后台管理页面(动态)
一.作业需求: 1.后台管理主界面(左边菜单框.(全选.反选)框.返回顶部按钮) 2.老男孩登录.注册页面 二.博客地址:https://www.cnblogs.com/catepython/p/93 ...
- 前端武器库系列之html后台管理页面布局
设计网页,让网页好看:网上找模板 搜 HTML模板 BootStrap 一.页面布局之主站页面 主站布局一般不占满页面,分为菜单栏.主页面.底部 上中下三部分.伪代码如下: <div class ...
- HTML后台管理页面布局
设计网页,让网页好看:网上找模板 搜 HTML模板 BootStrap 一.内容回顾: HTML 一大堆的标签:块级.行内 CSS position background text-align mar ...
- MVC5 网站开发之七 用户功能 1、角色的后台管理
角色是网站中都有的一个功能,用来区分用户的类型.划分用户的权限,这次实现角色列表浏览.角色添加.角色修改和角色删除. 目录 奔跑吧,代码小哥! MVC5网站开发之一 总体概述 MVC5 网站开发之二 ...
- 后台管理UI的选择
最近要做一个企业的OA系统,以前一直使用EasyUI,一切都好,但感觉有点土了,想换成现在流行的Bootstrap为基础的后台UI风格,想满足的条件应该达到如下几个: 1.美观.大方.简洁 2.兼容I ...
- Django-Admin后台管理
Rhel6.5 Django1.10 Python3.5 应用环境:Python+Virtualenv(Python Virtualenv运行Django环境配置) Django-Admin后台管理 ...
随机推荐
- CF Anya and Ghosts (贪心)
Anya and Ghosts time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...
- 【Stirling Number I】
hdu 4372 Count the Buildings 推荐这位小哥的,我觉得人家说的灰常的好. 注意数据范围,n,f,b均在(0,2000]范围内,而第一斯特林数的数组范围却是s[2000+5][ ...
- hdu 4614 线段树
思路:当k为1的时候,用二分法查询包含有f个空瓶的上界r,然后更新会方便很多,直接更新区间(a,r)了. #include<iostream> #include<cstdio> ...
- Windows 8.1 归档 —— Step 2 对新系统的少量优化
下面是来自 iplaysoft 的优化技巧:
- 使用AccessibilityService模拟点击事件失败的分析
使用AccessibilityService模拟点击事件的方法: AccessibilityNodeInfo.performAction(AccessibilityNodeInfo.ACTION_CL ...
- saltstack实战4--综合练习1
规范配置管理 实际工作中可能会有现网环境,基线环境,开发环境. 需要使用saltstack统一管理.机器多了,业务多了,可能配置文件存放的会比较乱,因此可以统一管理起来 我们可以再加2个目录,test ...
- Linux下配置文件的位置
系统级的配置存放在 /etc 目录中.用户级的配置存放在用户的主目录 /home/user_login_name. SHELL 默认文件 /etc/bashrc – bash shell 的系统级默认 ...
- [算法练习] UVA-401-Palindromes
UVA Online Judge 题目401 Palindromes 回文串 问题描述: 回文串(Palindromes)就是正着读和反着读完全一样的字符串,例如"ABCDEDCBA&qu ...
- Java - 正则表达式常用操作
验证 简单验证 String regex = "\\d{4}-\\d{2}-\\d{2}"; String input = "2016-01-01"; asse ...
- Git CMD - merge: Join two or more development histories together
命令格式 git merge [-n] [--stat] [--no-commit] [--squash] [--[no-]edit] [-s <strategy>] [-X <st ...