当前位置:首页 > 开发 > Web前端 > Ext > 正文

【初学EXT】布局

发表于: 2015-11-13   作者:互联网   来源:转载   浏览:
ext
摘要: 官网的例子太强大了:http://www.sencha.com/products/extjs/examples/ 常用界面都有例子,方便学习使用啊 这一节主要学习布局 学习地址:http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/layout-browser/layout-browser.html 一、absolute 绝对定位

官网的例子太强大了:http://www.sencha.com/products/extjs/examples/
常用界面都有例子,方便学习使用啊
这一节主要学习布局
学习地址:http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/layout-browser/layout-browser.html

一、absolute

绝对定位

【初学EXT】布局

 

	Ext.onReady(function() {//页面初始化代码

		var panel = new Ext.Panel({

			text : "展示",

			renderTo : document.body,

			width : 400,

			height : 300,

			layout : 'absolute',

			items : [ {

				title : 'Panel 1',

				width : 200,

				height : 100,

				x : 50,

				y : 50,

				html : 'Positioned at x:50, y:50'

			}, {

				title : 'Panel 2',

				width : 250,

				height : 100,

				x : 100,

				y : 100,

				html : 'Positioned at x:125, y:125'

			} ]

		});

	})

注:

layout : 'absolute',指明布局方式
x : 50,y : 50,指明离X方向,y方向的绝对距离

二、accordion

折叠式面板,默认打开第一个(我首先想到了一些购物网站左侧菜单栏是不是可以用这个实现呢?留待以后尝试)

【初学EXT】布局

 

	var panel = new Ext.Panel({

			layout: 'accordion',

			renderTo : document.body,

			width : 200,

			height : 200,

			items:[{

			    title: 'Panel 1',

			    html: 'Content'

			},{

			    title: 'Panel 2',

			    id: 'panel2',

			    html: 'Content2'

			}]

		});


三、anchor

 

绝对定位


 

	var panel = new Ext.Panel({

			renderTo : document.body,

			width : 300,

			height :400,

			layout: 'anchor',

			items: [{

			    title: 'Panel 1',

			    height: 100,

			    anchor: '50%',

			    html: 'Panel 1 50%'

			},{

			    title: 'Panel 2',

			    height: 100,

			    anchor: '-100',

			    html: 'Panel 2 -100'

			},{

			    title: 'Panel 3',

			    anchor: '-10, -262',

			    html: 'Panel 3 -10, -262'

			}]

		});

四、border

 

边框式
【初学EXT】布局

 

var panel = new Ext.Panel({

			renderTo : document.body,

			width : 500,

			height :400,

			layout: 'border',

			bodyBorder: false,

			defaults: {

			    collapsible: true,

			    split: true,

			    bodyPadding: 15

			},

			items: [{

			    title: 'top',

			    region: 'north',

			    height: 50,

			    minHeight: 25,

			    maxHeight: 50,

			    margins: '5 0 0 5',//上   右  下   左

			    html:"top content"

			},{

			    title: 'Footer',

			    region: 'south',

			    height: 50,

			    minHeight:25,

			    maxHeight:50,

			    margins: '0 0 5 0',//上   右  下   左

			    html:"Footer content"

			},{

			    title: 'Navigation',

			    region:'west',

			    floatable: false,

			    margins: '5 0 0 0',

			    width: 100,

			    minWidth: 50,

			    maxWidth: 100,

			    html: "Secondary content like navigation links could go here"

			},{

			    title: 'Main Content',

			    collapsible: false,

			    region: 'center',

			    margins: '5 0 0 0',

			    html: "Main Page This is where the main content would go"

			},{

			    title: 'right',

			    region: 'east',

			    width: 100, 

			    margins: '5 0 0 0',

			    html:"right content"

			}]

		});

五、TabPanel

 

【初学EXT】布局

 

	var panel = new Ext.TabPanel({

			renderTo : document.body,

			width : 200,

			height :200,

			bodyBorder: true,

			activeTab: 0, // index or id

			items:[{

			    title: 'Tab 1',

			    html: 'This is tab 1 content.'

			},{

			    title: 'Tab 2',

			    html: 'This is tab 2 content.'

			},{

			    title: 'Tab 3',

			    html: 'This is tab 3 content.'

			}]

		});

六、Card (Wizard)
自定义向导风格

 

【初学EXT】布局

 

var panel = new Ext.Panel({

			renderTo : document.body,

			width : 300,

			height :300,

			bodyBorder: true,

			bodyStyle: 'padding:15px',

			layout:'card',

			activeItem: 0, // index or id

			bbar: ['->', {

			    id: 'card-prev',

			    text: '« Previous',

			    handler: function(btn) {

	            },

	            disabled: true

			},{

			    id: 'card-next',

			    text: 'Next »',

			    handler: function(btn) {

		        }

			}],

			items: [{

			    id: 'card-0',

			    html: 'Step 1'

			},{

			    id: 'card-1',

			    html: 'Step 2'

			},{

			    id: 'card-2',

			    html: 'Step 3'

			}]

		});

注:事件还未学习,按钮点击未实现,待解决
七、column

 

【初学EXT】布局

var panel = new Ext.Panel({

			renderTo : document.body,

			width : 400,

			height : 200,

			bodyBorder : true,

			bodyStyle : 'padding:15px',

			layout : 'column',

			items : [ {

				title : 'Width = 25%',

				columnWidth : .25,

				items : [ {

					xtype : "button",

					text : "Content"

				}, {

					xtype : "button",

					text : "Content"

				} ]

			}, {

				title : 'Width = 75%',

				columnWidth : .75,

				html : 'Content'

			}, {

				title : 'Width = 100px',

				width : 100,

				html : 'Content'

			} ]

		});

八、Fit

【初学EXT】布局

 

var panel = new Ext.Panel(

	 {

		 renderTo : document.body,

		 width : 400,

		 height : 200,

		 bodyBorder : true,

		 bodyStyle : 'padding:5px',

		 layout : 'fit',

		 items : [ {

			 title : 'Fit Panel',

			 html : 'A very simple layout that simply\b fills the container with a single panel.\b This is usually the best default layout\b choice when you have no other specific \b layout requirements.',

			 border : true

		 } ]

 });

九、table

 

【初学EXT】布局

 

var panel = new Ext.Panel({

			renderTo : document.body,

			width : 400,

			height : 200,

			bodyBorder : true,

			bodyStyle : 'padding:5px',

			layout : {

				type : 'table',

				// The total column count must be specified here

				columns : 3

			},

			defaults : {

				// applied to each contained panel

				bodyStyle : 'padding:20px'

			},

			items : [ {

				html : 'Cell A content',

				rowspan : 2

			}, {

				html : 'Cell B content',

				colspan : 2

			}, {

				html : 'Cell C content',

				cellCls : 'highlight'

			}, {

				html : 'Cell D content'

			} ]



		});

十、vbox

 

【初学EXT】布局

	var panel = new Ext.Panel({

			renderTo : document.body,

			width : 400,

			height : 200,

			bodyBorder : true,

			bodyStyle : 'padding:5px',

			 title: "VBoxLayout Panel",

			    layout: {

			        type: 'vbox',

			        align: 'center'

			    },

			    items: [{

			        xtype: 'panel',

			        title: 'Inner Panel One',

			        width: 250,

			        flex: 2//每个子项相对的 flex值都会与全体子项 flex累加的值相比较,根据此结果,处理每个子项的 flex 最后是多少。若不设置,表示不对子项作自适应尺寸的处理

			    },{

			        xtype: 'panel',

			        title: 'Inner Panel Two',

			        width: 250,

			        flex: 4

			    },{

			        xtype: 'panel',

			        title: 'Inner Panel Three',

			        width: '50%',

			        flex: 4

			    }]

		});

十一、hbox

【初学EXT】布局

 

	var panel = new Ext.Panel({

			renderTo : document.body,

			width : 400,

			height : 200,

			bodyBorder : true,

			bodyStyle : 'padding:5px',

			 title: "HBoxLayout Panel",

			    layout: {

			        type: 'hbox',

			        align: 'stretch'

			    },

			    renderTo: document.body,

			    items: [{

			        xtype: 'panel',

			        title: 'Inner Panel One',

			        flex: 2

			    },{

			        xtype: 'panel',

			        title: 'Inner Panel Two',

			        flex: 1

			    },{

			        xtype: 'panel',

			        title: 'Inner Panel Three',

			        flex: 1

			    }]

		});

 

【初学EXT】布局

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号