extjs4 多个panel 列布局
单纯的设置layout：column 好像不行，感觉extjs4跟以前不太一样
找了一个panel 横向布局的例子
?
<html><head> <title>Column Layout</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <style type="text/css"> html, body { font:normal 12px verdana; margin:0; padding:0; border:0 none; overflow:hidden; height:100%; } .x-panel-body p { margin:5px; } .x-column-layout-ct .x-panel { margin-bottom:5px; } .x-column-layout-ct .x-panel-dd-spacer { margin-bottom:5px; } .settings { background-image:url(../shared/icons/fam/folder_wrench.png) !important; } .nav { background-image:url(../shared/icons/fam/folder_go.png) !important; } </style><script type="text/javascript" style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/bootstrap.js"></script><script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES --><script type="text/javascript">Ext.require(['*']); Ext.onReady(function(){ // NOTE: This is an example showing simple state management. During development, // it is generally best to disable state management as dynamically-generated ids // can change across page loads, leading to unpredictable results. The developer // should ensure that stable state ids are set for stateful components in real apps. Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider')); var viewport = Ext.create('Ext.Viewport', { layout:'border', items:[{ region:'west', id:'west-panel', title:'West', split:true, width: 200, minSize: 175, maxSize: 400, collapsible: true, margins:'35 0 5 5', cmargins:'35 5 5 5', layout:'accordion', layoutConfig:{ animate:true }, items: [{ html: Ext.example.shortBogusMarkup, title:'Navigation', autoScroll:true, border:false, iconCls:'nav' },{ title:'Settings', html: Ext.example.shortBogusMarkup, border:false, autoScroll:true, iconCls:'settings' }] },{ region:'center', margins:'35 5 5 0', layout:'column', autoScroll:true, defaults: { layout: 'anchor', defaults: { anchor: '100%' } }, items: [{ columnWidth: 1/3, baseCls:'x-plain', bodyStyle:'padding:5px 0 5px 5px', items:[{ title: 'A Panel', html: Ext.example.shortBogusMarkup }] },{ columnWidth: 1/3, baseCls:'x-plain', bodyStyle:'padding:5px 0 5px 5px', items:[{ title: 'A Panel', html: Ext.example.shortBogusMarkup }] },{ columnWidth: 1/3, baseCls:'x-plain', bodyStyle:'padding:5px', items:[{ title: 'A Panel', html: Ext.example.shortBogusMarkup },{ title: 'Another Panel', html: Ext.example.shortBogusMarkup }] }] }] }); });</script></head><body></body></html>?