Extjs布局之column.doc

Extjs布局之column很多人问我Extjs的布局怎么那么差劲，其实它的Column布局可以做到无所不能，今天小写一个例子起到抛砖引玉的作用。一、先定义一个win，像下图：宽高是另一个js文件中的定义：插曲：我这样定义宽高而不用实际数值是因为这样可以避免不同分辨率导致的布局畸形，像我上面的win，不管放到哪个分辨率中都是网页可见区域的75%。接着开始流式布局，（激动），为了这篇教程，我问某兄台借了一幅图：（看不清就另存这幅图片放大看）他用的是table布局，看上去很不对称，且看我用流式布局怎么将它任意揉捏。2、 布局框架的选用我们要将win的item设置成一个panel： 大家看，只不过加入了一个panel就变成了这样，效果不是很理想，那是因为panel的宽高和win不同导致的，我们将panel的宽高和win的宽高设置成一样： 下一步，将panel设置成流式布局，并在其中加入第一个组件： 看来还不是很理想，都是顶头的，看我加一个bodystyle进去，想怎么调整位置就怎么调整：但怎么好像有个边框，很难看哦，无妨，可以用border:false去掉它：看，只不过加了一个border:false就可以了，不过我建议border设置为true，因为它对你调整位置很有用，接着我们加入第二个组件：第二个组件是个combobox，而且经我调整后和上一段代码和很大不同，首先“开始时间”的columnWidth变成了.07,如果还是0.99（就是99%），那它会占据一整行，第二个组件会被排挤到第二行。其次bodystble也被改成了padding:10 0 0 10;height:33，因为这样，它才能和combobox对齐。接着加入第三、四、五、六个组件：var panel = new Ext.Panel(width:hw.CLIENT_WIDTH*0.75,height:hw.CLIENT_HEIGHT*0.75,layout:column,items:columnWidth:.07,bodyStyle:padding:10 0 0 10;height:33;,border:border,html:开始时间：,columnWidth:.08,bodyStyle:padding:5 0 0 10;height:33;,border:border,items:xtype:combo,mode: local,triggerAction:all,width:70,store:new Ext.data.SimpleStore(fields:value,autoLoad :false,data:周一,周二,周三,周四,周五,周六,周日),displayField:value,columnWidth:.04,bodyStyle:padding:10 0 0 10;height:33;,border:border,html:时：,columnWidth:.03,bodyStyle:padding:5 0 0 0;height:33;,border:border,items:xtype:textfield,width:25,columnWidth:.04,bodyStyle:padding:10 0 0 10;height:33;,border:border,html:分：,columnWidth:.03,bodyStyle:padding:5 0 0 0;height:33;,border:border,items:xtype:textfield,width:25);这里有个问题，那位兄台的背景色是天蓝色，而我这里是白色，如何处理呢？首先用firebug查看win的背景色，我这里查看的结果是：background-color:#dfe8f6，我们只要将panel的背景色设置成这样：好像还是很难看嘛，不要紧，再将每个组件的背景色都设置成如此：嗯，这样看上去好很多了，接着添加其它组件，把第一行都添加完：这里又有一个问题，如果第一行你添加完了，但是右边还剩余很多空间，那最后一个组件的columnWidth最好设置的大一点，大到什么程度？大到第一行所有组件的columnWidth的值都加起来正好为1（即100），这样，如果你接下来添加的组件就会自动排到第二行。这里再看一个常犯的错误：看上面，很难看对吧，为什么会这样？注意了：一行内的所有组件的height必须一致，一旦不一致，就像上图的“开始时间”组件，明显比其它同一行的组件都高，这样会影响到第二行的布局，如果一样高又会怎么样呢？嗯，这样就好看很多了。由于那位仁兄的组件实在很多，我不高兴一一排列出来了，接下来的事情无外乎就是体力活，这是我最终排下来的效果图：有兴趣的同学可以将我的成果加以完善。最后记得把border设置成false。P.S:1、 压缩包内Global_Params.js、column_layout.html、layout.js放到你的extexa