ext4js 主页面布局，动态分配菜单，并点击url 显示到内容面板中
浏览数：42 /
时间：2015年06月09日
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); } }
*/
function getProPath(){
return "/sys-html/";
}郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
