Ext. onready (function () {var navhandler = function (Direction) {var wizard = ext. getcmp ('wizard '). layout; var pre = ext. getcmp ('move _ prev'); var next = ext. getcmp ('move _ next'); var activeid = wizard. activeitem. ID; If (activeid = 'Card-0') {If (Direction = 1) {wizard. setactiveitem (1); pre. setdisabled (false) ;}} else if (activeid = 'Card-1') {If (Direction =-1) {wizard. setactiveitem (0); pre. setdisabled (true);} else {wizard. setactiveitem (2); next. setdisabled (true) ;}} else if (activeid = 'Card-2') {If (Direction =-1) {wizard. setactiveitem (1); next. setdisabled (false) ;}} new Ext. viewport ({layout: 'border', items: [{region: 'north', Title: 'north', HTML: 'north', height: 50, collapsible: true }, {region: 'south', Title: 'south', HTML: 'south', height: 50, collapsible: true}, {region: 'west', title: 'west', width: 200, collapsible: True, layout: 'accordion', // layoutconfig: {Animate: True // titlecollapse: True, // activeontop: false}, items: [{Title: 'column 1', HTML: 'column 1'}, {Title: 'column 2', HTML: 'column 2 '}, {Title: 'Third barri', HTML: 'Third barri'}]}, {region: 'east', ID: "Wizard", Title: 'guide', activeitem: 0, width: 200, collapsible: True, layout: 'Card ', // card Layout mode bodystyle: 'padding: 15px', ults: {border: false}, bbar: [{ID: 'move _ prev', text: 'previous ', Handler: navhandler. createdelegate (this, [-1]), disabled: true}, '->', // indicates that all blank areas will be occupied {ID: 'move _ next', text: 'Next', Handler: navhandler. createdelegate (this, [1])}], items: [{ID: 'Card-0', HTML: '
Image Display: