ExtJS4学习笔记(三)---VBox布局的使用
来源：互联网 发布：centos系统版本命令 编辑：程序博客网 时间：2024/06/05 17:02
要使用VBox布局方式，首先的熟悉下一下几个主要属性：
一、align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。
1、left（默认）：排列于容器左侧。
2、center ：控件在容器水平居中。
3、stretch：控件横向拉伸至容器大小
4、stretchmax:控件横向拉伸，宽度为最宽控件的宽。
二、flex:数字类型，指示组件在容器中水平呈现方式，通俗的讲，就是指示组件在容器中的相对宽度。
三、pack : 字符类型，指示组件在容器的位置，有如下几种属性。
1、start（默认）：组件在容器上边
2、center：组件在容器中间
3、end：组件在容器的下边
HTML代码：
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>VBox---MHZG.NET</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <script type="text/javascript" src="../../bootstrap.js"></script> <script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="vbox.js"></script> <style type="text/css"> html, body { font: normal 12px verdana; margin: 0; padding: 0; border: 0 none; } </style> </head> <body> </body> </html> vbox.js：Ext.onReady(function() { var currentName; var replace = function(config, name) { var btns = Ext.getCmp('btns'); if (name && name != currentName) { currentName = name; btns.remove(0); btns.add(Ext.apply(config)); } }; var viewport = Ext.create('Ext.Viewport', { layout:'border', items: [{ id:'btns', region:'west', baseCls:'x-plain', split:true, width:150, minWidth: 100, maxWidth: 250, layout:'fit', margins: '5 0 5 5', items: { baseCls: 'x-plain', html: '<p style="padding:10px;color:#556677;font-size:11px;">点击右边的按钮查看效果</p>' } }, { region:'center', margins: '5 5 5 0', layout: 'anchor', items:[{ anchor: '100%', baseCls:'x-plain', layout: { type:'hbox', padding: 10 }, defaults:{ margins:'0 5 0 0', pressed: false, toggleGroup:'btns', allowDepress: false }, items: [{ xtype:'button', text: 'Spaced / Align: left', handler: function(){ replace({ layout: { type:'vbox', padding:'5', align:'left' }, defaults:{margins:'0 0 5 0'}, items:[{ xtype:'button', text: 'Button 1' },{ xtype:'tbspacer', flex:1 },{ xtype:'button', text: 'Button 2' },{ xtype:'button', text: 'Button 3' },{ xtype:'button', text: 'Button 4', margins:'0' }] }, 'spaced'); } },{ xtype:'button', text: 'Multi-Spaced / Align: left', handler: function(){ replace({ layout: { type:'vbox', padding:'5', align:'left' }, defaults:{margins:'0 0 5 0'}, items:[{ xtype:'button', text: 'Button 1' },{ xtype:'tbspacer', flex:1 },{ xtype:'button', text: 'Button 2' },{ xtype:'tbspacer', flex:1 },{ xtype:'button', text: 'Button 3' },{ xtype:'tbspacer', flex:1 },{ xtype:'button', text: 'Button 4', margins:'0' }] }, 'multi spaced - align left'); } },{ xtype:'button', text: 'Align: left', handler: function(){ replace({ layout: { type:'vbox', padding:'5', align:'left' }, defaults:{margins:'0 0 5 0'}, items:[{ xtype:'button', text: 'Button 1' },{ xtype:'button', text: 'Button 2' },{ xtype:'button', text: 'Button 3' },{ xtype:'button', text: 'Button 4' }] }, 'align left'); } },{ xtype:'button', text: 'Align: center', handler: function(){ replace({ layout: { type:'vbox', padding:'5', align:'center' }, defaults:{margins:'0 0 5 0'}, items:[{ xtype:'button', text: 'Button 1' },{ xtype:'button', text: 'Button 2' },{ xtype:'button', text: 'Button 3' },{ xtype:'button', text: 'Button 4' }] }, 'align center'); } },{ xtype:'button', text: 'Align: stretch', handler: function(){ replace({ layout: { type:'vbox', padding:'5', align:'stretch' }, defaults:{margins:'0 0 5 0'}, items:[{ xtype:'button', text: 'Button 1' },{ xtype:'button', text: 'Button 2' },{ xtype:'button', text: 'Button 3' },{ xtype:'button', text: 'Button 4' }] }, 'align stretch'); } },{ xtype:'button', text: 'Align: stretchmax', handler: function(){ replace({ layout: { type:'vbox', padding:'5', align:'stretchmax' }, defaults:{margins:'0 0 5 0'}, items:[{ xtype:'button', text: 'Jamie' },{ xtype:'button', text: 'Aaron' },{ xtype:'button', text: 'Tommy' },{ xtype:'button', text: 'Ed ' }] }, 'align stretchmax'); } }] },{ anchor: '100%', baseCls:'x-plain', layout: { type:'hbox', padding: '0 10 10' }, defaults:{ margins:'0 5 0 0', pressed: false, toggleGroup:'btns', allowDepress: false }, items: [{ xtype:'button', text: 'Flex: Even / Align: center', handler: function(){ replace({ layout: { type:'vbox', padding:'5', align:'center' }, defaults:{margins:'0 0 5 0'}, items:[{ xtype:'button', text: 'Button 1', flex:1 },{ xtype:'button', text: 'Button 2', flex:1 },{ xtype:'button', text: 'Button 3', flex:1 },{ xtype:'button', text: 'Button 4', flex:1, margins:'0' }] }, 'align flex even'); } },{ xtype:'button', text: 'Flex: Ratio / Align: center', handler: function(){ replace({ layout: { type:'vbox', padding:'5', align:'center' }, defaults:{margins:'0 0 5 0'}, items:[{ xtype:'button', text: 'Button 1', flex:1 },{ xtype:'button', text: 'Button 2', flex:1 },{ xtype:'button', text: 'Button 3', flex:1 },{ xtype:'button', text: 'Button 4', flex:3, margins:'0' }] }, 'align flex ratio'); } },{ xtype:'button', text: 'Flex + Stretch', handler: function(){ replace({ layout: { type:'vbox', padding:'5', align:'stretch' }, defaults:{margins:'0 0 5 0'}, items:[{ xtype:'button', text: 'Button 1', flex:1 },{ xtype:'button', text: 'Button 2', flex:1 },{ xtype:'button', text: 'Button 3', flex:1 },{ xtype:'button', text: 'Button 4', flex:3, margins:'0' }] }, 'align flex + stretch'); } },{ xtype:'button', text: 'Pack: start / Align: center', handler: function(){ replace({ layout: { type:'vbox', padding:'5', pack:'start', align:'center' }, defaults:{margins:'0 0 5 0'}, items:[{ xtype:'button', text: 'Button 1' },{ xtype:'button', text: 'Button 2' },{ xtype:'button', text: 'Button 3' },{ xtype:'button', text: 'Button 4' }] }, 'align pack start + align center'); } },{ xtype:'button', text: 'Pack: center / Align: center', handler: function(){ replace({ layout: { type:'vbox', padding:'5', pack:'center', align:'center' }, defaults:{margins:'0 0 5 0'}, items:[{ xtype:'button', text: 'Button 1' },{ xtype:'button', text: 'Button 2' },{ xtype:'button', text: 'Button 3' },{ xtype:'button', text: 'Button 4', margins:'0' }] }, 'align pack center + align center'); } },{ xtype:'button', text: 'Pack: end / Align: center', handler: function(){ replace({ layout: { type:'vbox', padding:'5', pack:'end', align:'center' }, defaults:{margins:'0 0 5 0'}, items:[{ xtype:'button', text: 'Button 1' },{ xtype:'button', text: 'Button 2' },{ xtype:'button', text: 'Button 3' },{ xtype:'button', text: 'Button 4', margins:'0' }] }, 'align pack end + align center'); } }] }] }] }); });
- ExtJS4学习笔记(三)---VBox布局的使用
- ExtJS4学习笔记(三)---VBox的使
- ExtJS4学习笔记(二)---HBox的使用
- ExtJS4学习笔记(四)---Grid的使用
- ExtJS4学习笔记(二)---HBox的使用
- ExtJS4学习笔记(二)---HBox的使用
- ExtJS4学习笔记(四)---Grid的使用
- ExtJs4学习笔记(三) 面向对象
- ExtJs4 笔记 layout 布局
- ExtJS4学习笔记八－－Template的使用
- ExtJS4学习笔记九－－数据模型的使用
- ExtJS4学习笔记十一 树控件的使用
- ExtJS4学习笔记八－－Template的使用
- ExtJS4学习笔记八－－Template的使用
- ExtJS4学习笔记九－－数据模型的使用
- ExtJS4学习笔记十一 树控件的使用
- ExtJS4学习笔记八－－Template的使用
- ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid)
- Extjs4开发笔记(五)——动态grid
- Extjs4开发笔记(六)——数据的增删改
- ExtJS4学习笔记(一)---window的创建
- ExtJS4学习笔记(二)---HBox的使用
- 在myEclipse下使用resin不能正常发布工程的解决
- ExtJS4学习笔记(三)---VBox布局的使用
- ExtJS4学习笔记(四)---Grid的使用
- ExtJS4学习笔记(五)---Grid分页
- SQLSERVER约束
- ExtJS4学习笔记(六)---多表头Grid
- ExtJS4学习笔记(七)---带搜索的Grid（SearchGrid）
- ExtJS4学习笔记(八)---Grid多选/全选
- ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid)
- ExtJS4学习笔记(十)---ExtJS4图片验证码的实现
