ext4js 主页面布局,动态分配菜单,并点击url 显示到内容面板中

这里没用到数据库,先用js模仿,看起来方便点,

在网上看视频,他奶奶的,都是比较低版本的,一样的代码,就是报错,一查API,内库不一样,害死个人。

高版本的还找老子收费,这年头、还是得靠自已研究,终于搞出来了个简单的,分享下.....

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"	href="fornt/js/ext4/resources/css/ext-all.css">
<script type="text/javascript" src="fornt/js/ext4/ext-all.js"></script>
<!-- <script type="text/javascript" src="./jquery-1.8.0.min.js"></script> -->
<script type="text/javascript" src="fornt/js/comm/comm.js"></script>
<script type="text/javascript" src="index.js"></script>

</head>
<body>

</body>
</html>
// --------------------------------------------------------------------------------------------
// -主页面js
// --------------------------------------------------------------------------------------------

Ext.onReady(function() {

	// Ext.BLANK_IMAGE_URL = "fornt/js/ext4//resources/images/default/s.gif'";//
	// 预防显示不了css文件中定义的装饰图标
	Ext.QuickTips.init();// 使带有data-qtip属性的html标签能够在鼠标移上去的时候显示其内容。作用类似于HTML标签的title的功能。
	Ext.form.Field.prototype.msgTaarget = "qtip"; // msgTarget:有4中方式:qtip,title,under,side
	initLayout();
});

function initLayout() {

	// -----------------------------------------------------------------------------------------
	// 辅助js
	// --------------------------------------------------------------------------------------------
	// 树节点store
	var main_ext_treeStore = Ext.create('Ext.data.TreeStore', {
		root : {
			expanded : true,
			children : [ {
				text : "grid demo",
				expanded : true,
				children : [ {
					text : '<a href="page/grid.jsp">grid demo</a>',
					leaf : true
				} ]
			}, {
				text : "homework",
				expanded : true,
				children : [ {
					text : "user list",
					leaf : true,
					listeners : { // 监听点击事件
						click : function(node, e) {
							alert('dd');
							// var v_main_center =
							// Ext.getCmp('_main_center_id');
							// var ObjPanel = new index_grid_user();
							// v_main_center.add("xxxx");
						}

					}
				}, {
					id : "testFnsddd",
					text : "alegrbra",
					leaf : true,
					listeners : {
						"click" : function() {
							alert('dd');
						}
					}
				} ]
			}, {
				text : "buy lottery tickets",
				leaf : true
			} ]
		}
	});

	/*
	 * { title : '<%=higherRm.getName()%>', html : "<%=a_html%>", iconCls :
	 * 'nav' // see the HEAD section for style used }
	 */

	var itemObj1 = new Object();
	itemObj1.title = "商家管理";
	var html_menu_ = "<a>商品管理</a> <br/><a>商家信息管理</a> <br/><a>xx管理</a> <br/>";
	itemObj1.html = html_menu_;
	itemObj1.iconCls = "nav";

	var sysMeun = new Object();
	sysMeun.title = "系统管理";
	// getProPath
	var html_menu_user_ =
		    "<a class='main_meun_clz' href=javascript:mainClickMenuFn('fornt/htm/sys/user.html') >用户管理</a> <br/>" +
			"<a class='main_meun_clz' href=javascript:mainClickMenuFn('fornt/htm/sys/role.html')>角色管理</a> <br/>" +
			"<a>权限管理</a> <br/>";
	sysMeun.html = html_menu_user_;
	sysMeun.iconCls = "nav";

	var itemss = new Array();
	itemss[0] = sysMeun;
	itemss[1] = itemObj1;

	// itemss.push(itemObj1);
	// itemss.push(itemObj2);

	// --------------------------------------------------------------------------------------
	// 主页面布局
	// --------------------------------------------------------------------------------------
	var viewportObj = new Ext.Viewport({
		title : "sys-系统管理",
		layout : 'border',
		items : [ {
			title : 'sys-RBAC管理系统',
			region : 'north', // position for region . 上面
			xtype : 'panel',
			height : 100,
			split : true, // enable resizing
			margins : '0 5 5 5',
			html:"<h2><==== 欢迎 使用SYS-RBAC管理 系统 ====></h2>"

		}, {
			title : '最新动态',
			region : 'south', // position for region . 南方 下面
			xtype : 'panel',
			height : 100,
			split : true, // enable resizing
			margins : '0 5 5 5'
		}, {
			// xtype: 'panel' implied by default
			title : '菜单列表',
			region : 'west',// 西
			xtype : 'panel',
			margins : '5 0 0 5',
			width : 200,
			collapsible : true, // make collapsible
			id : 'west-region-container',
			defaults : {
				bodyStyle : 'padding:15px'
			},
			layout : {
				type : 'accordion',
				titleCollapse : true,// 标题点击
				animate : true,
				activeOnTop : true
			},
			items : itemss,
			listeners : {
				'itemclick' : function(view, record) {
					alert("dd");
					// var v_main_center = Ext.getCmp('_main_center_id');
					// var ObjPanel = new index_grid_user();
					// alert("dd");
					// v_main_center.add("----====jjjjj");
				}
			}

		}, {
			id : "_main_center_id",
			title : '内容中心',
			region : 'center', // center region is required, no width/height
			// specified
			xtype : 'panel',
			layout : 'fit',
			margins : '5 5 0 0'
		} ]
	// , renderTo : Ext.getBody()

	});

};

// ======================内容面板==============================

// 通过菜单增加操作面版
 function  mainClickMenuFn(url) {

	url = getProPath() + url;
	// , menuFormId
	var addTabPanel = Ext.getCmp("_main_center_id");
	addTabPanel.removeAll();
	addTabPanel
			.add(
					{
						//title : "dd", // iconCls: 'tabs', id : tt, forceFit : //
									// true,
						autoWidth : true,
						html : '<iframe frameBorder=0 id="main_content_frame"	 name="main_content_frame" src="'
								+ url
								+ '" width="100%" height="100%"	 scrolling="no"></iframe>',
						//closable : true
					}).show();

	/*
	 * var addTabPanel = mainTabs.getComponent(tt); if (!addTabPanel) { mainTabs
	 * .add( { title : tt, // iconCls: 'tabs', id : tt, forceFit : true,
	 * autoWidth : true, html : '<iframe frameBorder=0 id="body_content_frame"
	 * name="body_content_frame" src="' + url + '" width="100%" height="100%"
	 * scrolling="no"></iframe>', closable : true }).show(); } else {
	 * mainTabs.setActiveTab(addTabPanel); }
	 */
};

/*
 * listeners : { //监听点击事件 click : function(node, e) { v_main_center =
 * Ext.getCmp('_main_center_id'); var ObjPanel = new index_grid_user();
 * v_main_center.add(ObjPanel); } }
 */

comm.js

function getProPath(){
	return "/sys-html/";
}

时间: 2024-11-05 17:21:38

ext4js 主页面布局,动态分配菜单,并点击url 显示到内容面板中的相关文章

tab菜单的点击的动态效果和内容页面的关联显示jQuery

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ min-height: 50px; background-color: #eeeeee; line-height: 50px;/*设置文字居

MVC+EF+esayui初试(一 布局加菜单显示)

最近都在做linq+ext.net的开发.这两天想学习下MVC和ef,刚好,在看ext.js的时候也喜欢上了esayui,所以就想用mvc+ef+esayui做一个汽车网后台管理来加强下.在这里也把我的经验和大家分享下.好了开始项目的准备工作,先准备下EsayUI的一些文件,可以到http://www.jeasyui.com/download/index.php下载最新的easyui包,然后在头部引入这个文件 <link rel="stylesheet" type="t

paip.微信菜单直接跳转url和获取openid流程总结

#------不能直接跳转,贝儿提示不安全的链接.. #-------使用auth跳转. //todox 直接转到..  direct goto ViewButton skrechCard = new ViewButton("刮刮卡o428,view," + "https://open.weixin.qq.com/connect/oauth2/authorize?" + "appid="+appId+"&" + &qu

微信公众号菜单openid 点击菜单即可打开并登录微站

现在大部分微站都通过用户的微信openid来实现自动登录.在我之前的开发中,用户通过点击一个菜单,公众号返回一个图文,用户点击这个图文才可以自动登录微站.但是如果你拥有高级接口,就可以实现点击菜单,打开网页就能获取这个openid,实现自动登录. 这里已经提到,必须要拥有高级接口的权限(服务号.企业号),开启了开发者模式. 1.设置回调地址 在微信公众平台后台“开发者中心”中找到“高级接口”下的“OAuth2.0网页授权”,后面有一个“修改”,点击之后就会弹出填写回调地址的对话框.具体如何授权,

windows开始菜单和任务栏图标显示空白并且点击时候显示项目已被移动或删除

这几天实验室老经常自动断电,这是很蛋疼的一件事,这不上次断电就出事了.来电后开机,点击任务栏上的程序全都显示为无法打开此项目,该项目已被移动.删除.原因是图标缓存丢失,可能是突然断电引起的,也有可能是用网上下载的清理垃圾的bat文件引起的. 解决方法: 1. step1:开机按F8启动到安全模式. step2:打开windows vista所在的盘符,使用搜索找到iconcache.db这个文件,将其删除. step3:重启到正常模式,桌面图标就恢复正常啦! 如果搜索没有找到缓存文件iconca

WPF 根据指定条件显示或禁止listView中的每一项的右键菜单

昨天要做一个ListView的右键菜单,需要根据listView绑定的集合中每个对象里的一个bool属性来决定是否显示该项的右键菜单,经过不懈的尝试和努力,最终实现了两种方案,一种是当该值为false时,可以点出右键菜单,但菜单项置灰不可选:另一种就是直接不出来菜单,右击没反应.下面是第一种方案: <ListView x:Name="ServerList" ItemsSource="{Binding Path=Servers}"> <ListVie

织梦一二级导航菜单被点击顶级栏目高亮(加class)解决方法

织梦一二级导航菜单被点击的栏目高亮显示方法详解,废话不多说直接举例说明: 织梦一级菜单被点击栏目高亮调用方法: {dede:channel typeid ='1'  type ='son' currentstyle="<li class='on'><a href='~typelink~'>~typename~</a></li>"} <li><a href='[field:typeurl/]'>[field:type

下拉菜单:‘点击外面关闭’的解决方案

一般遇到这种问题网上的说法都是: 给点击开启下拉菜单的Dom元素方法中添加 e.stopPropagation() 阻止事件冒泡 再给document添加一个监听点击的事件: document.addEventListener('click', this.offDropMenu, false)复制代码 可是这种一般只能适用于普通的下拉导航菜单,点击菜单 或者return false http://hao.caibaojian.com/81927.html https://juejin.im/po

雷林鹏分享jQuery EasyUI 布局 - 在面板中创建复杂布局

面板(Panel)允许您创建用于多种用途的自定义布局.在本实例中,我们使用面板(panel)和布局(layout)插件来创建一个 msn 消息框. 我们在区域面板中使用多个布局(layout).在消息框的顶部我们放置一个查询输入框,同时在右边放置一个人物图片.在中间的区域我们通过设置 split 属性为 true,把这部分切割为两部分,允许用户改变区域面板的尺寸大小. 以下就是所有代码: Search: Hi,I am easyui. 我们不需要写任何的 javascript 代码,它自己有非常