ext4js 主页面布局,动态分配菜单,并点击url 显示

页面导航:首页 > 网络编程 > JavaScript > ext4js 主页面布局,动态分配菜单,并点击url 显示

ext4js 主页面布局,动态分配菜单,并点击url 显示

来源: 作者: 时间:2016-02-19 09:19 【

ext4js 主页面布局,动态分配菜单,并点击url 显示到内容面板中这里没用到数据库,先用js模仿,看起来方便点,在网上看视频,他奶奶的,都是比较低版本的,一样的代码,就是报错,

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

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

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

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

\






Insert title here

<script type="text/javascript" src="fornt/js/ext4/ext-all.js"></script>
 
<script type="text/javascript" src="fornt/js/comm/comm.js"></script>
<script type="text/javascript" src="index.js"></script>







// --------------------------------------------------------------------------------------------
// -主页面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 : '',
					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_ = " 


"; itemObj1.html = html_menu_; itemObj1.iconCls = "nav"; var sysMeun = new Object(); sysMeun.title = "系统管理"; // getProPath var html_menu_user_ = "
" + "
" + "
"; sysMeun. = 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:"

<==== 欢迎 使用SYS-RBAC管理 系统 ====>

" }, { 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/";
}


Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<