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

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

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=http://www.mamicode.com/"fornt/js/ext4/resources/css/ext-all.css">>
// --------------------------------------------------------------------------------------------
// -主页面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/";
}


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