• 学习extjs的布局

    现对Extjs中的layout布局进行总结下： layout中有absolute,anchor,border,accordion,card,form,table,column,fit这几种，现一一举例： 1.absolute根据字面意思就知道，是根据具体坐标进行定位的，固不写相应的代码了，其他的如下 2.anchor:其值可以使百分比和数值，数值一般为负数，其代表的意思是如果宽度和长度中有一个设定值了，则anchor代表的是未设置的那个，如果两者都没有设定具体值，则如果需要使用anchor则需要anchro:

    Js代码 复制代码 收藏代码
    1. Ext.onReady(function() {   
    2.        Ext.create('Ext.Window',{ 
    3.         title:'Anchor layout', 
    4.         400, 
    5.         height:400, 
    6.         layout:'anchor', 
    7.         plain: true, 
    8.         items:[ 
    9.             Ext.create('Ext.panel.Panel',{ 
    10.                 title:'panel1', 
    11.                 height:100, 
    12.                 anchor:'-50', 
    13.                 html:'高度等于100，宽度= 容器宽度-50' 
    14.             }), 
    15.             Ext.create('Ext.panel.Panel',{ 
    16.                 title:'panel2', 
    17.                 height:100, 
    18.                 anchor:'50%', 
    19.                 html:'高度等于100，宽度=容器的宽度*50%' 
    20.             }), 
    21.             Ext.create('Ext.panel.Panel',{ 
    22.                 title:'panel3', 
    23.                 anchor:'-10,-200', 
    24.                 html:'高度等于容器高度-10,宽度等于容器宽度-200' 
    25.             }) 
    26.         ] 
    27.          
    28.     }).show();  
    29.     });   
    Ext.onReady(function() {  
       Ext.create('Ext.Window',{
		title:'Anchor layout',
		400,
		height:400,
		layout:'anchor',
		plain: true,
		items:[
			Ext.create('Ext.panel.Panel',{
				title:'panel1',
				height:100,
				anchor:'-50',
				html:'高度等于100，宽度= 容器宽度-50'
			}),
			Ext.create('Ext.panel.Panel',{
				title:'panel2',
				height:100,
				anchor:'50%',
				html:'高度等于100，宽度=容器的宽度*50%'
			}),
			Ext.create('Ext.panel.Panel',{
				title:'panel3',
				anchor:'-10,-200',
				html:'高度等于容器高度-10,宽度等于容器宽度-200'
			})
		]
		
	}).show(); 
    });

    3.border:将容器分为五个区域:east,south,west,north,center

    Js代码 复制代码 收藏代码
    1. Ext.onReady(function(){ 
    2.          var tab = Ext.create('Ext.tab.Panel',{ 
    3.         region:'center',//border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间   
    4.         margins:'3,3,3,0', 
    5.         activeTab:0, 
    6.         defaults:{ 
    7.             autoScroll:true 
    8.         }, 
    9.         items:[{ 
    10.             title:'tab1', 
    11.             html:'第一个tab内容' 
    12.         },{ 
    13.             title:'tab2', 
    14.             html:'第二个tab内容' 
    15.         },{ 
    16.             title:'tab3', 
    17.             html:'第三个tab内容' 
    18.         }] 
    19.          
    20.     }) 
    21.     var nav = Ext.create('Ext.panel.Panel',{ 
    22.         title:'navigation', 
    23.         region:'west', 
    24.         split:true, 
    25.         200, 
    26.         collapsible:true,//允许伸缩 
    27.         margins:'3,0,3,3', 
    28.         cmargins:'3,3,3,' 
    29.     }); 
    30.     Ext.create('Ext.Window',{ 
    31.         title:'Layout Window', 
    32.         600, 
    33.         height:350, 
    34.         closable:true, 
    35.         border:false, 
    36.         plain:true, 
    37.         layout:'border', 
    38.         closeAction:'hide', 
    39.         items:[nav,tab] 
    40.     }).show(); 
    41. )};  
    Ext.onReady(function(){
         var tab = Ext.create('Ext.tab.Panel',{
		region:'center',//border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间  
		margins:'3,3,3,0',
		activeTab:0,
		defaults:{
			autoScroll:true
		},
		items:[{
			title:'tab1',
			html:'第一个tab内容'
		},{
			title:'tab2',
			html:'第二个tab内容'
		},{
			title:'tab3',
			html:'第三个tab内容'
		}]
		
	})
	var nav = Ext.create('Ext.panel.Panel',{
		title:'navigation',
		region:'west',
		split:true,
		200,
		collapsible:true,//允许伸缩
		margins:'3,0,3,3',
		cmargins:'3,3,3,'
	});
	Ext.create('Ext.Window',{
		title:'Layout Window',
		600,
		height:350,
		closable:true,
		border:false,
		plain:true,
		layout:'border',
		closeAction:'hide',
		items:[nav,tab]
	}).show();
)};

    4.accordion:这个风格是手风琴式的，效果是如果 有多个item，则点击其中一个，则展开，其他的则收缩。

    Js代码 复制代码 收藏代码
    1. Ext.OnReady(function(){   
    2.      Ext.create('Ext.panel.Panel',{ 
    3.         title:'容器组件', 
    4.         layout:'accordion', 
    5.         600, 
    6.         height:200, 
    7.         layoutConfig:{animate:false}, 
    8.         items:[{ 
    9.            title:'元素1',html:'' 
    10.         },{ 
    11.            title:'元素2',html:'' 
    12.         },{ 
    13.            title:'元素3',html:'' 
    14.         },{ 
    15.            title:'元素4',html:'' 
    16.         }] 
    17.          
    18.     });  
    19. });   
    Ext.OnReady(function(){  
     Ext.create('Ext.panel.Panel',{
		title:'容器组件',
		layout:'accordion',
		600,
		height:200,
		layoutConfig:{animate:false},
		items:[{
		   title:'元素1',html:''
		},{
		   title:'元素2',html:''
		},{
		   title:'元素3',html:''
		},{
		   title:'元素4',html:''
		}]
		
	}); 
});

    5.card:像安装向导一样，一张一张显示

    Js代码 复制代码 收藏代码
    1. Ext.onReady(function(){ 
    2.     var navigate = function(panel,direction){ 
    3.         var layout = panel.getLayout(); 
    4.         layout[direction](); 
    5.         Ext.getCmp('move-prev').setDisabled(!layout.getPrev()); 
    6.         Ext.getCmp('move-next').setDisabled(!layout.getNext()); 
    7.     }; 
    8.     Ext.create('Ext.panel.Panel',{ 
    9.                 title:'Example Wizard', 
    10.                 height:500, 
    11.                 400, 
    12.                 layout: 'card', 
    13.                 activeItem:0, 
    14.                 bodyStyle:'padding:15px', 
    15.                 animCollapse:true, 
    16.                 renderTo:Ext.getBody(), 
    17.                 defaults:{ 
    18.                      // applied to each contained panel 
    19.                     border: false 
    20.                 }, 
    21.                 bbar:[{ 
    22.                     id:'move-prev', 
    23.                     text:'back', 
    24.                     handler:function(btn){ 
    25.                         navigate(btn.up("panel"),"prev"); 
    26.                     }, 
    27.                     disabled:true 
    28.                 },'->',{ 
    29.                     id:'move-next', 
    30.                     text:"next", 
    31.                     handler:function(btn){ 
    32.                         navigate(btn.up("panel"),"next"); 
    33.                     } 
    34.                 }], 
    35.                 items:[{ 
    36.                     id:'card-0', 
    37.                     html:'<h1>Welcome to the Wizard!</h1>' 
    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.             }); 
    46. });  
    Ext.onReady(function(){
	var navigate = function(panel,direction){
		var layout = panel.getLayout();
		layout[direction]();
		Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
		Ext.getCmp('move-next').setDisabled(!layout.getNext());
	};
	Ext.create('Ext.panel.Panel',{
				title:'Example Wizard',
				height:500,
				400,
				layout: 'card',
				activeItem:0,
				bodyStyle:'padding:15px',
				animCollapse:true,
				renderTo:Ext.getBody(),
				defaults:{
       				 // applied to each contained panel
        			border: false
   				},
				bbar:[{
					id:'move-prev',
					text:'back',
					handler:function(btn){
						navigate(btn.up("panel"),"prev");
					},
					disabled:true
				},'->',{
					id:'move-next',
					text:"next",
					handler:function(btn){
						navigate(btn.up("panel"),"next");
					}
				}],
				items:[{
					id:'card-0',
					html:'<h1>Welcome to the Wizard!</h1>'
				},{
					id:'card-1',
					html:'<p>step 2 of 3 </p>'
				},{
					id:'card-2',
					html:'<h1>Congratulations!</h1><p>Step 3 of  3-complete</p>'
				}]
			});
});

    6.form:是一种专门用于管理表单中输入字段的布局

    Js代码 复制代码 收藏代码
    1. Ext.onReady(function() {   
    2.         var win = Ext.create('Ext.Window',{   
    3.             title: "form Layout",   
    4.             height: 150,   
    5.             230,   
    6.             plain: true,   
    7.             bodyStyle: 'padding:15px',   
    8.             items:    
    9.             {   
    10.                 xtype: "form",   
    11.                 labelWidth: 30,   
    12.                 defaultType: "textfield",   
    13.                 frame:true,   
    14.                 items:    
    15.                 [   
    16.                     {   
    17.                         fieldLabel:"姓名",   
    18.                         name:"username",   
    19.                         allowBlank:false   
    20.                     },   
    21.                     {   
    22.                         fieldLabel:"呢称",   
    23.                         name:"nickname"   
    24.                     },   
    25.                     {   
    26.                         fieldLabel: "生日",   
    27.                         xtype:'datefield',   
    28.                         name: "birthday",   
    29.                         127   
    30.                     }   
    31.                 ]   
    32.             }   
    33.         });   
    34.         win.show();   
    35.     });    
    Ext.onReady(function() {  
        var win = Ext.create('Ext.Window',{  
            title: "form Layout",  
            height: 150,  
             230,  
            plain: true,  
            bodyStyle: 'padding:15px',  
            items:   
            {  
                xtype: "form",  
                labelWidth: 30,  
                defaultType: "textfield",  
                frame:true,  
                items:   
                [  
                    {  
                        fieldLabel:"姓名",  
                        name:"username",  
                        allowBlank:false  
                    },  
                    {  
                        fieldLabel:"呢称",  
                        name:"nickname"  
                    },  
                    {  
                        fieldLabel: "生日",  
                        xtype:'datefield',  
                        name: "birthday",  
                        127  
                    }  
                ]  
            }  
        });  
        win.show();  
    });

    7.table:按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列

    Js代码 复制代码 收藏代码
    1. Ext.onReady(function(){   
    2.       Ext.create('Ext.panel.Panel',   
    3.       {   
    4.        renderTo:Ext.getBody(),   
    5.        title:'容器组件',   
    6.        layout:'table',          
    7.        500,   
    8.        height:200,   
    9.        layoutConfig:{columns:3},//将父容器分成3列   
    10.        items:[   
    11.         {title:'元素1',html:'ssssssssss',rowspan:2,height:100},   
    12.         {title:'元素2',html:'dfffsddsdfsdf',colspan:2},   
    13.         {title:'元素3',html:'sdfsdfsdf'},   
    14.         {title:'元素4',html:''}   
    15.        ]   
    16.       }   
    17.      );   
    18. });   
    Ext.onReady(function(){  
      Ext.create('Ext.panel.Panel',  
      {  
       renderTo:Ext.getBody(),  
       title:'容器组件',  
       layout:'table',         
       500,  
       height:200,  
       layoutConfig:{columns:3},//将父容器分成3列  
       items:[  
        {title:'元素1',html:'ssssssssss',rowspan:2,height:100},  
        {title:'元素2',html:'dfffsddsdfsdf',colspan:2},  
        {title:'元素3',html:'sdfsdfsdf'},  
        {title:'元素4',html:''}  
       ]  
      }  
     );  
});

    8.column:把整个容器看成一列,然后向容器放入子元素时

    Js代码 复制代码 收藏代码
    1. Ext.onReady(function() {   
    2.         var win = Ext.create('Ext.Window',{   
    3.             title: "Column Layout",   
    4.             height: 300,   
    5.             400,   
    6.             plain: true,   
    7.             layout: 'column',   
    8.             items: [{   
    9.                 title:"width=50%",   
    10.                 columnWidth:0.5,   
    11.                 html:"width=(容器宽度-容器内其它组件固定宽度)*50%",   
    12.                 height:200   
    13.             },   
    14.             {   
    15.                 title:"width=250px",   
    16.                 200,   
    17.                 height:100,   
    18.                 html:"固定宽度为250px"   
    19.             }               
    20.             ]   
    21.         });   
    22.         win.show();   
    23.     });    
    Ext.onReady(function() {  
        var win = Ext.create('Ext.Window',{  
            title: "Column Layout",  
            height: 300,  
             400,  
            plain: true,  
            layout: 'column',  
            items: [{  
                title:"width=50%",  
                columnWidth:0.5,  
                html:"width=(容器宽度-容器内其它组件固定宽度)*50%",  
                height:200  
            },  
            {  
                title:"width=250px",  
                 200,  
                height:100,  
                html:"固定宽度为250px"  
            }              
            ]  
        });  
        win.show();  
    });

    9.fit:填充整个容器（如果多个子元素则只有一个元素充满整个容器）

    Js代码 复制代码 收藏代码
    1. Ext.OnReady(function(){   
    2.    Ext.create(Ext.create(Ext.panel.Panel',   
    3.       {   
    4.        renderTo:'paneldiv',   
    5.        title:'容器组件',   
    6.        layout:'fit',   
    7.        500,   
    8.        height:100,   
    9.        items:[   
    10.         {title:'子元素1'},   
    11.         {title:'子元素2'},   
    12.         {title:'子元素3'},   
    13.         {title:'子元素4'},   
    14.         {title:'子元素5'}   
    15.        ]   
    16.       }   
    17.      );   
    18. });  
  • 相关阅读:
    py3学习笔记0（入坑）
    为什么很多PHP文件最后都没有?>
    作业
    凯撒密码、GDP格式化输出、99乘法表
    作业4
    作业3
    turtle库基础练习
    作业2
    作业1
    编译原理有限自动机的构造与识别
  • 原文地址：https://www.cnblogs.com/yycan/p/3042473.html
Copyright © 2020-2023  润新知