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

最新推荐文章于 2017-06-10 17:11:33 发布

让青春不再迷茫

最新推荐文章于 2017-06-10 17:11:33 发布

阅读量1.1k

点赞数

分类专栏： JAVA WEB 文章标签： web 首页模板 extjs portal

本文链接：https://blog.csdn.net/J_oo_L/article/details/48994951

版权

JAVA WEB 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

简述：

这个示例主要是提供了一个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>

附件：

（稍后上传）