Extjs-实用工具门户组件 Ext.ux.portal

最新推荐文章于 2014-10-14 16:23:45 发布

itlwc

最新推荐文章于 2014-10-14 16:23:45 发布

阅读量6.8k

点赞数

分类专栏： Extjs 文章标签：工具

本文链接：https://blog.csdn.net/itlwc/article/details/7887563

版权

Extjs 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

1.Ext.ux.Portal是以Ext.Panel为基础编写的一个扩展组件
效果图

代码

<%@ page language="java"  pageEncoding="UTF-8"%>
<%	String rootpath = request.getContextPath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/>
	<script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script>
	
	<script type="text/javascript" src="<%=rootpath%>/ext/ux/Portal.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ux/PortalColumn.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ux/Portlet.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ux/Portal.js"></script>
	<link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/ux/css/Portal.css"/>
	
	<script type="text/javascript">
		Ext.onReady(function(){
			var grid = new Ext.grid.GridPanel({
		        autoHeight : true,
		        store: new Ext.data.SimpleStore({
		            data: [
		                ['1','name1'],
		                ['2','name2'],
		                ['3','name3'],
		                ['4','name4'],
		                ['5','name5']
		            ],
		            fields: ['id', 'name']
		        }),
		        columns: [
		            {header:'编号',dataIndex:'id',sortable:true},
		            {header:'名称',dataIndex:'name'}
		        ]
		    });
		    var tree = new Ext.tree.TreePanel({
		        loader: new Ext.tree.TreeLoader(),
		        root: new Ext.tree.AsyncTreeNode({
		            text: 'root node',
		            children: [
		                {text: 'Leaf No. 1',leaf: true},
		                {text: 'Leaf No. 2',leaf: true}
		            ]
		        })
		    });
		    var form = new Ext.form.FormPanel({
		        labelWidth: 70,
		        labelAlign: 'right',
		        defaultType: 'textfield',
		        items: [{
		            fieldLabel: 'name'
		        }, {
		            fieldLabel: 'text'
		        }, {
		            fieldLabel: 'other'
		        }]
		    });
			var viewport = new Ext.Viewport({
		        layout: 'border',
		        items: [{
		            region: 'west',
		            width: 200,
		            layout: 'accordion',
		            items: [{
		                title: '菜单1',
		                html: '菜单1的内容'
		            },{
		                title: '菜单2',
		                html: '菜单2的内容'
		            }]
		        },{
		            region: 'center',
		            xtype: 'portal',
		            items: [{
		                columnWidth: 0.33,
		                //style:'padding:10px 0 10px 10px',
		                items:[{
		                    title: 'portal-1',
		                    height: 200,
		                    layout : 'fit',
		                    items:[grid]
		                }]
		            }, {
		                columnWidth: 0.33,
		                //style:'padding:10px 0 10px 10px',
		                items:[{
		                    title: 'portal-2',
		                    height: 200,
		                    layout : 'fit',
		                    items:[tree]
		                }]
		            }, {
		                columnWidth: 0.33,
		                //style:'padding:10px 0 10px 10px',
		                items:[{
		                    title: 'portal-3',
		                    height: 200,
		                    layout : 'fit',
		                   	items:[form]
		                }]
		            }]
		        }]
		    });
		});
    </script>
   </head>
   <body>
   </body>
</html>

itlwc

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Extjs-实用工具门户组件 Ext.ux.portal

1.Ext.ux.Portal是以Ext.Panel为基础编写的一个扩展组件效果图代码 /ext/resources/css/ext-all.css"/> /ext/adapter/ext/ext-base.js"> /ext/ext-all.js"> /ext/ext-all-debug.js"> /ext/ext-lang-zh_CN.js"> /e
复制链接

扫一扫