ExtJS学习笔记 layout的9种样式风格

 

• absolute ：顾名思义，在容器内部，根据指定的坐标定位显示
• accordion ：这个是最容易记的，手风琴效果

• 代码：

 Ext.onReady(function(){ 
 var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局 
       {          
        title:'容器组件', 
        layout:'accordion',        
        width:500, 
        height:200, 
        layoutConfig:{animate:false}, 
        items:[ 
         {title:'元素1',html:''}, 
         {title:'元素2',html:''}, 
         {title:'元素3',html:''}, 
         {title:'元素4',html:''} 
        ] 
       } 
      );
      panel.render('hello');
 });
效果如下：

• anchor

这个效果具体还不知道有什么用，就是知道注意一下
1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，
2.anchor值通常只能为负值(指非百分比值)，正值没有意义，
3.anchor必须为字符串值
代码：
 Ext.onReady(function() { 
         var panel1 = new Ext.Panel({ 
             title: "panel1", 
             height: 100, 
             anchor: '-50', 
             html: "高度等于100，宽度=容器宽度-50" 
         }); 
  
         var panel2 = new Ext.Panel({ 
             title: "panel2", 
             height: 100, 
             anchor: '50%', 
             html: "高度等于100,宽度=容器宽度的50%" 
  
         }); 
  
         var panel3 = new Ext.Panel({ 
             title: "panel3", 
             anchor: '-10, -250', 
             html: "宽度=容器宽度-10,高度=容器宽度-250" 
  
         }); 
  
         var win = new Ext.Window({ 
             title: "Anchor Layout", 
             height: 400, 
             width: 400, 
             plain: true,                     
             layout: 'anchor', 
             items: [panel1, panel2,panel3]             
         }); 
         win.show(); 
     });
效果如下：                                                                                    
                  

• border ：将容器分为五个区域:east,south,west,north,center

代码如下：
    Ext.onReady(function() {   
           var win;      
               //创建TabPanel 
               var tabs = new Ext.TabPanel({ 
                   region: 'center', //border布局将页面分成东南西北中五部分，这里是中间
                   margins: '3 3 3 0', 
                   activeTab: 0, 
                   defaults: { 
                       autoScroll: true 
                   }, 
                   items: [{ 
                       title: 'Bogus Tab', 
                       html: "第一个Tab的内容." 
                   }, { 
                       title: 'Another Tab', 
                       html: "我是另一个Tab" 
                   }, { 
                       title: 'Closable Tab', 
                       html: "这是一个可以关闭的Tab", 
                       closable: true 
   }] 
                   }); 
    
                   //定义一个Panel 
                   var nav = new Ext.Panel({ 
                       title: 'Navigation', 
                       region: 'west', //放在西边，即左侧 
                       split: true, 
                       width: 200, 
                       collapsible: true, //允许伸缩 
                       margins: '3 0 3 3', 
                       cmargins: '3 3 3 3' 
                   }); 
    
                   //如果窗口第一次被打开时才创建 
                   if (!win) { 
                       win = new Ext.Window({ 
                           title: 'Layout Window', 
                           closable: true, 
                           width: 600, 
                           height: 350, 
                           border : false, 
                           plain: true, 
                           layout: 'border', 
                           closeAction:'hide', 
                           items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局 
                       }); 
                   } 
                   win.show(); 
          
           });
效果图：

• card ：像安装向导一样，一张一张显示

 

代码如下：
    Ext.onReady(function() {      
            var i = 0;       
            var navHandler = function(direction) { 
                if (direction == -1) { 
                    i--; 
                    if (i < 0) { i = 0; } 
                } 
    
               if (direction == 1) { 
                   i++; 
                   if (i > 2) { i = 2; return false; } 
               } 
    
    
               var btnNext = Ext.get("move-next").dom.document.getElementsByTagName_r("button")[1]; 
               var btnBack = Ext.get("move-next").dom.document.getElementsByTagName_r("button")[0]; 
    
               if (i == 0) { 
                   btnBack.disabled = true; 
               } 
               else { 
                   btnBack.disabled = false; 
               } 
    
               if (i == 2) { 
                   btnNext.value = "完成"; 
                   btnNext.disabled = true; 
               } 
               else { 
                   btnNext.value = "下一步"; 
                   btnNext.disabled = false; 
               } 
    
               card.getLayout().setActiveItem(i); 
    
           }; 
    
    
           var card = new Ext.Panel({ 
               width: 200, 
               height: 200, 
               title: '注册向导', 
              layout: 'card', 
               activeItem: 0, // make sure the active item is set on the container config! 
               bodyStyle: 'padding:15px', 
               defaults: { 
                   border: false 
               }, 
               bbar: [ 
                   { 
                       id: 'move-prev', 
                       text: '上一步', 
                       handler: navHandler.createDelegate(this, [-1])                     
                   }, 
                   '->', 
                   { 
                       id: 'move-next', 
                       text: '下一步', 
                      handler: navHandler.createDelegate(this, [1]) 
                   } 
               ], 
    
              items: [{ 
                   id: 'card-0', 
                   html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>' 
               }, { 
                   id: 'card-1', 
                   html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>' 
               }, { 
                   id: 'card-2', 
                   html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>' 
   }], 
    
                   renderTo: "hello" 
               }); 
    
    
    
           }); 
效果图：

 

• column ： 把整个容器看成一列,然后向容器放入子元素时

代码：
Ext.onReady(function() {
            new Ext.Panel({
                        renderTo : "hello",
                        title : "容器组件",
                        layout : "column",
                        width : 500,
                        height : 100,
                        items : [{title : "列1",
                                  columnWidth : .2
                                },{title : "列2",
                                   columnWidth : .3
                                },{title : "列3",
                                   columnWidth : .3
                                },{title : "列4",
                                   columnWidth : .2
                                }]
                    });
        });
效果如下：
          

• fit ： 一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）

代码：
 Ext.onReady(function(){ 
 var panel=new Ext.Panel( 
       { 
        renderTo:'hello', 
        title:'容器组件', 
        layout:'fit', 
        width:500, 
        height:100, 
        items:[ 
         {title:'子元素1'}, 
         {title:'子元素2'}, 
         {title:'子元素3'}, 
         {title:'子元素4'}, 
         {title:'子元素5'} 
        ] 
       } 
      ); 
 });

效果如下：
        

• form ： 是一种专门用于管理表单中输入字段的布局

代码：
    Ext.onReady(function() { 
            var win = new Ext.Window({ 
                title: "form Layout", 
                height: 150, 
                width: 230, 
                plain: true, 
                bodyStyle: 'padding:15px', 
                items:  
                { 
                   xtype: "form", 
                   labelWidth: 30, 
                   defaultType: "textfield", 
                   frame:true, 
                   items:  
                   [ 
                       { 
                           fieldLabel:"姓名", 
                           name:"username", 
                           allowBlank:false 
                       }, 
                       { 
                           fieldLabel:"呢称", 
                           name:"nickname" 
                       }, 
                       { 
                          fieldLabel: "生日", 
                           xtype:'datefield', 
                           name: "birthday", 
                           width:127 
                       } 
                   ] 
               } 
           }); 
           win.show(); 
       }); 
效果如下：
         
这个输入用的比较多，有个比较全的，网址： http://www.17ext.com/showtopic-255.aspx ，需要什么就去改什么吧 ：）

• table ： 按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列

代码：
Ext.onReady(function() {
            var panel = new Ext.Panel({
                        renderTo : "hello",
                        title : "容器组件",
                        width : 500,
                        height : 200,
                        layout : "table",
                        layoutConfig : {
                            columns : 3
                        },
                        items : [{
                                    title : "子元素1",
                                    html : "这是子元素1中的内容",
                                    rowspan : 2,
                                    height : 100
                                },{
                                    title : "子元素2",
                                    html : "这是子元素2中的内容",
                                    colspan : 2
                                },{
                                    title : "子元素3",
                                    html : "这是子元素3中的内容"
                                },{
                                    title : "子元素4",
                                    html : "这是子元素4中的内容"
                                }]
                    });
        });
效果如下：