ExtJS layout的9种样式详解(二)
例二：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, ) } ], 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: "container" }); });http://www.agoit.com/upload/attachment/138014/c3127321-f1e2-33c8-926a-13e010343dc9.pnghttp://www.agoit.com/upload/attachment/138016/cea70c6a-6d36-3d16-ba95-1a8a8006b576.png
六、column列布局由Ext.layout.ColumnLayout类定义，名称为column。列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。看下面的代码：
例一：
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及剩余宽度，执行结果如
http://www.agoit.com/upload/attachment/138018/7db067ea-dc7c-36d4-9b13-ce22cb9b12f6.jpg
例二：columnWidth来定义子元素所占的列宽度(注意columnWidth的总和应该为1)
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}]});});
http://www.agoit.com/upload/attachment/138021/1efb89e8-db85-3292-94e4-7f6f2a7d6751.jpg
例三：column和columnWidth的混合使用
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}]});});
http://www.agoit.com/upload/attachment/138023/56fd0612-4bee-3903-996b-0b7fc386fec9.jpg
例四．
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();
http://www.agoit.com/upload/attachment/138025/2e2e380f-de19-3c49-8047-12067283ceaa.png
页:
[1]