Extjs4---card布局

最新推荐文章于 2017-11-24 10:41:54 发布

最新推荐文章于 2017-11-24 10:41:54 发布 · 114 阅读

文章标签：

#javascript #ViewUI

本文介绍了一种在ExtJS框架中实现Card布局的方法，通过示例代码展示了如何使用Card布局来管理多个子组件并实现向导式的交互效果，包括如何通过按钮控制不同组件间的切换。

这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的分布提交。

<script type="text/javascript">
			Ext.application(
				{
					name:'layout_card',
					launch:function(){
						var navigate = function(panel,direction){
							var layout = panel.getLayout();
							layout[direction]();
							Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
							//判断是否有下一个card，如果没有则设置disabled为true
							Ext.getCmp('move-next').setDisabled(!layout.getNext());
						};
						Ext.create(
							'Ext.panel.Panel',
							{
								title:'card布局',
								width:300,
								height:200,
								layout:'card',
								activeItem:0,
								x:30,
								y:30,
								renderTo: Ext.getBody(),
								draggable:true,	//是否允许拖动
								//用于显示页码
								bbar: [
									{             
							            id: 'move-prev',             
							            text: '上一步',              
							            handler: function(btn) { 
							                navigate(btn.up("panel"), "prev");             
							            }, 
							            disabled: true 
							        }, 
							        '->', 	////决定两个按钮的位置
							        { 
							            id: 'move-next',             
							            text: '下一步',              
							            handler: function(btn) { 
							                navigate(btn.up("panel"), "next"); 
							            },
						        	}
							    ], 
						        items: [
						        	{ 
							            id: 'card-0', 
							            html: '第一个card'      
							        }, 
							        { 
							            id: 'card-1', 
							            html: '第二个card' 
							        }, 
							        { 
							            id: 'card-2', 
							            html: '第三个card'      
							        }
						     	],     
							}
						);
					}
				}
			)
		</script>

效果图