请教高手Ｅｘｔｊｓ问题


 <script type="text/javascript">
    var navigate = function(panel, direction){
    var layout = panel.getLayout();
    if(direction == "prev"){
     layout.prev();
    }else{
     layout.next();
    }
     Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
     Ext.getCmp('move-next').setDisabled(!layout.getNext());    };
    
   Ext.onReady(function(){
    Ext.create('Ext.panel.Panel', {
    title: 'Example Wizard',
    width: 300,
    height: 200,
    layout: 'card',
    activeItem: 0, 
    bodyStyle: 'padding:15px',
    defaults: {
        border: false
    },
    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: [{
        id: 'card-0',
        html: '<p>Step 1</p>'
      },{
        id: 'card-1',
        html: '<p>Step 2</p>'
      },{
        id: 'card-2',
        html: '<p>Step 3</p>'
      },{
        id: 'card-3',
        html: '<p>Step 4</p>'
      },
      renderTo: Ext.getBody()
    });
    
}); 
请教高手红色代码处为何意，详细一些，本人初学者，万分感谢！！