ext经典布局，图片

 1、card

 1             var navigate = function (panel, direction) {
 2                 var layout = panel.getLayout();
 3                 layout[direction]();
 4                 Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
 5                 Ext.getCmp('move-next').setDisabled(!layout.getNext());
 6             };
 7 
 8             Ext.create('Ext.panel.Panel', {
 9                 title: 'Example Wizard',
10                 width: 300,
11                 height: 200,
12                 layout: 'card',
13                 bodyStyle: 'padding:15px',
14                 defaults: {
15                     border: false
16                 },
17                 bbar: [
18         {
19             id: 'move-prev',
20             text: 'Back',
21             handler: function (btn) {
22                 navigate(btn.up("panel"), "prev");
23             },
24             disabled: true
25         },
26         '->', 
27         {
28         id: 'move-next',
29         text: 'Next',
30         handler: function (btn) {
31             navigate(btn.up("panel"), "next");
32         }
33     }
34     ],
35                 items: [{
36                     id: 'card-0',
37                     html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
38                 }, {
39                     id: 'card-1',
40                     html: '<p>Step 2 of 3</p>'
41                 }, {
42                     id: 'card-2',
43                     html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
44                 }],
45                 renderTo: Ext.getBody()
46             });

效果图

 

2、vbox

 1    Ext.create('Ext.Panel', {
 2                 width: 500,
 3                 height: 400,
 4                 title: "VBoxLayout Panel",
 5                 layout: {
 6                     type: 'vbox',
 7                     align: 'center'
 8                 },
 9                 renderTo: document.body,
10                 items: [{
11                     xtype: 'panel',
12                     title: 'Inner Panel One',
13                     width: 250,
14                     flex: 2
15                 },
16     {
17         xtype: 'panel',
18         title: 'Inner Panel Two',
19         width: 250,
20         flex: 7
21     },
22     {
23         xtype: 'panel',
24         title: 'Inner Panel Three',
25         width: '100%',
26         flex: 1
27     }]
28             });

效果图

 

3、table

 

 1 Ext.create('Ext.panel.Panel', {
 2     title : 'Table Layout',
 3     width : 300,
 4     height : 150,
 5     layout : {
 6         type : 'table',
 7         columns : 3
 8     },
 9     defaults : {
10         bodyStyle : 'padding:20px'
11     },
12     items : [{
13             html : 'Cell A content',
14             rowspan : 2
15         }, {
16             html : 'Cell B content',
17             colspan : 2
18         }, {
19             html : 'Cell C content',
20             cellCls : 'highlight'
21         }, {
22             html : 'Cell D content'
23         }
24     ],
25     renderTo : Ext.getBody()
26 });

效果图

 

4、hbox

 1 Ext.create('Ext.Panel', {
 2     width : 500,
 3     height : 300,
 4     title : "HBoxLayout Panel",
 5     layout : {
 6         type : 'hbox',
 7         align : 'stretch'
 8     },
 9     renderTo : document.body,
10     items : [{
11             xtype : 'panel',
12             title : 'Inner Panel One',
13             flex : 2
14         }, {
15             xtype : 'panel',
16             title : 'Inner Panel Two',
17             flex : 1
18         }, {
19             xtype : 'panel',
20             title : 'Inner Panel Three',
21             flex : 1
22         }
23     ]
24 });

效果图

 

5、fit

 1 Ext.create('Ext.panel.Panel', {
 2     title : 'Fit Layout',
 3     width : 300,
 4     height : 150,
 5     layout : 'fit',
 6     items : {
 7         title : 'Inner Panel',
 8         html : 'This is the inner panel content',
 9         bodyPadding : 20,
10         border : false
11     },
12     renderTo : Ext.getBody()
13 });

效果图

 

6、column

 1 Ext.create('Ext.panel.Panel', {
 2     title : 'Column Layout - Percentage Only',
 3     width : 350,
 4     height : 250,
 5     layout : 'column',
 6     items : [{
 7             title : 'Column 1',
 8             columnWidth : .25
 9         }, {
10             title : 'Column 2',
11             columnWidth : .55
12         }, {
13             title : 'Column 3',
14             columnWidth : .20
15         }
16     ],
17     renderTo : Ext.getBody()
18 });
19 
20 Ext.create('Ext.Panel', {
21     title : 'Column Layout - Mixed',
22     width : 350,
23     height : 250,
24     layout : 'column',
25     items : [{
26             title : 'Column 1',
27             width : 120
28         }, {
29             title : 'Column 2',
30             columnWidth : .7
31         }, {
32             title : 'Column 3',
33             columnWidth : .3
34         }
35     ],
36     renderTo : Ext.getBody()
37 });

效果图

 

7、anchor

 1 Ext.create('Ext.Panel', {
 2     width : 500,
 3     height : 400,
 4     title : "AnchorLayout Panel",
 5     layout : 'anchor',
 6     renderTo : Ext.getBody(),
 7     items : [{
 8             xtype : 'panel',
 9             title : '75% Width and 20% Height',
10             anchor : '75% 20%'
11         }, {
12             xtype : 'panel',
13             title : 'Offset -300 Width & -200 Height',
14             anchor : '-300 -200'
15         }, {
16             xtype : 'panel',
17             title : 'Mixed Offset and Percent',
18             anchor : '-250 20%'
19         }
20     ]
21 });

效果图

 

8、accordion

 1 Ext.create('Ext.panel.Panel', {
 2     title : 'Accordion Layout',
 3     width : 300,
 4     height : 300,
 5     layout : 'accordion',
 6     defaults : {
 7         bodyStyle : 'padding:15px'
 8     },
 9     layoutConfig : {
10         titleCollapse : false,
11         animate : true,
12         activeOnTop : true
13     },
14     items : [{
15             title : 'Panel 1',
16             html : 'Panel content!'
17         }, {
18             title : 'Panel 2',
19             html : 'Panel content!'
20         }, {
21             title : 'Panel 3',
22             html : 'Panel content!'
23         }
24     ],
25     renderTo : Ext.getBody()
26 });

效果图

9、auto

 1 Ext.create('Ext.Panel', {
 2     width : 500,
 3     height : 280,
 4     title : "AutoLayout Panel",
 5     layout : 'auto',
 6     renderTo : document.body,
 7     items : [{
 8             xtype : 'panel',
 9             title : 'Top Inner Panel',
10             width : '75%',
11             height : 90
12         }, {
13             xtype : 'panel',
14             title : 'Bottom Inner Panel',
15             width : '75%',
16             height : 90
17         }
18     ]
19 });

效果图

 

10、border

 1 Ext.create('Ext.container.Viewport', {
 2     layout : 'border',
 3     defaults : {
 4         style : {
 5             borderStyle : 'solid',
 6             borderWidth : '0px'
 7         }
 8     },
 9     items : [{
10             region : 'north',
11             html : 'Page Title',
12             title : 'north'
13         }, {
14             region : 'west',
15             collapsible : true,
16             title : 'Navigation',
17             width : 150
18         }, {
19             split : true,
20             region : 'south',
21             title : 'South Panel',
22             collapsible : true,
23             html : 'Information goes here',
24             height : 100,
25             minHeight : 100
26         }, {
27             split : true,
28             region : 'east',
29             title : 'East Panel',
30             collapsible : true,
31             width : 150
32         }, {
33             region : 'center',
34             xtype : 'tabpanel',
35             activeTab : 0,
36             items : {
37                 title : 'Default Tab',
38                 html : 'The first tab\'s content. Others may be added dynamically'
39             }
40         }
41     ]
42 });

效果图

 

 

 

 

 

 

 

ext经典布局

2010-07-19 13:50

<script type="text/javascript"> 
var Tree = Ext.tree; 
var root = new Tree.AsyncTreeNode({ 
     text: 'Ext JS', 
     draggable:false, 
     id:'root' 
}); 
// 左边树面板 
var tree = new Ext.tree.TreePanel({ 
     contentEl:'west', 
     border:true, 
     root:root, 
     region:'west', 
     id:'west-panel', 
     split:true, 
     width: 200, 
     minSize: 175, 
     maxSize: 400, 
     margins:'0 0 0 0', 
     layout:'accordion', 
     title:'功能菜单', 
     collapsible :true, 
     layoutConfig:{ 
         animate:true 
         }, 
     rootVisible:false, 
     autoScroll:true, 
     loader: new Tree.TreeLoader({ 
         dataUrl:'index.php?model=main&action=tree' 
         }) 
     }); 
tree.on('click',treeClick); 
//tree.expandAll(); 
var tab = new Ext.TabPanel({//右边标签面板 
     region:'center', 
     deferredRender:false, 
     activeTab:0, 
     items:[{ 
         contentEl:'center2', 
         title: '首页', 
         autoScroll:true 
     }] 
}); 
function treeClick(node,e) {//树节点点击事件 
      if(node.isLeaf()){ 
         e.stopEvent(); 
         var n = tab.getComponent(node.id); 
         if (!n) { 
             var n = tab.add({ 
                 'id' : node.id, 
                 'title' : node.text, 
                 closable:true, 
                 html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="index.php?model='+node.attributes.model+'&action='+node.attributes.action+'"></iframe>' 
                 }); 
         } 
         tab.setActiveTab(n); 
      } 
} 
function newTab(id,text,url) {//新建一个标签 
       var n = tab.getComponent(id); 
         if (!n) { 
             var n = tab.add({ 
                 'id' : id, 
                 'title' : text, 
                 closable:true, 
                 html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+url+'"></iframe>' 
                 }); 
         } 
         tab.setActiveTab(n); 
} 
Ext.onReady(function(){ 
    var viewport = new Ext.Viewport({//布局 
         layout:'border', 
         items:[ 
             new Ext.BoxComponent({//头部 
                 region:'north', 
                 el: 'north', 
                 height:35 
             }), 
             tree,//左 
             tab//右 
          ] 
     }); 
       
     tree.render(); 
     root.expand(); 
     loadend(); 
}); 
function openWindow(id,title,url,width,height){ 
     var win = Ext.get(id) 
     if (win) { 
         win.show(); 
         return; 
     } 
     win = new Ext.Window({ 
         id:id, 
         title:title, 
         layout:'fit', 
         width:width, 
         height:height, 
         closeAction:'close', 
         collapsible:true, 
         plain: true, 
         html : '<iframe frameborder="0" width="100%" height="100%" src="'+url+'"></iframe>' 
     }); 
     win.show(); 
} 
</script> 
<div id="north"> 
<p class="api-title">MYOIS 1.0 Office Information System</p> 
</div> 
<div id="west"> 
</div> 
<div id="center2"></div>

如图:

 

 

<!--EndFragment-->