问题描述
在使用extjs portal 与fusionchar结合做展示时，当调整浏览器窗口时，其中的portal无法自动调整大小，来适应窗口的变化，当刷新下页面时，才能适应窗口大小部分代码如下： var c0_r0 = new Ext.ux.Portlet({ xtype:'portlet', id:'panel1', margins:'10 0 0 0',//title: 'Grid in a Portlet',layout:'fit',height:300,collapsible : false,collapsed:false, tools: tools,items: [FCF_Column3DPanel] }); var c0_r1 = new Ext.ux.Portlet({ xtype:'portlet', id:'panel2', margins:'10 0 0 0',//title: 'Grid in a Portlet',layout:'fit',height:300,collapsible : false,collapsed:false, tools: tools,items: [FCF_Pie3DPanel1] }); var c0_r2=new Ext.ux.Portlet({ xtype:'portlet', id:'panel3', margins:'10 0 0 0',//title: 'Grid in a Portlet',layout:'fit',height:300,collapsible : false,collapsed:false, tools: tools,items: [FCF_LinePanel2] }); var col_0 = new Ext.ux.PortalColumn({ columnWidth:.5, style:'padding:10px 0 10px 10px', items:[c0_r0,c0_r1,c0_r2] }); var c1_r0 = new Ext.ux.Portlet({ xtype:'portlet', id:'panel4', margins:'10 0 0 0',//title: 'Grid in a Portlet',layout:'fit',height:300,collapsible : false,collapsed:false, tools: tools,items: [FCF_FunnelPanel3] }); var c1_r1 = new Ext.ux.Portlet({ xtype:'portlet', id:'panel5', margins:'10 0 0 0',//title: 'Grid in a Portlet',layout:'fit',height:300,collapsible : false,collapsed:false, tools: tools,items: [FCF_KagiPanel4] }); var c1_r2 = new Ext.ux.Portlet({ xtype:'portlet', id:'panel6', margins:'10 0 0 0',//title: 'Grid in a Portlet',layout:'fit',height:300,collapsible : false,collapsed:false,items: [FCF_PyramidPanel5] }); var col_1 = new Ext.ux.PortalColumn({ columnWidth:.5, style:'padding:10px 0 10px 10px', items:[c1_r0,c1_r1,c1_r2] });_portal = new Ext.ux.Portal({xtype:'portal',border: false, //region:'center', //margins:'35 5 5 0', items:[col_0,col_1] /* * Uncomment this block to test handling of the drop event. You could use this * to save portlet position state for example. The event arg e is the custom * event defined in Ext.ux.Portal.DropZone. */ ,listeners: { 'drop': function(e){ //Ext.Msg.alert('aaa',dump_obj(this.items)); //Ext.Msg.alert('aaa',dump_obj(this.items)); //Ext.Msg.alert('aaa',dump_obj(e.portal)); Ext.Msg.alert('Portlet Dropped', e.panel.title+':id:'+e.panel.id + '<br />Column: ' + e.columnIndex + '<br />Position: ' + e.position); } }}); _portalContainer = new Ext.Container({ //layout:'border', renderTo:"biportal", height:'100%', width:'100%',margins:'5 5 5 5', frame:false,// //border:false, //bodyBorder :false, items:[ _portal ] });请问该如何调整脚本代码，使得能适应窗口的变化啊？ 问题补充：谢谢您的回答，我是使用extjs渲染页面中的div层，使用您给的方法，按页面中的其他元素也就被覆盖了，只有Ext.Viewport中的内容
解决方案
可能是fusionChar的问题。你可以监听fusionChar所属的panel resize事件动态改变fusionChar的宽高
解决方案二：
添加以下代码你测试试试Ext.EventManager.addListener(window, "resize", function() {if(Ext.getBody().getWidth()<_portalContainer.getWidth()){ //如果窗口变小设置_portal宽0，让_portalContainer适应窗口宽。_portal.setWidth(0);}else{_portal.setWidth(_portalContainer.getWidth()); //设置_portal宽度为_portalContainer的宽度 _portal.doLayout();}});
解决方案三：
那你可以监听window 事件处理_portalContainer宽高Ext.EventManager.addListener(window, "resize", function() {});能否截个图看看你现在的效果
解决方案四：
_portalContainer = new Ext.Container({ //layout:'border', renderTo:"biportal", height:'100%', width:'100%', margins:'5 5 5 5', frame:false,// //border:false, //bodyBorder :false, items:[ _portal ] }); 改成 _portalContainer = new Ext.Viewport({ layout:'fit', margins:'5 5 5 5', frame:false,// //border:false, //bodyBorder :false, items:[ _portal ] }); 主要原因是因为你的 _portalContainer 宽高只会在第一次计算好。在窗口改变大小的情况下。_portalContainer 宽高不会跟着改变