ext实例一（ext4.2常用的东西南北中布局）

WChao226

浏览: 27816 次
性别:
来自: 重庆

最近访客更多访客>>

yeming471114363

jxm19820907

riitxihc

卖火柴的小驴子

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端
extjs

ext实例布局实例

如果我的博文能帮到你，我感到非常荣幸。能力所限，对于我所写的内容如有不详不对，你们能给一些意见的话我将非常感谢。以后我会将我在工作中学到的一些知识，尽量整理出来给大家分享。你们的意见是我的动力

EXT的执行代码都放到Ext.onReady(function() {});
解释下代码中的几个关键字：
1、new Ext.Viewport：浏览器窗口的整个显示区域，将document body作为渲染对象，它会根据浏览器窗口的大小自动调整自身的尺寸。在一个页面中只允许出现一个Viewport实例，Viewport默认自动显示。
2、layout: 'border'：表示按照东西南北中的方式布局
3、region: "north" ：指定某容器的具体显示位置,子容器中指定region（west,east,north,south,cente）。
4、items：该容器包含的对象数组
5、Ext.require('Ext.ux.IFrame')：如果右边的tab为iframe组件，必须手动引入。当然如果自己用html的形式添加iframe，另当别论。

HTML以及JS代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<html>
<head>
<%
	String path = request.getContextPath(); 
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%> 
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="general/resources/js/ext-4.2/resources/ext-theme-classic/ext-theme-classic-all.css" />
<script type="text/javascript" src="general/resources/js/ext-4.2/bootstrap.js"></script>
<script type="text/javascript" src="general/resources/js/ext-4.2/locale/ext-lang-zh_CN.js"></script><title>后台管理</title>
<script type="text/javascript">

Ext.require('Ext.ux.IFrame');//引入iFrame组件
//创建IFrame
var createIframe = function(rcd){
	var currIframe = Ext.create("Ext.ux.IFrame", {
	    id: "tab_"+rcd.raw.id,
	    title: rcd.raw.text,
		closable : true,
		loadMask : "加载中...",
		src : rcd.raw.linkUrl,
	    listeners: {
	        load: function(iframeComponent){
	            //code here
	        },
	        beforeload: function(iframeComponent, src){
	            //code here
	        }
	    }
	});
	//新增Iframe
	panelCenter.add(currIframe);
	//
	var tab = Ext.getCmp("tab_"+rcd.raw.id);
	panelCenter.setActiveTab(tab);
}

var treeStore = Ext.create('Ext.data.TreeStore', {
  root: {
  	id: "0",
  	text: "根节点",
    expanded: true,
    children: [
        	{id:"1",text: "业务模块", expanded: true, children: [
            {id:"11",text: "应用管理", linkUrl: "general/appExec/go_main", leaf: true},
            {id:"12",text: "产品管理", linkUrl: "general/appNormal/go_main", leaf: true},
            {id:"13",text: "客户管理", linkUrl: "general/appTree/go_main", leaf: true},
            {id:"14",text: "银行卡管理", linkUrl: "general/appTree/go_main", leaf: true}
        ]},
        {id:"2",text: "系统模块", expanded: true, children: [
			{id:"21",text: "数据备份", linkUrl: "general/appNormal/gView/usermy?area_id=2",leaf: true},
			{id:"22",text: "系统监控", linkUrl: "general/appTree/gView/treeuser?id=0",leaf: true}
        ]}
    ]}
});

//左边树
var leftTree = Ext.create('Ext.tree.Panel', {
	title: "业务模块",
  	store: treeStore,
  	border: false,
  	rootVisible: true,
  	listeners: {
	  	itemclick: function(view, rcd, item, idx, event, eOpts){
	       	var dirid = rcd.raw.id; //节点id
	       	var dirtext = rcd.raw.text; //节点text
	       	var dirleaf = rcd.raw.leaf; //节点leaf
	       	var dirurl = rcd.raw.linkUrl; //节点url
			var tab = Ext.getCmp("tab_"+dirid);
	       	if(!tab && dirleaf){
	       		//newIframe
	       		createIframe(rcd);
	       	}else if(!dirleaf){
	       		return;
	       	}
			tab = Ext.getCmp("tab_"+dirid);
			panelCenter.setActiveTab(tab);
	      },
        itemdblclick: function(view, rcd, item, idx, event, eOpts){
	       	//alert("dbclick Body");
	       	var dirid = rcd.raw.id; //节点id
	       	var dirleaf = rcd.raw.leaf; //节点leaf
			var tab = Ext.getCmp("tab_"+dirid);
	       	if(!tab && dirleaf){
				// 添加新的tab，如果tab已经存在，则将其设置为当前可见tab
				createIframe(rcd);
			}else{
				tab.show();
				tab.load(tab.src);
				tab = Ext.getCmp("tab_"+dirid);
				panelCenter.setActiveTab(tab);
			}
	      },
	      itemcontextmenu: function(view, rcd, item, idx, event, eOpts){
	    	  eOpts.preventDefault();
	    	  alert(12333);
	      }
	}
});

//上边
var panelNorth = {
		xtype: 'header',
		region: "north",
		layout: 'fit',
		height: 40,
		items:[
		       {xtype:'button',text:"刷新缓存",
		    		handler : function(btn) {

						Ext.Ajax.request({
							url : "general/flushCahch",
							success : function(response, form) {
								var json = Ext.decode(response.responseText);
								if (json.success === true) {
									Ext.Msg.alert('提示','刷新缓存--成功');
								}
							},
							failure : function(response, fm) {
								Ext.Msg.alert('提示','刷新缓存--失败');
							}
						});
					}
		       }]
};

//左边
var menu=[leftTree,{title:"系统管理",html:"<ul style='list-style-type:none'><li>sssss</li></ul>"},{title:"配置管理"}]; 
var panelWest = new Ext.Panel({
	title: "菜单栏目",
	width:	250,
	maxWidth: 300,
	collapsible: true,//是否可以折叠
	region: "west",
	layout: "accordion",
	items: menu,
	split: true //是否可以分开
});

//右边
var panelEast = new Ext.Panel({
	title: "工具",
	width:	250,
	maxWidth: 200,
	collapsible: true,//是否可以折叠
	region: "east",
	collapsed: false,
	split: true //是否可以分开
});
//中间
var panelCenter=Ext.create('Ext.tab.Panel', {
  region: 'center', // a center region is ALWAYS required for border layout
  deferredRender: false,
  activeTab: 0,     // first tab initially active
  items: [{
      //contentEl: 'center1',
      title: '系统首页',
      closable: false,
      autoScroll: true,
      items:	[{
      			style: {
			            width: 200,
			            paddingTop: '10px'
		        	},
		        	title:'首页模块一',
		        	xtype:'panel'
		        },
		        {
      			style: {
			            width: 200,
			            paddingTop: '10px'
		        	},
		        	title:'首页模块二',
		        	xtype:'panel'}
		        ]
  }]
});
//下边
var panelSouth = Ext.create('Ext.Toolbar',{
  id:"bottom",
  frame:true,
  region:"south",
  height:30,
  items:["当前用户：系统管理员",'->',"技术支持:<a href='http://www.person3.com/' target='_blank' style='text-decoration:none;'><font color='#0000FF'>http://www.person3.com/</font></a>&nbsp;&nbsp;"]
});	
//创建主容器---启动
Ext.onReady(function() {
 	Ext.QuickTips.init();
 	new Ext.Viewport({
 		height: "100%",
 		width: "100%",
		layout:'border',
		items:[panelNorth,panelWest,panelCenter,panelSouth,panelEast]
	});
});
</script>
</head>
<body>
</body>
</html>