iteye_3598
2010-09-09 17:09
浏览 300
已采纳

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

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

4条回答 默认 最新

相关推荐 更多相似问题