ExtJS中layout的9种布局风格
来源:互联网 发布:淘宝模特小倩 编辑:程序博客网 时间:2024/05/22 12:02
ExtJS的容器组件都可以设置它的显示风格,它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。
另外几种见:
http://www.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html
里面有详细的例子。
absolute
顾名思义,在容器内部,根据指定的坐标定位显示
accordion
这个是最容易记的,手风琴效果
Ext.OnReady(function(){var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局 { renderTo:'paneldiv', title:'容器组件', layout:'accordion', width:500, height:200, layoutConfig:{animate:false}, items:[ {title:'元素1',html:''}, {title:'元素2',html:''}, {title:'元素3',html:''}, {title:'元素4',html:''} ] } );});
anchor
这个效果具体还不知道有什么用,就是知道注意一下
1.容器内的组件要么指定宽度,要么在anchor中同时指定高/宽,
2.anchor值通常只能为负值(指非百分比值),正值没有意义,
3.anchor必须为字符串值
Ext.onReady(function() { var panel1 = new Ext.Panel({ title: "panel1", height: 100, anchor: '-50', html: "高度等于100,宽度=容器宽度-50" }); var panel2 = new Ext.Panel({ title: "panel2", height: 100, anchor: '50%', html: "高度等于100,宽度=容器宽度的50%" }); var panel3 = new Ext.Panel({ title: "panel3", anchor: '-10, -250', html: "宽度=容器宽度-10,高度=容器宽度-250" }); var win = new Ext.Window({ title: "Anchor Layout", height: 400, width: 400, plain: true, layout: 'anchor', items: [panel1, panel2,panel3] }); win.show(); });
border
将容器分为五个区域:east,south,west,north,center
Ext.onReady(function() { var button = Ext.get('show-btn'); var win; button.on('click', function() { //创建TabPanel var tabs = new Ext.TabPanel({ region: 'center', //border布局,将页面分成东,南,西,北,中五部分,这里表示TabPanel放在中间 margins: '3 3 3 0', activeTab: 0, defaults: { autoScroll: true }, items: [{ title: 'Bogus Tab', html: "第一个Tab的内容." }, { title: 'Another Tab', html: "我是另一个Tab" }, { title: 'Closable Tab', html: "这是一个可以关闭的Tab", closable: true}] }); //定义一个Panel var nav = new Ext.Panel({ title: 'Navigation', region: 'west', //放在西边,即左侧 split: true, width: 200, collapsible: true, //允许伸缩 margins: '3 0 3 3', cmargins: '3 3 3 3' }); //如果窗口第一次被打开时才创建 if (!win) { win = new Ext.Window({ title: 'Layout Window', closable: true, width: 600, height: 350, border : false, plain: true, layout: 'border', closeAction:'hide', items: [nav, tabs]//把上面创建的panel和TabPanel放在window中,并采用border方式布局 }); } win.show(button); }); });
card
像安装向导一样,一张一张显示
Ext.onReady(function() { var i = 0; var navHandler = function(direction) { if (direction == -1) { i--; if (i < 0) { i = 0; } } if (direction == 1) { i++; if (i > 2) { i = 2; return false; } } var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1]; var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0]; if (i == 0) { btnBack.disabled = true; } else { btnBack.disabled = false; } if (i == 2) { btnNext.value = "完成"; btnNext.disabled = true; } else { btnNext.value = "下一步"; btnNext.disabled = false; } card.getLayout().setActiveItem(i); }; var card = new Ext.Panel({ width: 200, height: 200, title: '注册向导', layout: 'card', activeItem: 0, // make sure the active item is set on the container config! bodyStyle: 'padding:15px', defaults: { border: false }, bbar: [ { id: 'move-prev', text: '上一步', handler: navHandler.createDelegate(this, [-1]) }, '->', { id: 'move-next', text: '下一步', handler: navHandler.createDelegate(this, [1]) } ], items: [{ id: 'card-0', html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>' }, { id: 'card-1', html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>' }, { id: 'card-2', html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'}], renderTo: "container" }); });
column
把整个容器看成一列,然后向容器放入子元素时
Ext.onReady(function() { var win = new Ext.Window({ title: "Column Layout", height: 300, width: 400, plain: true, layout: 'column', items: [{ title:"width=50%", columnWidth:0.5, html:"width=(容器宽度-容器内其它组件固定宽度)*50%", height:200 }, { title:"width=250px", width: 200, height:100, html:"固定宽度为250px" } ] }); win.show(); });
fit
一个子元素将充满整个容器(如果多个子元素则只有一个元素充满整个容器)
Ext.OnReady(function(){var panel=new Ext.Panel( { renderTo:'paneldiv', title:'容器组件', layout:'fit', width:500, height:100, items:[ {title:'子元素1'}, {title:'子元素2'}, {title:'子元素3'}, {title:'子元素4'}, {title:'子元素5'} ] } );});
form
是一种专门用于管理表单中输入字段的布局
Ext.onReady(function() { var win = new Ext.Window({ title: "form Layout", height: 150, width: 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", width:127 } ] } }); win.show(); });
table
按照普通表格的方法布局子元素,用layoutConfig:{columns:3},//将父容器分成3列
Ext.onReady(function(){ var panel=new Ext.Panel( { renderTo:'paneldiv', title:'容器组件', layout:'table', width: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:''} ] } ); });
-----------------------------END-------------------------------------------
- Extjs中布局layout的9种样式风格总结
- ExtJS中layout的9种布局风格
- ExtJS中layout的12种布局风格
- ExtJS中layout的12种布局风格
- ExtJS中layout的12种布局风格
- ExtJS中layout的12种布局风格
- ExtJs 的layout的9种样式风格总结
- ExtJS学习笔记 layout的9种样式风格
- ExtJS学习笔记 layout的9种样式风格总结
- ExtJs layout的七中布局
- Extjs4的layout的9种布局样式风格
- ExtJS中layout布局详解
- ExtJS的12种布局风格
- ExtJS学习笔记 layout的9种样式风格总结(转)
- extJs的layout : 'column'布局出错
- ExtJS布局Layout
- Extjs学习 layout布局
- ExtJs layout 布局
- 使用VIM将一行X509证书分解为多行的方式
- Asp.net导出Excel(三)
- 安装vs2010后安装MSDN文档的方法
- POJ 1985 COW MARATHON
- POJ 1952 BUY LOW, BUY LOWER(DP)
- ExtJS中layout的9种布局风格
- POJ 1948 TRIANGULAR PASTURES(背包问题)
- 微软算法面试题
- Android App Widgets
- POJ 1833 排列
- 信访项目
- 获取字符串的长度 (汉字占两个字节)
- POJ 1828 MONKEYS’ PRIDE(DP)+POJ 2726
- Silverlight获取浏览器的宽和高