您的位置：首页 > 其它

Ext Viewport实现页面布局

2009-12-31 16:39 232 查看

下面是使用Ext JS中的布局对象Viewport实现的页面整体布局实例:[b](看看这里)[/b]

<html><head><title>ExtSystem</title><meta http-equiv="content-type" content="text/html; charset=gb2312"><link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"><style type="text/css">.settings {background-image:url(images/fam/folder_wrench.png);}.nav {background-image:url(images/fam/folder_go.png);}.user {background-image:url(images/fam/user.png);}.user_edit {background-image:url(images/fam/user_edit.png);}.refresh {background-image:url(images/Refresh.gif) !important;}</style><script type="text/javascript" src="adapter/ext/ext-base.js"></script><script type="text/javascript" src="ext-all.js"></script><script type="text/javascript">Ext.onReady(function(){Ext.QuickTips.init();var toolBar =  new Ext.Toolbar({//renderTo:"ToolBar",autoheight:true,autoWidth:true,items:[{text:"刷新",tooltip:"刷新该选项卡",iconCls:"refresh"}]});var MenuBlock = function(config){                config = config || {};                var items = config.items;                if(items)                {                    var root = new Ext.tree.TreeNode();                    for(var i=0;i<items.length;i++)                    {                        root.appendChild(new Ext.tree.TreeNode(Ext.apply({                            listeners: {                                'click': function(target, evt){                                    evt.stopEvent();var itemCount =  contentTabs.items.length;var itemTitle = '';var isExist = false;for(var j=0;j<itemCount;j++){tabTitle = 	contentTabs.get(j).title;if(tabTitle==target.text){isExist = true;}}if(!isExist){contentTabs.add({title: target.text,autoLoad:{url:target.id,scripts:true},closable:true}).show();}                                }                            }                        }, items[i])));                    }                                        config.items = [new Ext.tree.TreePanel({                            autoScroll : true,                            animate : true,                            border : false,                            rootVisible : false,                            root : root                        })];                }                MenuBlock.superclass.constructor.call(this, config);            }            Ext.extend(MenuBlock, Ext.Panel);var contentTabs = new Ext.TabPanel({activeTab: 0,height:600,border: true,deferredRender: false,tabPosition: 'top',items: [{title:"订单信息",closable: true,                    autoScroll: true,iconCls:"user_edit",autoLoad:{url:"http://localhost/aspTest/shop.asp",scripts:true}}]});new Ext.Viewport({layout: 'border',margins:'5 0 5 5',items: [ {region: 'west',collapsible: true,split: true,width: 200, minSize: 175,maxSize: 400,title: '系统菜单',layout: {type: 'accordion',animate: true},items:[new MenuBlock({title: "客户管理",iconCls: "user",items: [{text: "会员管理", id: "http://www.baidu.com"},{text: "非会员管理", id: 'DataGridPage.html'}]}),new MenuBlock({title: "订单管理",items: [{text: '订单信息', id: 'node1.html'},{text: '订单日志', id: 'node2.html'}]})]},{region: 'center',title: '系统数据显示',tbar:[toolBar],//xtype: 'tabpanel',items: [contentTabs]}]});});</script></head><body>  <div id="Container">  <div id="ToolBar"></div>  <div id="Content"></div>  <div id="StatuBar"></div>  </div></body></html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航