Questions about MODx.Panel

Tariffs.panel.Calendar = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        id: 'tariffs-panel-calendar'
        ,url: Tariffs.config.connector_url
        ,height: 400
		,layout:'table'
		,defaults: {
			// applied to each contained panel
			bodyStyle:'padding:20px'
		}
		,layoutConfig: {
			// The total column count must be specified here
			columns: 4
		},
		items: [{
			colspan: 4
			,border: false
			,items: [{
				xtype: 'tariffs-combo-cottages'
				,fieldLabel: 'Cottage'
				,emptyText: 'Select a cottage to view calendar...'
				,allowBlank: true
				,name: 'cottage'
			}]
		},{
			border: false
			,items: [{
				xtype: 'tariffs-panel-month'
				,name: 'month1'
				,id: 'month1'
				,title: 'month1'
				,width:200
				,height: 200
			}]
		},{
			border: false
			,items: [{
				xtype: 'tariffs-panel-month'
				,name: 'month2'
				,id: 'month2'
				,width:200
				,height: 200
			}]
		},{
			border: false
			,items: [{
				xtype: 'tariffs-panel-month'
				,name: 'month3'
				,id: 'month3'
				,width:200
				,height: 200
			}]
		},{
			border: false
			,items: [{
				xtype: 'tariffs-panel-month'
				,name: 'month4'
				,id: 'month4'
				,width:200
				,height: 200
			}]
		}]
        ,tbar: [{
            text: 'Next Month'
            ,handler: this.refresh
            ,scope: this
        },'-',{
            text: 'Previous Month'
            ,handler: this.refresh
            ,scope: this
		},'->',{
            xtype: 'numberfield'
            ,name: 'year'
            ,id: 'calendar-year'
            ,emptyText: 'Enter year...'
        },{
            xtype: 'button'
            ,id: 'calendar-create-year'
            ,text: _('tariffs.calendar_create_year')
            ,listeners: {
                'click': {fn: this.createCalendarYear, scope: this}
            }
        },{
            xtype: 'button'
            ,id: 'tariffs-cleanup-year'
            ,text: _('tariffs.calendar_cleanup')
            ,listeners: {
                'click': {fn: this.cleanupCalendar, scope: this}
            }
        }]
    });
    Tariffs.panel.Calendar.superclass.constructor.call(this,config);
    this.config = config;
};

Ext.extend(Tariffs.panel.Calendar,MODx.Panel);
Ext.reg('tarriffs-panel-calendar',Tariffs.panel.Calendar);

Ext.extend(Tariffs.panel.Calendar,MODx.Panel,{
	windows: {}

	,validateYear: function() {
		var field = Ext.getCmp('calendar-year');
		var eYear = field.getValue();
		var cDate = new Date();
		var cYear = cDate.getFullYear();
		if (eYear < cYear) {
			// error: cannot enter year smaller than current
			return false;
		}
		if (eYear > cYear + 2) {
			// error: cannot enter year past 3 years in future
			return false;
		}
		return true;
	}

	,createCalendarYear: function(id) {
		var field = Ext.getCmp('calendar-year');
		var year = field.getValue();
		if (this.validateYear() ) {
			MODx.msg.confirm({
				title: _('tariffs.calendar_create_confirm')
				,text: _('tariffs.calendar_create_confirm_message')
				,url: this.config.url
				,params: {
					action: 'mgr/calendar/createyear'
					,id: year
				}
				,listeners: {
					'success': {fn:function() { 
						this.refresh();
						field.setValue("");},scope:this}
				}
			});
		} else {
			Ext.Msg.alert(_('tariffs.invalid_calendar_year'), _('tariffs.invalid_calendar_year_message'));
			field.setValue("");
		}
		alert(this.config.url);
	}
	
	,cleanupCalendar: function(id) {
          //todo
	}

});

Ext.reg('tariffs-panel-calendar',Tariffs.panel.Calendar);

{
   title: 'Calendar'
     ,items: [{
     html: '<p>'+'Browse availability calendar for your properties. Select a property from the dropdown list and browse the months using the buttons in the toolbar.'+'</p><br />'
     ,border: false
   },{
      xtype: 'tariffs-panel-calendar'
      ,preventRender: true
 }

{
      xtype: 'tariffs-panel-calendar'
      ,preventRender: true
 }

{
      xtype: 'tariffs-panel-calendar'
      ,preventRender: true
      ,job: 123
}