Ext 页面布局Sample

最新推荐文章于 2015-07-23 21:36:00 发布
cq_liuqing
最新推荐文章于 2015-07-23 21:36:00 发布
阅读量188
点赞数
分类专栏： ExtJs 文章标签： EXT JavaScript CSS HTML XHTML ViewUI
ExtJs 专栏收录该内容
2 篇文章 0 订阅
订阅专栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript" src="../extRoot/adapter/ext/ext-base.js"></script>
<link rel="stylesheet" type="text/css" href="../extRoot/resources/css/ext-all.css">
<script type="text/javascript" src="../extRoot/ext-all.js"></script>

<style type="text/css"> 
    html, body {
        font:normal 12px verdana;
        margin:0;
        padding:0;
        border:0 none;
        overflow:hidden;
        height:100%;
    }
    p {
        margin:5px;
    }
    .settings {
        background-image:url(../shared/icons/fam/folder_wrench.png);
    }
    .nav {
        background-image:url(../shared/icons/fam/folder_go.png);
    }
</style>

<script type="text/javascript"> 
    Ext.onReady(function(){
	   
	    var item1 = new Ext.Panel({
                    contentEl: 'west',
                    title: 'Navigation',
                    border: false,
                    iconCls: 'nav' // see the HEAD section for style used
                });
		var item2 = new Ext.Panel({
                    contentEl: 'west',
                    title: 'Navigation',
                    border: false,
                    iconCls: 'nav' // see the HEAD section for style used
                });
		var item3 = new Ext.Panel({
                    contentEl: 'west',
                    title: 'Navigation',
                    border: false,
                    iconCls: 'nav' // see the HEAD section for style used
                });
        var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
			{
                // lazily created panel (xtype:'panel' is default)
                region: 'north',
                contentEl: 'north',
                split: true,
                height: 65,
                minSize: 100,
                maxSize: 200,
                collapsible: false,
                margins: '0 0 0 0'
            }
			, {
                // lazily created panel (xtype:'panel' is default)
                region: 'south',
                contentEl: 'south',
                split: true,
                height: 100,
                minSize: 100,
                maxSize: 200,
                collapsible: true,
                title: 'South',
                margins: '0 0 0 0'
            }, {
                region: 'east',
                title: 'East Side',
                collapsible: true,
                split: true,
                width: 125, // give east and west regions a width
                minSize: 175,
                maxSize: 400,
                margins: '0 5 0 0',
                layout: 'fit', // specify layout manager for items
                items:            // this TabPanel is wrapped by another Panel so the title will be applied
                new Ext.TabPanel({
                    border: false, // already wrapped so don't add another border
                    activeTab: 1, // second tab initially active
                    tabPosition: 'bottom',
                    items: [{
                        html: '<p>A TabPanel component can be a region.</p>',
                        title: 'A Tab',
                        autoScroll: true
                    }, new Ext.grid.PropertyGrid({
                        title: 'Property Grid',
                        closable: true,
                        source: {
                            "(name)": "Properties Grid",
                            "grouping": false,
                            "autoFitColumns": true,
                            "productionQuality": false,
                            "created": new Date(Date.parse('10/15/2006')),
                            "tested": false,
                            "version": 0.01,
                            "borderWidth": 1
                        }
                    })]
                })
            }, {
                region: 'west',
                id: 'west-panel', // see Ext.getCmp() below
                title: 'West',
                split: true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins: '0 0 0 5',
                layout: {
                    type: 'accordion',
                    animate: true
                },
                items: [item1,item2,item3]
            },
            // in this instance the TabPanel is not wrapped by another panel
            // since no title is needed, this Panel is added directly
            // as a Container
            new Ext.TabPanel({
                region: 'center', // a center region is ALWAYS required for border layout
                deferredRender: false,
                activeTab: 0,     // first tab initially active
                items: [{
                    contentEl: 'center1',
                    title: 'Close Me',
                    closable: true,
                    autoScroll: true
                }, {
                    contentEl: 'center2',
                    title: 'Center Panel',
                    autoScroll: true
                }]
            })]
        });
        // get a reference to the HTML element with id "hideit" and add a click listener to it 
        Ext.get("hideit").on('click', function(){
            // get a reference to the Panel that was created with id = 'west-panel' 
            var w = Ext.getCmp('west-panel');
            // expand or collapse that Panel based on its collapsed property state
            w.collapsed ? w.expand() : w.collapse();
        });
    });
    </script> 

<script type="text/javascript">
 function usb() {
  Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?', 'ssssssssssssssssss');
 }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
  <div id="north"></div>
 <!-- use class="x-hide-display" to prevent a brief flicker of the content --> 
    <div id="west" class="x-hide-display"> 
        <p>Hi. I'm the west panel.</p> 
    </div> 
    <div id="center2" class="x-hide-display"> 
        <a id="hideit" href="#">Toggle the west region</a> 
        
    </div> 
    <div id="center1" class="x-hide-display"> 
       zzzaaa
    </div> 
    <div id="props-panel" class="x-hide-display" style="width:200px;height:200px;overflow:hidden;"> 
    </div> 
    <div id="south" class="x-hide-display"> 
        <p>southr status bar</p> 
    </div> 
</body>
</html>