ExtJS Layout 3

Fit Layout

Feature:

1. 只有一个子元素，充满父容器。

2. 子元素随父容器大小变化而变化。

3. layout属性-defaultMargins。

Card Layout 

Feature:

1. 可有多个子元素，但每次只显示一个。
2. getActiveItem( ) 返回会当前活动子元素。
3. setActiveItem( ) 用数字做参数可用，从0开始。
4. getNext( ) & getPrev( )
5. next( ) & prev( )

Ext.onReady(function()
{
	// 官方的例子
	Ext.create('Ext.window.Window', 
	{
		autoShow: true,
		title: 'Wizard',
		width: 400,
		height: 300,
		layout: 'card',
		bodyStyle: 'padding:15px',
		bbar: 
		[
			{
				id: 'move-prev',
				text: 'Back',
				handler: function(btn) 
				{
					navigate(btn.up("panel"), "prev");
				},
				disabled: true
			},
			'->', 
			{
				id: 'move-next',
				text: 'Next',
				handler: function(btn) 
				{
					navigate(btn.up("panel"), "next");
				}
			}
		],
		items: 
		[
			{
				html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
			},
			{
				html: '<p>Step 2 of 3</p>'
			},
			{
				html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
			}
		],
		renderTo: Ext.getBody()
	});
});


// 不是用函数名，而是用赋值定义函数
var navigate = function(panel, direction)
{
    var layout = panel.getLayout();
    layout[direction]();	// 面板跳转		
	Ext.getCmp('move-prev').setDisabled(!layout.getPrev());		// 参数：true or false
	Ext.getCmp('move-next').setDisabled(!layout.getNext());		
};