首页 > 代码库 > 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 显示到内容面板中
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。