EXT 做布局设置的一点经验

 

 

 

用EXTJS设置界面布局时有时候需要做一些较复杂的布局，同时要求布局中的各个部分能够自适应高度和宽度。

最近在公司做了一个项目，用EXT实现portal功能，用户界面要求能够自定义。其中就涉及了一些比较复杂的布局，现做总结如下（Ext 的版本是3.0）：

1、使用了border布局panel1中如果嵌套另一个border布局的panel2，且panel2中设置了'autoHeight:true'，那么panel2会显示不出来，我没找出解决办法，如果有哪位高人知道，请贴出来，大家分享。

 

2、界面布局能随浏览器窗口的大小自动伸缩。这个最简单的做法就是将页面上的内容全部放到一个ViewPoint中。Ext.ViewPoint，这个东西是自动填充整个body区域。

 new Ext.Viewport({

items:[mianPanel]

});

 

3、宽度自适应

以form布局的panel中的组件，只有设置了anchor属性时，该组件的宽度才能随着panel的宽度改变而改变。比如anchor: '100%'  // anchor width by percentage

 

 

4、高度自适应与滚动条的控制

panel中控制高度的属性为

height:只能是数字或‘auto’，不能设置百分比

autoHeight:默认为false

控制滚动条的属性是

autoScroll:如果内容过多，是否自动出现滚动条。默认为true;

注意：

1、如果height:300和autoHeight:true同时存在，则height：300无效。

2、如果有autoHeight:true，则panel中的滚动条就不会出现。

 

 

Anchor布局

1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽， 
2.anchor值通常只能为负值(指非百分比值)，正值没有意义， 
3.anchor必须为字符串值 

 

 

        Ext.onReady(function() {

            var viewport = new Ext.Viewport({                

layout:'anchor',

                anchorSize: {width:800, height:600},

                items:[{

                    title:'Item 1',

                    html:'Content 1',                    

                    anchor:'right 20%',

    html: "宽度=容器宽度*100%,高度=容器*20%"

                },{

                    title:'Item 2',

                    html:'Content 2',                    

                    anchor:'80% 30%',

    html: "宽度=容器宽度*80%,高度=容器*30%"

                },{

                    title:'Item 3',

                    html:'Content 3',                    

                    anchor:'-400 50%',

    html: "宽度=容器宽度-400,高度=容器*50%"

                }]

            });

        });

 

 

 

 

 

布局设置的方式如下：（最开始都是用的Ext.ux.Portal，容器中的每个组件都可以自由拖动。但是后来客户说如果页面上的组件可以自由拖拽的话，就要能够保存（即个性化页面），不然干脆就不可以拖拽。考虑还是不可以退拽来的简单，就都改成panel啦） 

 var rightPanel=new Ext.Panel({ 

   id:'rightPanel',

   region:"east",

   split:true,   

   autoHeight:true,

   border: false,

   collapsible: true,

   collapseMode:'mini',

   frame:false, 

   width:300,   

   items: [{

     columnWidth:1,

     id:'rightPotalPanel',

     border: false,

     style:'padding:0px 0px 0px 0px',

     items:[]

    }],

   margins:'0 0 0 0'

 });

 

  var leftPanel=new Ext.Panel({

 //var leftPanel=new Ext.ux.Portal({ 

   id:'leftPanel',

   region:"center",

   autoHeight:true,

   frame:false,

   border:false,

   items: []

 });

 

 var centerPanel=new Ext.ux.Portal({

   anchor: '100%', 

   region:"center",

   id:'centerPanel',

   iconCls: 'einfoIco',

   autoHeight:true,

   margins:'0 0 0 0',   

   style:'padding:0px 0px 0px 0px', 

   frame:false,

   border:false,

   items:[{

     columnWidth:.5,

     id:'centerPanel_c_l',

     style:'padding:0px 0px 0px 0px',

     items:[]

    },{

     columnWidth:.5,

     id:'centerPanel_c_r',

     style:'padding:0px 0px 0px 5px',

     items:[]

    }

 

   ]   

  });

 

 var center_topPanel=new Ext.Panel({

   anchor: '100%', 

   id:'center_topPanel',

   region:'north',

   layout:'fit',   

   style:'padding:0px 0px 10px 0px',  

   height:300, 

   border:false,

   split:false,

   items:[]

 }); 

 

var centerFramePanel=new Ext.Panel({

       region:"center",

       id:'centerRegion',

       split:true,

      margins:'0 0 0 0', 

      style:'padding:0px 0px 0px 0px',  

       layout:'form',

       autoHeight:true,

       border:false,

       items:[ 

        center_t, 

        centerPanel

       ]

      });

 

var mainPanel=new Ext.Panel({

    region:'center',

    border:false,  

    autoScroll:true, 

    layout:'border',

    items:[           

 

            leftPanel,

            rightPanel,

            centerFramePanel

    ]

   });

 

var viewport = new Ext.Viewport({

   id:'homeview',   

   layout:"fit",

   items:

   [

    mainPanel

   ]

 });