iteye_3598
2010-09-09 17:09
浏览 294

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条回答 默认 最新

  • lizhiyezi 2010-09-11 10:48
    已采纳

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

    点赞 打赏 评论
  • lizhiyezi 2010-09-09 17:52

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

    点赞 打赏 评论
  • lizhiyezi 2010-09-09 19:54

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

    点赞 打赏 评论
  • lizhiyezi 2010-09-10 09:13

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

    点赞 打赏 评论

相关推荐 更多相似问题