Ext.layout.container.Column对应面板布局layout配置项的名称为Column，支持属性columnWidth，每一个加入到容器中的子面板都可以通过columnWidth配置项指定百分比或使用width配置项指定固定值来确定列宽
width配置项是以像素为单位的固定列宽，必须是大于或等于1的数字。columnWidth配置项是以百分比为单位的相对宽度，必须是大于0小于1的小数，例如.25
1、指定固定列宽
代码：
<!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 runat="server"> <title>Ext.layout.container.Column示例</title> <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> <script type="text/javascript"> Ext.onReady(function () { Ext.create("Ext.panel.Panel", { title: "Ext.layout.container.Column示例", frame: true, 300, height: 200, renderTo: Ext.getBody(), bodyPadding: 5, layout: "column", defaults: { bodyStyle: "background-color:#FFFFFF;padding:15px", frame: true, height: 100 }, items: [{ title: "子面板一", 100, html: "子面板一" }, { title: "子面板二", 100, html: "子面板二" }] }); }); </script> </head> <body> </body> </html>
效果图：
2、使用百分比指定列宽
代码：
<!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 runat="server"> <title>Ext.layout.container.Column示例</title> <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> <script type="text/javascript"> Ext.onReady(function () { Ext.create("Ext.panel.Panel", { title: "Ext.layout.container.Column示例", frame: true, 300, height: 200, renderTo: Ext.getBody(), bodyPadding: 5, layout: "column", defaults: { bodyStyle: "background-color:#FFFFFF;padding:15px", frame: true, height: 100 }, items: [{ title: "子面板一", columnWidth: .3 }, { title: "子面板二", columnWidth: .7 }] }); }); </script> </head> <body> </body> </html>
效果图：
3、固定值与百分比结合使用
代码：
<!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 runat="server"> <title>Ext.layout.container.Column示例</title> <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> <script type="text/javascript"> Ext.onReady(function () { Ext.create("Ext.panel.Panel", { title: "Ext.layout.container.Column示例", frame: true, 400, height: 200, renderTo: Ext.getBody(), bodyPadding: 5, layout: "column", defaults: { bodyStyle: "background-color:#FFFFFF;padding:15px", frame: true, height: 100 }, items: [{ title: "子面板一", 100 }, { title: "子面板二", columnWidth: .3 }, { title: "子面板三", columnWidth: .7 }] }); }); </script> </head> <body> </body> </html>
效果图：
