ExtJS布局练习例

/*//Viewport
    function()
    {
     var vport=new Ext.Viewport(
      {
       enableTabScroll:false,
       layout:"fit",//border
       items:[
         {title:"面板",html:"esfsdf",
          tbar:[{text:"按钮1"},{text:"按钮2"}],
          bbar:[{text:"按钮1"},{text:"按钮2"}]
         }
          ]      
      }    
     );
    }*/
   
    /*//Viewport--窗口布局
    function()
    {
     var vport=new Ext.Viewport(
      {
       enableTabScroll:true,
       layout:"border",
       items:[
        {
         title:"面板",
         region:"north",//位置
         collapsible:false,//是否允许隐藏
         width:300,
         html:"<h1>XXXXXXXX管理系统</h1>"
        },
        {
         title:"面板",
         region:"south",
         collapsible:true,
         width:300,
         html:"<h1>XXXXXXXX管理系统</h1>"
        },
        {
         title:"面板",
         region:"east",
         collapsible:true,
         width:300,
         html:"<h1>XXXXXXXX管理系统</h1>"
        },
        {
         title:"菜单",
         region:'west',
         width:200,
         collapsible:true,
         html:'菜单栏'
        },
        {
         xtype:'tabpanel',
         region:'center',
         items:[
           {title:'面板1'},
           {title:'面板2'}
            ]
        }
       ]
      }    
     );
    }*/
   
    /*//布局--感性认识
    function()
    {
     var panel=new Ext.Panel(
      {
       renderTo:'paneldiv',
       width:400,
       height:200,
       layout:'column',//column:设定比例,fit:单个子元素自动充满,border:,form:子元素原有大小自动排列,card,table
       items:[
        {columnWidth:0.5,title:'面板1',height:100,collapsible:true,html:'aaa'},
        {columnWidth:0.5,title:'面板2',height:100,collapsible:true,html:'bbb'},
        {columnWidth:0.5,title:'面板2',height:100,collapsible:true,html:'ccc'}
       ]
      }
     );
    }*/
    /*//布局-border:将容器分为五个区域:east,south,west,north,center
    function()
    {
     var vport=new Ext.Viewport(
      {
       enableTabScroll:true,
       layout:"border",
       items:[
        {
         title:"顶部面板",
         region:"north",//位置
         collapsible:false,//是否允许隐藏
         height:50,
         html:""
        },
        {
         title:"底部面板",
         region:"south",
         collapsible:true,
         height:50,
         html:""
        },
        {
         title:"右部面板",
         region:"east",
         collapsible:true,
         width:100,
         html:""
        },
        {
         title:"左部面板",
         region:'west',
         width:100,
         collapsible:true,
         html:'菜单栏'
        },
        {
         xtype:'tabpanel',
         region:'center',
         items:[
           {title:'面板1'},
           {title:'面板2'}
            ]
        }
       ]
      });
    }*/
    /*//布局-column:把整个容器看成一列,然后向容器放入子元素时,可通过在子元素中指定columnWidth或width来设定子元素所占的列宽，
    //columnWidth:百分比，width:实际尺寸
    //可混合用，混合用时:比例表示占剩余部分的百分比
    function()
    {
     var panel=new Ext.Panel(
      {
       renderTo:'paneldiv',
       title:'容器组件',
       layout:'column',
       width:500,
       height:100,
       items:[
        {title:'列1',width:100},
        {title:'列1',width:100},
        {title:'列1',width:100},
        {title:'列1',width:100},
        {title:'列1',columnWidth:1}
       ]
      }
     );
    }*/
    /*//布局-fit:一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）
    function()
    {
     var panel=new Ext.Panel(
      {
       renderTo:'paneldiv',
       title:'容器组件',
       layout:'fit',
       width:500,
       height:100,
       items:[
        {title:'子元素1'},
        {title:'子元素2'},
        {title:'子元素3'},
        {title:'子元素4'},
        {title:'子元素5'}
       ]
      }
     );
    }*/
    /*//布局-form:是一种专门用于管理表单中输入字段的布局
    function()
    {
     var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局
      {
       renderTo:'paneldiv',
       title:'容器组件',
       layout:'form',      
       width:300,
       height:200,
      
       defaultType:'textfield',//设置表单字段的默认类型
       hideLabels:false,//是否隐藏表单内的标签
       labelAlign:"right",//标签对齐方式
       items:[
        {fieldLabel:"请输入姓名",name:'name'},
        {fieldLabel:"请输入地址",name:'address'},
        {fieldLabel:"请输入电话",name:'tel'},
        {fieldLabel:"请输入电话",name:'time',xtype:'datefield'}
       ]
      }
     );
    }*/
    /*//布局-accordion-可折叠的布局,注意其中用到了layoutConfig.
    function()
    {
     var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局
      {
       renderTo:'paneldiv',
       title:'容器组件',
       layout:'accordion',      
       width:500,
       height:200,
       layoutConfig:{animate:false},
       items:[
        {title:'元素1',html:''},
        {title:'元素2',html:''},
        {title:'元素3',html:''},
        {title:'元素4',html:''}
       ]
      }
     );
    }*/
    //布局-table:按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列
    //用rowspan或colspan指定子元素所横跨的单元格数
    function()
    {
     var panel=new Ext.Panel(
      {
       renderTo:'paneldiv',
       title:'容器组件',
       layout:'table',      
       width:500,
       height:200,
       layoutConfig:{columns:3},//将父容器分成3列
       items:[
        {title:'元素1',html:'ssssssssss',rowspan:2,height:100},
        {title:'元素2',html:'dfffsddsdfsdf',colspan:2},
        {title:'元素3',html:'sdfsdfsdf'},
        {title:'元素4',html:''}
       ]
      }
     );
    }