extjs portal 实现宽度的自适应

在使用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
        ]
    });

请问该如何调整脚本代码，使得能适应窗口的变化啊？

可能是fusionChar的问题。你可以监听fusionChar所属的panel resize事件动态改变fusionChar的宽高

_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 宽高不会跟着改变

那你可以监听window 事件处理_portalContainer宽高
Ext.EventManager.addListener(window, "resize", function() {});
能否截个图看看你现在的效果

添加以下代码你测试试试
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();
}
});