ExtJs学习笔记(11)_Absolute布局和Accordion布局

 

ExtJs其实在某种程度上可以代替div+css来进行页面布局(不过经测试，在最新的Firefox3下，部分功能好象有点问题)，今天我们来学习二种最基本的布局

1.Absolute 布局：这种最容易理解，直接用x,y值来绝对定位组件

2.Accordion布局：Accordion意为"手风琴"，即最终效果可以象手风琴那样拉来拉去，说白了，就是类似QQ面板的功能

 

下面通过示例代码观察一下效果:

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8" />
     < link  rel ="stylesheet"  type ="text/css"  href ="../resources/css/ext-all.css"   />
      < script  type ="text/javascript"  src ="../adapter/ext/ext-base.js" ></ script >
     < script  type ="text/javascript"  src ="../ext-all-debug.js" ></ script >  
     < script  type ="text/javascript"  src ="../Extjs_Intellisense.js" ></ script >
     < title > Layout_Border示例 </ title >
     < style  type ="text/css" >
        #panel2 .x-panel-body  {
            background : #ffe ;
            color : #15428B ;
         }
        #panel2 .x-panel-header-text  {
            color : #f00 ;
         }

     </ style >
</ head >
< body >
< script  type ="text/javascript" >
    Ext.onReady( function () {
        
         // layout:absolute(绝对定位布局)
         var  win  =   new  Ext.Window({
            title:  " Absolute Layout " ,
            height:  400 ,
            width:  400 ,
            plain:  true ,
            x:  10 ,
            y: 10 ,
            layout: ' absolute ' ,
            items: [
                 new  Ext.Panel({
                    title: " panel 1 " ,
                    x: 50 ,
                    y:  50 ,
                    width:  100 ,
                    height: 100 ,
                    html: " Positioned at x:50,y:50 " ,
                    frame: true
                }),
                 new  Ext.Panel({
                    title:  " panel 2 " ,
                    x:  125 ,
                    y:  125 ,
                    width:  100 ,
                    height:  100 ,
                    html:  " Positioned at x:125,y:125 " ,
                    frame:  true
                })
            ]

        })
        win.show();


         // layout:Accordion(类似QQ面板的布局)
         var  win2  =   new  Ext.Window({
            title:  " Accordion Layout " ,
            height:  400 ,
            width:  200 ,
            x:  420 ,
            y: 10 ,
            plain:  true ,
            layout:  ' accordion ' ,
            items: [
                 new  Ext.Panel({
                    title:  " panel 1 " ,
                    id: " panel1 " ,                  
                    html:  " panel one " ,
                    frame:  true
                }),
                 new  Ext.Panel({
                    title:  " panel 2 " ,
                    id: " panel2 " ,
                    html:  " panel two " ,
                    frame:  true
                })
            ]

        })
        win2.show();
    });
</ script >
</ body >
</ html >

 

效果图: