ExtJS 的9种布局详解7(二)

 

例二：

Js代码

1. Ext.onReady(function() {     
2.     var i = 0;        
3.     var navHandler = function(direction) {     
4.         if (direction == -1) {     
5.             i--;     
6.             if (i < 0) { i = 0; }     
7.         }        
8.         if (direction == 1) {     
9.             i++;     
10.             if (i > 2) { i = 2; return false; }     
11.         }  
12.         var btnNext = Ext.get("move-next");     
13.         var btnBack = Ext.get("move-next");     
14.         if (i == 0) {     
15.             btnBack.disabled = true;     
16.         } else {     
17.             btnBack.disabled = false;     
18.         }     
19.         if (i == 2) {     
20.             btnNext.value = "完成";     
21.             btnNext.disabled = true;     
22.         } else {     
23.             btnNext.value = "下一步";     
24.             btnNext.disabled = false;     
25.         }  
26.         card.getLayout().setActiveItem(i);     
27.     };     
28.    var card = new Ext.Panel({     
29.         width: 200,     
30.         height: 200,     
31.         title: '注册向导',     
32.         layout: 'card',     
33.         activeItem: 0, // make sure the active item is set on the container config!     
34.         bodyStyle: 'padding:15px',     
35.         defaults: {     
36.             border: false     
37.         },     
38.         bbar: [     
39.             {     
40.                 id: 'move-prev',     
41.                 text: '上一步',     
42.                 handler: navHandler.createDelegate(this, [-1])                         
43.             },     
44.             '->',     
45.             {     
46.                 id: 'move-next',     
47.                 text: '下一步',     
48.                 handler: navHandler.createDelegate(this, [1])     
49.             }     
50.         ],     
51.   
52.         items: [{     
53.             id: 'card-0',     
54.             html: '<h1>欢迎来到注册向导!</h1>

    Step 1 of 3

    '     
55.         }, {     
56.             id: 'card-1',     
57.             html: '<h1>请填写注册资料!</h1>

    Step 2 of 3

    '     
58.         }, {     
59.             id: 'card-2',     
60.             html: '<h1>注册成功!</h1>

    Step 3 of 3 - Complete

    '     
61.         }],     
62.         renderTo: "container"     
63.     });     
64. });  

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"); var btnBack = Ext.get("move-next"); 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>

Step 1 of 3

' }, { id: 'card-1', html: '<h1>请填写注册资料!</h1>

Step 2 of 3

' }, { id: 'card-2', html: '<h1>注册成功!</h1>

Step 3 of 3 - Complete

' }], renderTo: "container" }); });

 

 

 

 

六、column

列布局由Ext.layout.ColumnLayout类定义，名称为column。列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。看下面的代码：

例一：

Js代码

1. Ext.onReady(function(){   
2.     new Ext.Panel({  
3.         renderTo:"hello",  
4.         title:"容器组件",  
5.         layout:"column",  
6.         width:500,  
7.         height:100,  
8.         items:[{title:"列1",width:100},  
9.                 {title:"列2",width:200},  
10.                 {title:"列3",width:100},  
11.                 {title:"列4",width:95}  
12.         ]  
13.     });  
14. });  

Ext.onReady(function(){ new Ext.Panel({ renderTo:"hello", title:"容器组件", layout:"column", width:500, height:100, items:[{title:"列1",width:100}, {title:"列2",width:200}, {title:"列3",width:100}, {title:"列4",width:95} ] }); });
上面的代码在容器组件中放入了四个元素，在容器组件中形成4列，列的宽度分别为100,200,100及剩余宽度，执行结果如

 
 

例二：columnWidth来定义子元素所占的列宽度(注意columnWidth的总和应该为1)

Js代码

1. Ext.onReady(function(){   
2.     new Ext.Panel({  
3.         renderTo:"hello",  
4.         title:"容器组件",  
5.         layout:"column",  
6.         width:500,  
7.         height:100,  
8.         items:[{title:"列1",columnWidth:0.2},  
9.             {title:"列2",columnWidth:0.3},  
10.             {title:"列3",columnWidth:0.3},  
11.            {title:"列4",columnWidth:0.2}  
12.         ]  
13.     });  
14. });  

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

 例三：column和columnWidth的混合使用

Js代码

1. Ext.onReady(function(){   
2. new Ext.Panel({  
3.     renderTo:"hello",  
4.     title:"容器组件",  
5.     layout:"column",  
6.     width:500,  
7.     height:100,  
8.     items:[{title:"列1",width:200},  
9.         {title:"列2",columnWidth:0.3},  
10.         {title:"列3",columnWidth:0.3},  
11.         {title:"列4",columnWidth:0.4}  
12.     ]  
13.     });  
14. });  

Ext.onReady(function(){ new Ext.Panel({ renderTo:"hello", title:"容器组件", layout:"column", width:500, height:100, items:[{title:"列1",width:200}, {title:"列2",columnWidth:0.3}, {title:"列3",columnWidth:0.3}, {title:"列4",columnWidth:0.4} ] }); });

 

 

例四．

Js代码

1. Ext.onReady(function() {     
2.     var win = new Ext.Window({     
3.         title: "Column Layout",     
4.         height: 300,     
5.         width: 400,     
6.         plain: true,     
7.         layout: 'column',     
8.         items: [{     
9.             title:"width=50%",     
10.             columnWidth:0.5,     
11.             html:"width=(容器宽度-容器内其它组件固定宽度)*50%",     
12.             height:200     
13.             },     
14.             {     
15.             title:"width=250px",     
16.             width: 200,     
17.             height:100,     
18.             html:"固定宽度为250px"     
19.             }                 
20.         ]     
21.     });     
22.     win.show();     

Ext.onReady(function() { var win = new Ext.Window({ title: "Column Layout", height: 300, width: 400, plain: true, layout: 'column', items: [{ title:"width=50%", columnWidth:0.5, html:"width=(容器宽度-容器内其它组件固定宽度)*50%", height:200 }, { title:"width=250px", width: 200, height:100, html:"固定宽度为250px" } ] }); win.show();

 

转载于网络！