/**
 * Project   : AMDA-NG
 * Name      : MyDataUI.js
 * @class    : amdaUI.MyDataUI
 * @extends  Ext.container.Container 
 * @brief    MyData Module UI definition (View)
 * @author Elena 
 * @version  $Id: MyDataUI.js 2895 2015-05-05 14:38:28Z elena $	          
 */
 
 
Ext.define('amdaUI.MyDataUI', {
        extend: 'Ext.container.Container',
        alias: 'widget.panelMyData',
        
        requires: [
                   'amdaUI.TableDefPlugUI'
        ],

        object : null,	
        fileObject : null,
        
        module : null,
        
        fields : [],
        columns : [],
        
        constructor: function(config) {	
                this.module = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.my_data.id);	   
                this.init(config);
                this.callParent(arguments);
                this.setObject(this.module.linkedNode.get('object')); 
        },
 
        /*
        * linked node should be MyDataParamNode
        */	 	
        resetLinkedNode: function() 
        {
            this.linkedNode = null;	    		      
            this.module.createLinkedNode();
            this.module.createObject();
            this.module.linkedNode.set('fileObject',this.fileObject); 
        },
	
        getObjectCallback: function(result,remoteEvent)
        {
            var t = remoteEvent.getTransaction();
            if (result && !result.error) {   	         	      	      	     
                //this.tmpNode.set('contextNode',mask!!! if exists	  
                this.fileObject = Ext.create('amdaModel.FileObject', result);
                var panelConfig = this.initPanel();
            } 
            else {	   
                // EXCEPTION : parameter not found !
                myDesktopApp.errorMsg(t.action + "." + t.method + " : No parameter '"
                    +this.tmpNode.get('text')+"' found!");	     
            }	  
        },
		
        /*
        *  Update info in the form on another parameter selection (cdf, cef formats);
        */
        updateInfo : function(res, e) 
        {	    
            if (res.success){	   
                // info panel	     
                this.items.getAt(1).update(res.info.name+': '+res.info.type+' '+res.info.size+' '+res.info.n_records);	    
                var form = this.items.getAt(0).getForm();
            
                //keep old name and mask if they exist 
                if (this.object.get('format') == 'vot')
                {
                	res.info.ytitle = res.info.name;
                	if ((res.info.id === this.object.get('realvar'))) { 
                		if (this.object.get('realvar') != this.object.get('name')) {
                			res.info.name = this.object.get('name');
                		}
                		if (res.info.mask != this.object.get('mask')) {
                			res.info.mask = this.object.get('mask');
                		}
                	}
                }
                else
                {
                	if ((res.info.name === this.object.get('realvar'))) { 
                		if (this.object.get('realvar') != this.object.get('name')) {
                			res.info.name = this.object.get('name');
                		}
                		if (res.info.mask != this.object.get('mask')) {
                			res.info.mask = this.object.get('mask');
                		}
                	}
                	res.info.ytitle = res.info.name;
                }
 
             form.setValues(res.info);       
            }
            else {
                myDesktopApp.errorMsg("System Error <br/> Error at AMDA Server");
            }
        },
        
        /*
        * Check if changes were made before closing window 
        * @return false
        */	
        fclose : function() {
                return false;
        },
	
        /**
        * set object into form
        */
        setObject : function (object) 
        {
        	// edit in module from  FileUpload Module and ExplorerModule (edit param)
            if (this.module.linkedNode) { 
                if (this.module.linkedNode.get('fileObject')) {		
                    this.fileObject = this.module.linkedNode.get('fileObject');		  		       		    
                } 
            // edit in module from Explorer Module (edit file)
                else if (this.module.linkedNode.get('object')) { 	 
                    this.fileObject = this.module.linkedNode.get('object'); 
                    this.resetLinkedNode();
                }
                else {	      
                    myDesktopApp.errorMsg("System Error <br/> No FileObject and Object");
                }	      
            }	    
            else {  
                myDesktopApp.errorMsg("System Error <br/> No Linked Node"); 
            }
            
            var form = this.down('form');
            form.getForm().reset();
            // remove and DESTROY right panel if it exists
            if (form.items.length == 2) 
                    form.remove(form.items.getAt(1),true);
            // create right panel depending on file	  
            var rightPanel = this.initPanel();
            form.add(rightPanel);
            this.object = this.module.linkedNode.get('object'); 

            // load object into form
            if (object.$className == 'amdaModel.FileObject' || !this.object.get('name'))
                    form.getForm().loadRecord(this.fileObject);
            else
                    form.getForm().loadRecord(this.object);

            // if it is not newly created empty myParamData node	  
            if (this.object.get('name')) {
                // file panel work around	   
                if (this.fileObject.get('format') == 'txt') {    		 
                    form.getForm().findField('start').setValue(this.object.get('realvar'));		 
                }
                else if (this.object.get('format') == 'vot')
                {
                    var radio = this.down('radiogroup');
                    radio.setValue({'votvar' : this.object.get('realvar')});
                }
                else { // cdf, cef, nc
                // select parameter
                    var radio = this.down('radiogroup'); 		
                    radio.setValue({'cdfvar' : this.object.get('realvar')});                  
                }
            }
            
            //Set table definition
            if (object.get('tableDef'))
            	this.getPlugin('tabledef').setTableDefinition(object.get('tableDef'));
        },

/*
 *  highlight selected columns in case of param (ASCII) edit
 */
        updateSelection: function()
        {                    
            var start = parseInt(this.object.get('realvar'));
            var size =  parseInt(this.object.get('size'));
            
            if (start && size) {
                var columns = this.down('gridpanel').columns;
                for (var i = start; i < start+size; i++) {	   
                    var selected = Ext.select(columns[i].getCellSelector(i));
                    selected.addCls('meow');
                    columns[i].selected = true;
                }
            }
        },
	
        /*
        * update this.object from form
        */
        updateObject : function(nameField)
        {    
            // get the basic form
            var basicForm =  this.down('form').getForm();	  
            var updateStatus = true;
            var fieldsWithoutName = basicForm.getFields().items;
            
            Ext.Array.each(fieldsWithoutName, function(item, index,allItems){
                if(item !== nameField) { 		     
                    if (!item.isValid()) {
                        // set update isn't allowed
                        updateStatus = false;    
                    }
                }
            }, this);
            
            // if the update is allowed
            if (updateStatus) {
                // real object update
                // updateobject with the content of form
                var values = basicForm.getValues(); 
                basicForm.updateRecord(this.object);
                this.object.set('file',this.fileObject.get('fileName')); 
                this.object.set('format', this.fileObject.get('format'));
                if (this.object.get('format') == 'cdf' || this.object.get('format') == 'cef' || this.object.get('format') == 'nc') this.object.set('realvar',values.cdfvar);
                if (this.object.get('format') == 'vot') this.object.set('realvar',values.votvar);
                if (this.object.get('format') == 'txt') this.object.set('realvar',values.start);
                this.object.set('tableDef', this.getPlugin('tabledef').getTableDefinitionObject());
            }
            // return the update status
            return updateStatus;	    
        },
	        
        /**
         * Check mask - length, existed....
         * @return true/false
         */     
         validateMask : function(value)
         {
            // length
            if (value.length < 6) return 'mask length is too small (< 6)';
 
            // first *
            if (value.indexOf('*') === 0)  return '"*" could not be the first letter in mask';
           
            // several *
            if (value.indexOf('*') !== value.lastIndexOf('*')) return 'several "*" are not allowed in mask';
           
            // less common            
            var paramModule = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.my_data.id); 
            var oldmask = paramModule.linkedNode.get('object').get('mask');
            // no old mask
            if (oldmask.length === 0) return true;
            if (value.length > oldmask.length) return 'new mask is less common than old one';
           
           return true;
        },

        /*
         * 
         */        
        saveProcess : function(toRename)
        {          
            var values = this.down('form').getForm().getValues();              	 
            // Parameter Module
            var paramModule = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.my_data.id);   
             
            // if the name has been modified this is a creation
            if (this.object.isModified('name')){                
                    var contextNode = paramModule.linkedNode.parentNode;        
                    // if object already has an id : it's a 'rename' of an existing  	
                    if (this.object.get('id')){
                        // get file object of the first node linked this file
                        var fileObject = paramModule.linkedNode.get('fileObject');
                        
                        paramModule.createLinkedNode();                         
                        // create a new object linked	                      
                        var paramobj = Ext.create(paramModule.linkedNode.get('objectDataModel'), values);
                            
                        paramobj.set('format', this.fileObject.get('format'));                   
                        if (paramobj.get('format') == 'cdf' || paramobj.get('format') == 'cef' ||
                            paramobj.get('format') == 'nc')
                                                    paramobj.set('realvar',values.cdfvar);
                        if (paramobj.get('format') == 'vot') 
                                                    paramobj.set('realvar',values.votvar);
                        if (paramobj.get('format') == 'txt') 
                                                    paramobj.set('realvar',values.start);
 
                        paramobj.set('file', this.fileObject.get('fileName'));
                        
                        paramobj.set('tableDef', this.getPlugin('tabledef').getTableDefinitionObject());
            
                        paramModule.linkedNode.set('object',paramobj);
                        //synchronize objects
                        this.object = paramobj; 
                        
                        paramModule.linkedNode.set('fileObject',fileObject);
                        
                        if (toRename) 
                                    paramModule.linkedNode.toRename = true;
                    }
                    paramModule.linkedNode.set('contextNode',contextNode);                 
                    paramModule.linkedNode.create();
                
                    paramModule.linkedNode.set('isParameter', true);
                    
                    if (values.size == 1) {
                                paramModule.linkedNode.set('iconCls', 'icon-scalar');  
                                paramModule.linkedNode.set('isSpectra', false);
                    }
                    else {
                        if (values.plottype == 'Spectra') {
                                paramModule.linkedNode.set('isSpectra', true);
                                paramModule.linkedNode.set('iconCls', 'icon-spectra'); 
                        }
                        else {
                                paramModule.linkedNode.set('iconCls', 'icon-unknowntype'); 
                                paramModule.linkedNode.set('isSpectra', false);
                            }
                    }                                        
           
                } else {  		  
                    paramModule.linkedNode.set('contextNode',paramModule.contextNode); 
                    paramModule.linkedNode.update();		  
                }                  
            }, 
            
            /* 
            *       overwrite method called by Save button
            */
            overwriteProcess : function(btn){
                if (btn == 'cancel') return;
                var basicForm = this.down('form').getForm();
                basicForm.clearInvalid();
                this.saveProcess(true);        
            },
	
            updateForm : function() {
                var basicForm = this.down('form').getForm();
                var columns = this.down('gridpanel').columns;
                
                var start;
                var size = 0;
                Ext.Array.each(columns, function(column,index){
                    if (!start && column.selected) start = index;
                    if (column.selected) size += 1;
                });
                
                basicForm.setValues({start: start, size : size});
            },
    
        /*
        *         Configurations 
        * 
        */     
        initPanel : function() 
        {
            var format = this.fileObject.get('format');	  
            if (format == 'cdf' || format == 'cef' || format == 'nc') return this.cdfPanel(format);
            if (format == 'txt')  return this.txtPanel();
            if (format == 'vot') return this.votPanel();
        },
		
        txtPanel: function() 
        {	  
            var fileName = this.fileObject.get('fileName');
            
            //FOR INFO
            // Null out built in convert functions for performance *because the raw data is known to be valid*
            // Specifying defaultValue as undefined will also save code. 
            // As long as there will always be values in the data, or the app tolerates undefined field values*
            
            // Dynamically created fields and columns	    
            var n_col = this.fileObject.get('vars'); 
            // reset	  
            this.fields = [];
            this.columns = [];
	  
            for (var i = 0; i < n_col; i++){    
                var name = i === 0 ? 'Time' : 'n'+i;
                //TODO width dependent on data?	  
                var width = i === 0 ? 120 : 75;
                
                this.fields[i] = { name: name };
                this.columns[i] = { text: name, sortable : false,  dataIndex: name, width : width, 
                                    menuDisabled: true, selected : false,
                                    listeners: {
                                        scope : this,
                                        headerclick: function(ct, column){
                                        if (column.text != 'Time') {
                                            var selected = Ext.select(column.getCellSelector(1));
                                            if (column.selected) {				      
                                                selected.removeCls('meow');
                                                column.selected = false;
                                            }
                                            else {
                                            selected.addCls('meow');
                                            column.selected = true;
                                            }
                                            this.updateForm();
                                        }
                                        }
                                    }
                };  
            }
            
            // Dynamically created model	  
            Ext.define('myData', {
                extend: 'Ext.data.Model',
                fields: this.fields,
                idProperty: 'Time' 
            });
            
            var store = Ext.create('Ext.data.ArrayStore', {
                model: 'myData',
                autoLoad: true,
                proxy: {
                type: 'direct',
                directFn: AmdaAction.getAsciiFile		   
                },
                listeners: {
                    scope: this,
                    beforeload: function(store){
                        store.proxy.extraParams = {
                        fileName: this.fileObject.get('fileName') 
                        };
                    },
                    load: function(store, records, successful, eOpts) {
                        this.updateSelection();
                    }
                }
            });
	  
            // Dynamically created columns dependent of myData model
            var panelConfig = {
                xtype : 'gridpanel',
                store : store,
                title : fileName,
                height: 390,
                flex : 2,
                columnLines: true,
                columns: this.columns,
                listeners: {
                    scope : this,
                    cellclick: function(view,td,cellIndex,record,tr,rowIndex,e){
                        var column = view.getGridColumns()[cellIndex];
                        if (cellIndex > 0) {
                            var selected = Ext.select(column.getCellSelector(cellIndex));
                            if (column.selected) {
                                selected.removeCls('meow');
                                column.selected = false;			  
                            }
                            else {
                                selected.addCls('meow');
                                column.selected = true;
                            }
                            this.updateForm();
                        }
                    },
                    select: function(selmodel, record, index, e) {
                        selmodel.deselectAll();
                    }	
                }
            };
            
            return panelConfig;
        },
	
        cdfPanel : function(format) {
            
            var vars = this.fileObject.get('vars');
            var fileName = this.fileObject.get('fileName'); 
            var items = [];	   
            Ext.Array.each(vars, function(name, index) {
                if (name) {
                    items[index] = { boxLabel: name, name: 'cdfvar',  inputValue: name,
                                    listeners: {
                                        scope: this,
                                        change: function (cb, nv, ov) {					     
                                            if (nv) {                                             
                                                AmdaAction.getParamInfo({format: format, file : fileName, varName : cb.inputValue},						
                                                this.updateInfo, this);                                          
                                            }					   							 						  
                                        }
                                    }
                    }
                }
            }, this);
	 	
            var panelConfig = {
                xtype : 'fieldset', 
                bodyStyle: { background : '#dfe8f6'},
                flex : 2, 
                title: fileName,
                items : [{
                    xtype: 'radiogroup', 
                    cls: 'x-check-group-alt',
                    columns: 2,
                    vertical: true,	 
                    bodyStyle: { background : '#dfe8f6'},
                    flex : 2,
                    items: items
                }]
            };
	    
            return panelConfig;
        },
	
        votPanel : function() 
        {                    
                var vars = this.fileObject.get('vars');
                var fileName = this.fileObject.get('fileName');
                
                var items = [];	  
                
                if (this.fileObject.get('foundTime'))
                {
                        Ext.Array.each(vars, function(obj, index) {
                                items[index] = { boxLabel: obj.name, name: 'votvar',  inputValue: obj.id,
                                                listeners: {
                                        scope: this,
                                        change: function (cb, nv, ov) {					     
                                                if (nv) {						
                                                AmdaAction.getParamInfo({format: 'vot', file : fileName, varName : cb.inputValue},						
                                                    this.updateInfo, this); 
                                            }					   							 						  
                                        }
                                    }
                        };
                    }, this);
                }
                else
                        myDesktopApp.errorMsg("Cannot find a valid time field!");	       
                    
                var panelConfig = {
                    xtype : 'fieldset', 
                    bodyStyle: { background : '#dfe8f6'},
                    flex : 2, 
                    title: fileName,
                    items : [{
                        xtype: 'radiogroup', 
                        cls: 'x-check-group-alt',
                        columns: 2,
                        vertical: true,	 
                        bodyStyle: { background : '#dfe8f6'},
                        flex : 2,
                        items: items
                    }]
                };
                
                return panelConfig;
            },
	
        init : function(config) {	 
            
            var store = Ext.create('Ext.data.Store', {
                fields: ['value', 'name'],
                data : [
                    {"value": "FLOAT", "name":"FLOAT"},
                    {"value": "INTEGER", "name":"INTEGER"},
                    {"value": "DOUBLE", "name":"DOUBLE"},
                    {"value": "SHORT", "name":"SHORT"}
                ]
            }); 
                    
            var combo =   { 
                xtype: 'combo',
                fieldLabel: 'Parameter Data Type',
                store: store,
                queryMode: 'local',
                displayField: 'name',
                valueField: 'value',
                name: 'type',		
                editable: false,
                value: 'FLOAT'
            };
            
	    var store1 = Ext.create('Ext.data.Store', {
                fields: ['value', 'name'],
                data : [
                    {"value": "TimeSerie", "name":"Time Serie"},                   
                    {"value": "Spectra", "name":"Spectra"}
                ]
            }); 
                    
            var comboPlotType =   { 
                xtype: 'combo',
                fieldLabel: 'Display Type',
                store: store1,
                queryMode: 'local',
                displayField: 'name',
                valueField: 'value',
                name: 'plottype',           
                editable: false,
                value: 'Time Series'
            };
            
            var notTxt = false; //this.fileObject.get('format') !== 'txt';
            //  var maxSize = notTxt? 100 : this.columns.length - 1;
	  
        // Parameter Form	  
            var panelLeft =  {
                bodyStyle: { background : '#dfe8f6'},	      
                flex : 1,	 
                defaults: {
                    xtype:'textfield',
                    validateOnChange: false,
                    validateOnBlur: false,
                    padding : '0 10 0 5',
                    inputWidth : 80
                },
                items: [
                {
                    id: 'mydataName',
                    fieldLabel: 'Parameter Name',
                    labelAlign: 'top',
                    name: 'name',
                    allowBlank : false,
                    stripCharsRe: /(^\s+|\s+$)/g,
                    validFlag: false,
    	            validator : function() {
    	            	return this.validFlag;
    	            },
                    inputWidth : 180
                }, {
                    fieldLabel: 'File Name/Mask&nbsp;<img amda_clicktip="fileMask" style="vertical-align:bottom" src="js/resources/images/16x16/info_mini.png"', 
                    labelAlign: 'top',             
                    name: 'mask',
                    inputWidth : 180,
                    validator : this.validateMask
                }, combo, {
                    xtype:'numberfield',
                    fieldLabel: 'Parameter Start Position',              
                    name: 'start',
                    disabled: notTxt,
                    minValue : 1,
        //	  maxValue : maxSize,
                    listeners : {
                        scope : this,
                        change : function(field, newValue, oldValue){
                            var grid = this.down('gridpanel');
                            if (!grid) return;
                            if (newValue && newValue != oldValue) {
                            var size = field.prev().value;
                            var columns = grid.columns;
                            Ext.Array.each(columns, function(column,index){
                                var selected = Ext.select(column.getCellSelector(index));
                                if (index < newValue){
                                if (column.selected) {
                                    selected.removeCls('meow');
                                    column.selected = false;				 
                                }
                            }
                            else if (index == newValue) {
                                if (!column.selected) {
                                    selected.addCls('meow');
                                    column.selected = true;				 
                                }
                            }
                            else {
                                if (column.selected) {
                                    selected.removeCls('meow');
                                    column.selected = false;				 
                                } 
                            }
                            });
                            }
                        }
                    }
                }, { 
                    xtype:'numberfield',
                    fieldLabel: 'Parameter Size',              
                    name: 'size',
                    minValue: 1,
        //	  maxValue : maxSize,
                    disabled: notTxt,
                    listeners : {
                        scope : this,
                        change : function(field, newValue, oldValue){
                            var grid =  this.down('gridpanel');
                            if (!grid) return;
                            var start =  field.prev().value;
                            var columns = grid.columns;
                            Ext.Array.each(columns, function(column,index){
                                var selected = Ext.select(column.getCellSelector(index));
                                if (index <= start) {}
                                else if (index - start < newValue) {
                                if (!column.selected){
                                    selected.addCls('meow');
                                    column.selected = true;	
                                }
                                }
                                else {
                                    if (column.selected){
                                    selected.removeCls('meow');
                                    column.selected = false;	
                                }
                                }
                            });
                        }
                    }
                }, {
                    xtype:'numberfield',
                    fieldLabel: 'Min Sampling',              
                    name: 'minsampling'//,
                //  disabled: notTxt
                },{
                    xtype:'numberfield',
                    fieldLabel: 'Max Sampling',              
                    name: 'maxsampling'//,
                    // disabled: notTxt
                },{
                    fieldLabel: 'Filling Value',              
                    name: 'fillvalue'
                },{
                    fieldLabel: 'Units',              
                    name: 'units'
                },  comboPlotType, {
                    fieldLabel: 'Y Title',              
                    name: 'ytitle'
                },{
                    fieldLabel: 'Legend',              
                    name: 'legend'
                }                  
                ],
                listeners: {
                            click: {
                                element: 'el',
                                fn: function(e,t) {	 		 
                                    var me = t,
                                        text = me.getAttribute('amda_clicktip');
                                        if (text) {
                                                e.preventDefault();
                                                AmdaAction.getInfo({name : text}, function(res,e) {					    					   
                                                            if (res.success) myDesktopApp.infoMsg(res.result);
                                                }); 
                                        }
                                    }
                            }			
                        }
            };
	    
            var myConf = {
                layout: 'border',		 
                items: [ {		   
                        xtype : 'form',
                        bodyStyle: { background : '#dfe8f6'},
                        layout: { type: 'hbox'},   
                        region: 'center',
                        buttonAlign:'left',
                        items : [
                            panelLeft 
                        ],					
                        buttons: [
                        {
                        	scope : this,								 							  
                            text: 'Show/Hide Table definition',								   
                            handler: function() 
                            {
                            	this.getPlugin('tabledef').showHide();
                            }
                        },
                        '->',
                        {  
                            scope : this,								 							  
                            text: 'Save',								   
                            handler: function() 
                            {			     
                                var form = this.down('form').getForm();			     
                                // check if variable was selected
                                // cdf,...
                                var radio = this.down('radiogroup');            
                                if (radio && radio.getChecked().length == 0) {
                                    myDesktopApp.warningMsg('Select variable from the file, please');
                                    return;
                                }
                                // ascii
                                if (!radio && this.columns.length > 0) {                                  
                                    if (!form.findField('start').getValue() || !form.findField('size').getValue()) {                                    
                                    myDesktopApp.warningMsg('Select column[s] from the file, please');
                                    return;
                                    }                                  
                                }
                                var nameField = form.findField('mydataName'); 
                                if (this.updateObject(nameField))
                                {
                                	var myDataModule = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.my_data.id);	
      							  	if (!myDataModule)
      								  return;
                                	var me = this;
                                	myDataModule.linkedNode.isValidName(nameField.getValue(), function (res) {
                                		if (!res)
      								  	{
                                			nameField.validFlag = 'Error during object validation';
      									  	myDesktopApp.errorMsg(nameField.validFlag);
      									  	nameField.validate();
      									  	return;
      								  	}
      								  
      								  	if (!res.valid)
      								  	{
      								  		if (res.error)
      								  		{
      								  			if (res.error.search('subtree') != -1) {  							
      								  				Ext.MessageBox.show({title:'Warning', 
      								  					msg: res.error+'<br/>Do you want to overwrite it?',
      													width: 300,
      													buttons: Ext.MessageBox.OKCANCEL, 
      													fn : me.overwriteProcess,
      													icon: Ext.MessageBox.WARNING,
      													scope : me
      								  				});
      								  				nameField.validFlag = true;
      								  			}
      								  			else
      								  				nameField.validFlag = res.error;
      								  		}
      								  		else
      								  		{
      								  			nameField.validFlag = 'Invalid object name';
      								  			myDesktopApp.errorMsg(nameField.validFlag);
      								  		}
      								  		nameField.validate();
      								  		return;
      								  	}
      								  
      								  	nameField.validFlag = true;
      								  	nameField.validate();
      								  	me.saveProcess();
                                	});
                                }
                            }
                        },{
                            scope : this,
                            text: 'Reset',
                            handler: function(){				      
                                this.down('form').getForm().reset();
                            }
                        }]
                    },{
                        xtype: 'panel', 
                        region: 'south',
                        title: 'Information',
                        collapsible: true,
                        height: 100,
                        autoHide: false,
                        iconCls: 'icon-information',
                        bodyStyle: 'padding:5px',
                        loader: {
                            autoLoad: true,
                            url: helpDir+'myDataHOWTO'
                        }  
                    }
                ],
                plugins: [ {ptype: 'tabledef', pluginId: 'tabledef'} ]
            };
        
            Ext.apply (this, Ext.apply(arguments, myConf));
        },
        
        getParameterSize : function()
        {
        	var form = this.down('form').getForm();
        	return form.findField('size').getValue();
        }
});