zoukankan      html  css  js  c++  java

  • 学习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. });  
  • 相关阅读:
    Learn Prolog Now 翻译
    Learn Prolog Now 翻译
    Learn Prolog Now 翻译
    Learn Prolog Now 翻译
    Learn Prolog Now 翻译
    Learn Prolog Now 翻译
    Learn Prolog Now 翻译
    Learn Prolog Now 翻译
    Learn Prolog Now 翻译
    Learn Prolog Now 翻译
  • 原文地址：https://www.cnblogs.com/yycan/p/3042473.html
Copyright © 2011-2022 走看看