Extjs布局之column.doc

Extjs布局之column 很多人问我Extjs的布局怎么那么差劲，其实它的Column布局可以做到无所不能，今天小写一个例子起到抛 砖引玉的作用。 一、先定义一个win，像下图： 宽高是另一个js文件中的定义： 插曲：我这样定义宽高而不用实际数值是因为这样可以避免不同分辨率导致的布局畸形，像我上面的win， 不管放到哪个分辨率中都是网页可见区域的75%。 接着开始流式布局，（激动），为了这篇教程，我问某兄台借了一幅图： （看不清就另存这幅图片放大看） 他用的是table布局，看上去很不对称，且看我用流式布局怎么将它任意揉捏。 布局框架的选用 我们要将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的背景色设置成这样： 好像还是很难看嘛，不要紧，再将每个组件的背景色都设置成如此： 嗯，这样看上去好很多了，接着添加其它组件，把第一行都添加完： 这里又有一个问题，