extjs css,ext左右布局

　　总的来说，Ext布局很灵活，我觉得有必要一起讨论一下。

　　Ext常见的布局都在Ext.layout下，几乎涵盖了所有的布局方法(但值得注意的是，通常我们不会直接通过 new 创建这些类的对象然后给它们添加控件，而是把它们作为控件的一个配置属性让Ext自动创建相应的类)，从而满足开发者的需求。那么我们就来一一介绍常见的方式。

　　边框布局

　　边框布局是Ext中常用的布局方式(经常使用全页整体布局)，感觉很有可能会用到。在阅读代码之前，先熟悉一个特殊的容器ViewPort，它是浏览器窗口的抽象。你可以把它理解为浏览器的可视区域，它会被渲染到document.body并自动调整大小。一个页面只能创建一个视区。

　　[javascript]查看plaincopyprint？

　　newExt。Viewport({layout:border ，items:[{region:north ，title:Up ，height:50}，{region:south ，title:Down ，height:50}，{region:west ，title:Left ，200}，{region:east ，title:Right ，200}，{region:center ，title: Center }])；

　　上面的代码非常简单。首先Viewport会自动填充整个窗口，然后我们使用Viewport中的边框布局(也就是上面的布局：‘边框’)。使用边框布局是为其子容器使用区域来指示子容器的位置(例如，上面的区域：“中心”)，然后子容器将显示在其父容器的相应位置。这些位置是固定的，只有上面列出的五个。但请注意，这五个部分不一定是全部，但至少要包括‘中心’(因为是主体，没有主体怎么放内容)。

　　效果：

　　上面的效果看起来不太好，而且我们上面也说了，一般情况下我们没有必要五个部分都有，我们稍微修改一下：

　　[javascript]查看plaincopyprint？

　　varn north=new ext . panel({ ID: pn north ，autowidth: true，height:80，frame: true，region: north ，html:在此放置页眉内容 })；var west=new ext . panel({ ID: pn west ，title:菜单项，200，height: auto ，split: true，//显示分隔符区域： west ，collapsed:true })；var center=new ext . tab panel({ region: center ，active tab: 0，items: [{title: inbox ，authheight: true，closedable:true，//能否关闭html:在此显示收到的邮件？}]});varvp=newExt。Viewport({layout:border ，items:[pnNorth，pnWest，pn center]})；

　　效果：

　　还不错！

　　列布局

　　从字面上就知道，列布局就是列布局。例如，我在一个面板中有两个子面板，现在我想在左边显示一个，在右边显示一个。我该怎么办？您可以选择“列”将父面板分成两列，一列在左侧，一列在右侧。

　　[javascript]查看plaincopyprint？

　　var sub 1=new ext . panel({ height:300，columnwidth:3，html:这是子panle 1 })；var sub 2=new ext . panel({ height:300，columnwidth:7，html:这是子panle 2 })；Varpn=newext.panel ({id: pn ，title:父面板，renderto: divpanel ，800，height: 300，layout: column ，items: [pnsub1，pn sub 2]})；

　　影响

　　首先，在父容器中将 layout 设置为 column ,然后在子容器中指定要显示的 columnWidth 的值(即比例)。很简单。

　　适合布局

　　如果就复杂性而言，fit布局是最简单的，则设置是最少的。Fit还设置父容器的layout属性，但子容器不需要设置任何相应的属性。其目的是使子容器与父容器相适应(用fit layout设置子容器的宽度是无效的)，但请注意，如果父容器有多个子容器，则只显示第一个。

　　[javascript]查看plaincopyprint？

　　var sub 1=new ext . panel({ title: subpanel 1 ，html: subpanel 1(将显示) })；var sub 2=new ext . panel({ title: subpanel 2 ，html: subpanel 2(不会显示) })；varpn=new ext . panel({ render to: div panel ，title: parent panel ，800，height: 200，layout: fit ，items: [pn sub1，pn sub 2]})；

　　效果：

　　可以看到只显示了第一个panle，而且是自适应的。我们还没有设置高度和宽度。

　　表格布局

　　表格布局多用于复杂的情况，所以做web开发很难去想上面的简单情况，所以也就是说表格布局还是很常用的。当然有，但是和其他布局相比，它的参数设置略小(别怕，其实还是很少的)。

　　[javascript]查看plaincopyprint？

　　Ext.panel ({title: parent panel ，render to: divpanel ，900，height: 200，layout: table ，layoutconfig: {columns: 3}，默认值：{height: 100，300}，Items:[{html:第一个子面板(row: 1，column: 1)，rowspan:2，//merge row height:200}，{html:第二个子面板(row: 1，column: 2)，colspan:2，//merge column 600}，

　　效果：

　　我们上面的布局是两行三列的布局，但是注意在layoutConfi中，我们不需要指定有多少行，只需要指定有多少列，写下几行就可以了。还有一点就是在合并行和列的时候要记得标明高度和宽度，否则可能会出现你合并的行和未合并的单元格一样高的情况。和Ext中的大多数布局一样，父容器将相应的布局指定为‘table’，然后子容器设置相应的参数(比如colspan表示表格布局)。

　　上面的布局可能有点幼稚，但真正做到这一点的东西并不多。我们稍微修改一下：

　　[javascript]查看plaincopyprint？

　　Ext.panel ({ID: PN ，Title: News ，Render to: Divpanel ，800，Height: 500，Layout: Table ，Body Style: Padding: 10101010 ，LayoutConfig: {Columns: 2}，Defaults: {height: 220，380，frame: true}，items: [{title: international ，html:第一个面板(行：1，列：1)，bodystyle: padding: 20}，{title:国内，html: BodyStyle:padding:20}。770}]});

　　注意也有风格：

　　[xhtml]查看plaincopyprint？

　　# pntd { padding:5px；}

　　效果：

　　上面看起来还行吧？这是什么桌子摆出来的，O(_)O~！

　　表单布局

　　这种布局是专门为表单设计的。当然大部分用在FormPanel(也是FormPanel的默认布局)。我们之前说过FormPanel，但不涉及复杂布局。实际上，在实际应用中，它是更复杂的布局。

　　对比下面两张图。我觉得除了标题没什么区别，但其实组件有两种，一种是Panel，一种是FormPanel:

　　[javascript]查看plaincopyprint？

　　Ext.panel ({render to: div panel ，title:这是面板，300，height: 120，bodystyle: padding: 10 ，layout: form ，hidelabels: false，label lighn: right ，Type: textfield ，items: [{fieldlabel: name ，name:name}，{fieldLabel: age ，name: age }]})；ext . formpanel({ Render to: div pane 2 ，title:这是一个form panel ，300，height: 120，bodystyle: padding: 10 ，layout: form ，hidelabels: false，label lighn: right ，Type: textfield ，items: [{fieldlabel: name ，name:name}，{fieldLabel: age ，name: age }]})；

　　从代码中我们也可以看出不同的是我们为panel配置了form的布局，从这也可以看出formPanel的默认布局是Form Layout，所以对于习惯使用Panel而不使用FormPanel的人来说，虽然使用Panel，但是必须考虑提交的问题。如果使用Panel，就要一个一个的获取控件的值来提交，而FromPanel不需要。

　　此外，我们还需要对其进行扩展，因为实际布局要比这复杂得多。

　　这种形式虽然不太复杂，但具有代表性。基本上所有常用控件都放在上面了，还包含了常见的单选多栏布局。好吧，看看代码：

　　[javascript]查看plaincopyprint？

　　延伸文件系统on ready(function(){ varp row 1=new ext .Panel({border:false，layout:column ，items:[newExt .面板({columnWidth:5，布局： form ，border:false，labelWidth:40，label ign: right ，items:[{xtype:textfield ，fieldLabel:姓名，name:uname ，anchor:95%}]})，newExt .面板({列宽： 3，布局： form ，border:false，labelWidth:40，label ign: right ，items:[{xtype:radio ，fieldLabel:性别，boxLabel:男，名称：性别，输入值：男，checked:true，anchor:95%}]})，newExt .面板({列宽： 2，布局：表单，边框：false，标签宽度：1，项目：[{xtype:radio ，boxLabel:女，名称：性别，输入值：女，labelSeparator: ，anchor: 95% }]})]})；varpnRow2=newExt .Panel({layout:column ，border:false，items:[newExt .Panel({columnWidth:5，layout:form ，border:false，labelWidth:40，label ign: right ，items:[{xtype:datefield ，name:birthday ，fieldLabel:生日，主播： 95%}]})，newExt .面板({columnWidth:5，布局：窗体，边框：false，labelWidth:40，labelAlign:右，项目：[{xtype:组合，名称：研究，存储：[专科,本科,硕士,博士],字段标签:学历，主播： 95% }]})]});varpnRow3=newExt .Panel({layout:column ，border:false，items:[newExt .面板({列宽： 3，布局： form ，border:false，labelWidth:40，label ign: right ，items:[{xtype:checkbox ，name:hoby ，inputValue:computer ，fieldLabel:爱好，boxLabel:计算机，主播： 95%}]})，newExt .面板({列宽： 3，布局： form ，border:false，labelWidth:1，label ign: right ，items:[{xtype:checkbox ，name:hoby ，inputValue:football ，boxLabel:足球，labelSeparator: ，anchor:95%}]})，newExt .Panel({columnWidth:4，layout:form ，border:false，labelWidth:1，label ign: right ，items:[{xtype:checkbox ，name:hoby ，intputValue:tinyTable ，boxLabel:乒乓球，labelSeparator: ，anchor: 95% }]})]})；varpnRow4=newExt .面板({//当然这里直接在模板中添加文本字段就可以了，因为只有一行，但是为了一致以及对齐方便我这里还是放到了面板中布局： form ，border:false，labelWidth:40，label ign: right ，items:[{xtype:textfield ，name:email ，fieldLabel:住址，主播： 98% }]});varpnRow5=newExt .Panel({layout:form ，border:false，labelWidth:40，label ign: right ，items:[{xtype:htmleditor ，name:note ，fieldLabel:备注，身高：200,主播： 98% }]});新文本.FormPanel({renderTo:divPanel ，标题：个人信息录入，600，bodyStyle:padding:10px ，layout:form ，items:[pnRow1，pnRow2，pnRow3，pnRow4，pn row 5]})；});

　　代码看似比较多，其实很容易理解，分机有一个特点就是组件的自由组合，那么我们只需要拆分来看就可以了。从大的方面是一个模板，其中有五行内容（这个五个面板当然是使用的父容器模板的默认布局表单了，所以依次向下放)。先暂且不管第四行和第五行，我们看看其他三行，其实格式基本上是一样的，就是首先这一行放到一个面板中（假设叫做Panel_A)，利用列布局来解决多列问题，让后再其项目中我们再再每个圆柱中放一个面板(面板_B)而这个面板我们使用表单布局（这个面板中其实都只有一个形式控件，所以当然不用形式布局也是可以的，之所以用形式布局是为了能够使用标签宽度这样的形式特有属性),然后在其中放一个形式控件，这样也就解决了多列布局的问题。关于第四列和第五列本身就是单列的也没有什么好解释的。上面的方法是通用的，基本上用这种方法所有的复杂表单布局都可以解决了。可能会有人问遇到合并行的怎么办？其实利用上面的方法很容易的，例如假设上面性别和学历是合并的，那么我们就没有必要用两个面板放两行了，就当做一行，只不过在第一列的面板_B中放两个形式控件就可以了（因为它是形式布局，默认就会在两行)。

　　那么还有别的办法吗？答案是肯定的，就是表格布局。个人认为，使用table进行更规则的多栏布局是很好的。但是和上面的例子一样，整体上是两列布局，只是有些列包含多列。我认为用表格太简单了。

　　总结：

　　接种布局如上所述。其实简单总结一下，一般用边框布局作为页面的整体布局；Fit layout适用于子类需要完全填充父类容器的情况；列布局用于多列；表单是表单的独特布局，本质上是一行一控的表单。表格布局适合多行多列，但有时宽度和高度不好控制。更值得强调的是，设置控件的layout属性，其实指的是其内部控件的布局，而不是其自身的布局，这一点要说清楚。

　　出发地：http://blog..net/jianxin160/article/details/5846849

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。