<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>布局</title> <link rel="stylesheet" type="text/css" href="ext-4.2.1/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script> <script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{ title:'Ext.layout.container.HBox', layout:{ type:'hbox', //水平盒布局 align:'stretch' //子面板高度充满父容器 }, frame:true, height:150, width:300, renderTo:Ext.getBody(), defaults:{ bodyStyle:'background-color:#FFFFFF', frame:true, width:50, height:50 }, items:[{ title:'子面板一', flex:1, html:'1/4宽' }, { title:'子面板二', flex:1, html:'1/4宽' }, { title:'子面板三', flex:2, html:'1/2 宽' }] }); }); </script> </head> <body> </body> </html>
?