您的位置：首页 > Web前端 > JavaScript

门户首页自定义模块面板模板，基于extjs4.2

2015-10-09 08:52 549 查看
简述：

  这个示例主要是提供了一个panel里面放置了几个自定义的panel（具体个数要看你有多少个模块），这些panel可以随意拖动，大小也可调整，滚动条自适应显示

 稍后我们便可以在这些自定义panel中添加自己的具体内容了。

下面是实际的效果图：



页面代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portal Layout Sample</title>
<link rel="stylesheet" type="text/css" href="portal.css" />
<link rel="stylesheet" type="text/css" href="resources/ext-theme-classic/ext-theme-classic-all.css">
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript">
Ext.Loader.setPath('Ext.app', 'classes');
</script>
<script type="text/javascript" src="classes/PortalPanel.js"></script>
<script type="text/javascript" src="classes/PortalColumn.js"></script>
<script type="text/javascript" src="classes/PortalDropZone.js"></script>
<script type="text/javascript">
Ext.require([
'Ext.layout.container.*',
'Ext.resizer.Splitter',
'Ext.fx.target.Element',
'Ext.fx.target.Component',
'Ext.window.Window',
'Ext.app.PortalColumn',
'Ext.app.PortalPanel',
'Ext.app.Portlet',
'Ext.app.PortalDropZone',
]);
Ext.onReady(function(){
var content = '<div class="portlet-content">hahhahahahhhahahahah<br/>hahahahahaha<br/></div>';
// Explicitly create a Container
Ext.create('Ext.container.Container', {
layout: 'auto',
renderTo: Ext.get("main"),
xtype: 'panel',
items: [{
id: 'app-portal',
xtype: 'portalpanel',
region: 'center',
items: [{
id: 'col-1',
items: [{
id: 'portlet-1',
title: '工作提示',
resizable : true,
html: content

},{
id: 'portlet-2',
title: '人员信息查询',
resizable : true,
html: content

},{
id: 'portlet-3',
title: '学历分布',
resizable : true,
html: content

}]
},{
id: 'col-2',
items: [{
id: 'portlet-4',
title: '人员结构',
html: content,
resizable : true

},{
id: 'portlet-5',
title: '学位分布',
html: content,
resizable : true,
}]
}]
}]
});

});
</script>
</head>
<body>
<!-- 自定义面板的容器 -->
<div id="main" style="margin-left:200px;margin-top:200px;"></div>
</body>
</html>

附件：
（稍后上传）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  web 首页模板 extjs portal
相关文章推荐
新的分享
章节导航