Extjs layout 总结

于 2010-11-19 15:19:57 发布
阅读量81 收藏
点赞数
分类专栏： EXT JS 文章标签： EXT HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wjm901215/article/details/83767268
版权

1.column Layout 列布局

在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度。width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。

 

 
 

   <!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> 
  Ext.onReady( 
  function 
  (){  
  var 
   window  
  = 
    
  new 
   Ext.Window({ layout:  
  " 
  column 
  " 
  , title:  
  " 
  Hello World 
  " 
  , id:  
  " 
  helloWorldWindow 
  " 
  , bodyStyle:  
  " 
  padding:10px; 
  " 
  , width:  
  550 
  , height:  
  300 
  , x:  
  100 
  , y:  
  100 
  , items: [ { columnWidth: . 
  6 
  , baseCls:  
  " 
  x-plain 
  " 
  , frame:  
  true 
  , layout:  
  " 
  form 
  " 
  , bodyStyle:  
  " 
  padding:5px; 
  " 
  , items: [ {xtype:  
  " 
  textfield 
  " 
  , fieldLabel:  
  " 
  UserName 
  " 
  }, {xtype:  
  " 
  textfield 
  " 
  , fieldLabel:  
  " 
  Age 
  " 
  } ] }, { columnWidth: . 
  3 
  , baseCls:  
  " 
  x-plain 
  " 
  , bodyStyle:  
  " 
  padding:5px; 
  " 
  , items: [ {xtype:  
  " 
  textarea 
  " 
  } ] }, { columnWidth: . 
  1 
  , baseCls:  
  " 
  x-plain 
  " 
  , bodyStyle:  
  " 
  padding:5px; 
  " 
  , layout:  
  " 
  form 
  " 
  , items: [ { xtype:  
  " 
  button 
  " 
  , text:  
  " 
  Ok 
  " 
  , handler:  
  function 
  () { alert( 
  " 
  OK 
  " 
  ); } }, { xtype:  
  " 
  button 
  " 
  , text:  
  " 
  Cancel 
  " 
  , handler:  
  function 
  () { alert( 
  " 
  Cancel 
  " 
  ); } } ] } ] }); window.render(Ext.getDom( 
  " 
  tt 
  " 
  )); window.show(); }); 
 
 

 

 
 

2.fit Layout 
 


  Fit布局，子元素将自动填满整个父容器（对元素设置宽度无效），如果容器组件中有多个子元素，则只会显示第一个子元素。 

 

 
 
 
  
 
  
 
   Ext.onReady(  
   function 
   (){  
   var 
    win  
   = 
     
   new 
    Ext.Window({ title:  
   " 
   Hello World 
   " 
   , renderTo: Ext.getDom( 
   " 
   tt 
   " 
   ), width:  
   400 
   , height:  
   250 
   , x:  
   150 
   , y:  
   50 
   , layout:  
   " 
   fit 
   " 
   , items: [ {xtype: 
   " 
   panel 
   " 
   , title: 
   " 
   O 
   " 
   }, {xtype: 
   " 
   panel 
   " 
   , title: 
   " 
   K 
   " 
   } ] }); win.show(); } ); 
  
 
 
 

 

 
 

3. border Layout
 


  一、Border布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。 

 

 
 
 
  
 
  

    <!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> 
   Ext.onReady(  
   function 
   () {  
   new 
    Ext.Viewport({ layout: 
   " 
   border 
   " 
   , items:[ { region: 
   " 
   north 
   " 
   , height: 
   80 
   , xtype:  
   " 
   label 
   " 
   ,  
   // 
   style: "border: 1px solid red;padding:1px;", 
     
    frame:  
   true 
   , text:  
   " 
   cdred.net study club 
   " 
    }, { region: 
   " 
   south 
   " 
   , height: 
   20 
   , xtype: 
   ' 
   label 
   ' 
   , text: 
   ' 
   Status show zone.. 
   ' 
    }, { region: 
   " 
   center 
   " 
   , title: 
   " 
   中央面板 
   " 
    }, { region: 
   " 
   west 
   " 
   , width: 
   200 
   , title: 
   " 
   系统栏目 
   " 
   , collapsible:  
   true 
    }, { region: 
   " 
   east 
   " 
   , width: 
   150 
   , collapsed:  
   true 
   , collapsible:  
   true 
   , title: 
   " 
   在线好友 
   " 
    } ] }); } ); 
  
 
 
 
 
 
 

 


  4.accordion Layout 

 

 
 
 
 

   Accordion布局由类Ext.layout.Accordion定义，表示可折叠的布局，点击每一个子元素的头部名称或右边的按钮，则会展开该面板，并收缩其它已经展开的面板。 
  
layoutConfig：true表示在执行展开折叠时启动动画效果，默认值为false。 
  
 
 
  
** 注意如果你是用 panel之类的 必须拥有 title:'' 属性
 
  
 
 
  
 
   
 
   

     <!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> 
    Ext.onReady( 
    function 
    (){  
    var 
     panel  
    = 
      
    new 
     Ext.Panel({ title: 
    " 
    人员信息 
    " 
    , renderTo:Ext.getDom( 
    " 
    tt 
    " 
    ), frame: 
    true 
    , width: 
    250 
    , height: 
    300 
    , layout: 
    " 
    accordion 
    " 
    , layoutConfig: { animate:  
    true 
     }, items:[ {xtype: 
    " 
    panel 
    " 
    , title: 
    " 
    O 
    " 
    , html: 
    " 
    这是子元素1中的内容 
    " 
    }, {xtype: 
    " 
    panel 
    " 
    , title: 
    " 
    K 
    " 
    , html: 
    " 
    这是子元素2中的内容 
    " 
    }, {xtype: 
    " 
    panel 
    " 
    , title: 
    " 
    L 
    " 
    , html: 
    " 
    这是子元素3中的内容 
    " 
    } ] }); }); 
   
 
  
 
  
 
 
  
 
 
 
 5 form Layout 
 
Form布局由类Ext.layout.FormLayout定义，名称为form，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。
 
 

   hideLabels：tru表示隐藏标签，默认为false。 
  
labelAlign：标签队齐方式left、right、center,默认为left。 
  
在实际应用中，Ext.form.FormPanel这个类默认布局使用的是Form布局，因此我们直接使用FormPanel即可。
 
 
 
 
 
  
 
  

    <!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> 
   Ext.onReady(  
   function 
   () {  
   var 
    panel  
   = 
     
   new 
    Ext.Panel({ layout: 
   " 
   form 
   " 
   , title:  
   " 
   HelloWorld 
   " 
   , renderTo:Ext.getDom( 
   " 
   tt 
   " 
   ), width:  
   400 
   , height: 
   250 
   , frame:  
   true 
   , hideLabel:  
   true 
   , collapsible:  
   true 
   , bodyStyle:  
   " 
   padding:20px; 
   " 
   , defaultType: 
   " 
   textfield 
   " 
   , items:[ {fieldLabel: 
   " 
   Hello 
   " 
   }, {fieldLabel: 
   " 
   World 
   " 
   } ] }); } ); 
  
 
 
 
 
 
 

 

 
 


  6 table Layout 
 
 
 
 

   Table布局由类Ext.layout.TableLayout定义，类以于html中的table，可以对行或列进行合并。 
  
layoutConfig使用columns指定父容器分成3列， 
  
rowspan合并行数目。 
  
colspan合并列数目。 
 
 
 
 
  
 
   
 
   

     <!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> 
    Ext.onReady(exe);  
    function 
     exe() {  
    var 
     panel  
    = 
      
    new 
     Ext.Panel({ title:  
    " 
    Hello World 
    " 
    , layout:  
    " 
    table 
    " 
    , width:  
    500 
    , height:  
    300 
    , bodyStyle: 
    ' 
    padding:20px; 
    ' 
    , layoutConfig: { columns:  
    3 
     }, items: [ {xtype: 
    " 
    panel 
    " 
    , title: 
    " 
    hello 
    " 
    , html: 
    " 
    hello context 
    " 
    , rowspan: 
    2 
    , height:  
    100 
    }, {xtype: 
    " 
    panel 
    " 
    , title: 
    " 
    world 
    " 
    , html: 
    " 
    world context 
    " 
    , colspan: 
    2 
    }, {xtype: 
    " 
    panel 
    " 
    , title: 
    " 
    cheng 
    " 
    , html: 
    " 
    cheng context 
    " 
    }, {xtype: 
    " 
    panel 
    " 
    , title: 
    " 
    du 
    " 
    , html: 
    " 
    du context 
    " 
    } ] }); panel.render(Ext.getDom( 
    " 
    tt 
    " 
    )); } 
   
 
  
 
  
 
 
 
 7 card Layout 

 

 
 
 
  
 
  

    <!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> 
   Ext.onReady( 
   function 
   () {  
   var 
    i  
   = 
     
   0 
   ;  
   var 
    navHandler  
   = 
     
   function 
   (direction){ i  
   += 
    direction; Ext.getCmp( 
   " 
   card 
   " 
   ).getLayout().setActiveItem(i);  
   if 
    (i  
   == 
     
   2 
   ) { Ext.getCmp( 
   " 
   move-next 
   " 
   ).setDisabled( 
   true 
   ); }  
   else 
     
   if 
    (i  
   == 
     
   0 
   ) { Ext.getCmp( 
   " 
   move-prev 
   " 
   ).setDisabled( 
   true 
   ); }  
   else 
    { Ext.getCmp( 
   " 
   move-next 
   " 
   ).setDisabled( 
   false 
   ); Ext.getCmp( 
   " 
   move-prev 
   " 
   ).setDisabled( 
   false 
   ); } };  
   var 
    card  
   = 
     
   new 
    Ext.Panel({ id:  
   " 
   card 
   " 
   , title :  
   ' 
   Example Wizard 
   ' 
   , layout :  
   ' 
   card 
   ' 
   , activeItem :  
   0 
   , bodyStyle :  
   ' 
   padding:15px 
   ' 
   , defaults : { border :  
   false 
    }, bbar : [{ id :  
   ' 
   move-prev 
   ' 
   , text :  
   ' 
   Back 
   ' 
   , handler : navHandler.createDelegate( 
   this 
   , [ 
   - 
   1 
   ]), disabled :  
   true 
    },  
   ' 
   -> 
   ' 
   , { id :  
   ' 
   move-next 
   ' 
   , text :  
   ' 
   Next 
   ' 
   , handler : navHandler.createDelegate( 
   this 
   , [ 
   1 
   ]) }], items : [{ id :  
   ' 
   card-0 
   ' 
   , html :  
   ' 
   <h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p> 
   ' 
    }, { id :  
   ' 
   card-1 
   ' 
   , html :  
   ' 
   <p>Step 2 of 3</p> 
   ' 
    }, { id :  
   ' 
   card-2 
   ' 
   , html :  
   ' 
   <h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p> 
   ' 
    }] }); card.render(Ext.getDom( 
   " 
   tt 
   " 
   )); }); 
  
 
 
 
 
 
 

 

8 absolute Layout
 

 
 

 
 
 
 

   <!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> 
  Ext.onReady(exe);  
  function 
   exe() {  
  var 
   form  
  = 
    
  new 
   Ext.form.FormPanel({ title :  
  ' 
  Absolute Layout 
  ' 
  , frame :  
  true 
  , layout :  
  ' 
  absolute 
  ' 
  , x:  
  100 
  , y:  
  40 
  , height:  
  500 
  , layoutConfig : { extraCls :  
  ' 
  x-abs-layout-item 
  ' 
   }, defaultType :  
  ' 
  textfield 
  ' 
  , items : [{ x :  
  0 
  , y :  
  5 
  , xtype :  
  ' 
  label 
  ' 
  , text :  
  ' 
  Send To: 
  ' 
   }, { x :  
  60 
  , y :  
  0 
  , name :  
  ' 
  to 
  ' 
  , anchor :  
  ' 
  100% 
  ' 
   }, { x :  
  0 
  , y :  
  35 
  , xtype :  
  ' 
  label 
  ' 
  , text :  
  ' 
  Subject: 
  ' 
   }, { x :  
  60 
  , y :  
  30 
  , name :  
  ' 
  subject 
  ' 
  , anchor :  
  ' 
  100% 
  ' 
   }, { x :  
  0 
  , y :  
  60 
  , xtype :  
  ' 
  textarea 
  ' 
  , name :  
  ' 
  msg 
  ' 
  , anchor :  
  ' 
  100% 100% 
  ' 
   }] }); form.render(Ext.getDom( 
  " 
  tt 
  " 
  )); } 
 
 


                

        

        




    

  


    

      

        

            

              
                
                  wjm901215
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









              

  



          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值