git.roojs.org Git - roojs1/blob - Roo/form/BasicForm.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11
  12 /**
  13  * @class Roo.form.BasicForm
  14  * @extends Roo.util.Observable
  15  * Supplies the functionality to do "actions" on forms and initialize Roo.form.Field types on existing markup.
  16  * @constructor
  17  * @param {String/HTMLElement/Roo.Element} el The form element or its id
  18  * @param {Object} config Configuration options
  19  */
  20 Roo.form.BasicForm = function(el, config){
  21     this.allItems = [];
  22     this.childForms = [];
  23     Roo.apply(this, config);
  24     /*
  25      * The Roo.form.Field items in this form.
  26      * @type MixedCollection
  27      */
  28
  29
  30     this.items = new Roo.util.MixedCollection(false, function(o){
  31         return o.id || (o.id = Roo.id());
  32     });
  33     this.addEvents({
  34         /**
  35          * @event beforeaction
  36          * Fires before any action is performed. Return false to cancel the action.
  37          * @param {Form} this
  38          * @param {Action} action The action to be performed
  39          */
  40         beforeaction: true,
  41         /**
  42          * @event actionfailed
  43          * Fires when an action fails.
  44          * @param {Form} this
  45          * @param {Action} action The action that failed
  46          */
  47         actionfailed : true,
  48         /**
  49          * @event actioncomplete
  50          * Fires when an action is completed.
  51          * @param {Form} this
  52          * @param {Action} action The action that completed
  53          */
  54         actioncomplete : true
  55     });
  56     if(el){
  57         this.initEl(el);
  58     }
  59     Roo.form.BasicForm.superclass.constructor.call(this);
  60
  61     Roo.form.BasicForm.popover.apply();
  62 };
  63
  64 Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
  65     /**
  66      * @cfg {String} method
  67      * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
  68      */
  69     /**
  70      * @cfg {DataReader} reader
  71      * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when executing "load" actions.
  72      * This is optional as there is built-in support for processing JSON.
  73      */
  74     /**
  75      * @cfg {DataReader} errorReader
  76      * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when reading validation errors on "submit" actions.
  77      * This is completely optional as there is built-in support for processing JSON.
  78      */
  79     /**
  80      * @cfg {String} url
  81      * The URL to use for form actions if one isn't supplied in the action options.
  82      */
  83     /**
  84      * @cfg {Boolean} fileUpload
  85      * Set to true if this form is a file upload.
  86      */
  87
  88     /**
  89      * @cfg {Object} baseParams
  90      * Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
  91      */
  92      /**
  93
  94     /**
  95      * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
  96      */
  97     timeout: 30,
  98
  99     // private
 100     activeAction : null,
 101
 102     /**
 103      * @cfg {Boolean} trackResetOnLoad If set to true, form.reset() resets to the last loaded
 104      * or setValues() data instead of when the form was first created.
 105      */
 106     trackResetOnLoad : false,
 107
 108
 109     /**
 110      * childForms - used for multi-tab forms
 111      * @type {Array}
 112      */
 113     childForms : false,
 114
 115     /**
 116      * allItems - full list of fields.
 117      * @type {Array}
 118      */
 119     allItems : false,
 120
 121     /**
 122      * By default wait messages are displayed with Roo.MessageBox.wait. You can target a specific
 123      * element by passing it or its id or mask the form itself by passing in true.
 124      * @type Mixed
 125      */
 126     waitMsgTarget : false,
 127
 128     /**
 129      * @type Boolean
 130      */
 131     disableMask : false,
 132
 133     /**
 134      * @cfg {Boolean} errorMask (true|false) default false
 135      */
 136     errorMask : false,
 137
 138     /**
 139      * @cfg {Number} maskOffset Default 100
 140      */
 141     maskOffset : 100,
 142
 143     // private
 144     initEl : function(el){
 145         this.el = Roo.get(el);
 146         this.id = this.el.id || Roo.id();
 147         this.el.on('submit', this.onSubmit, this);
 148         this.el.addClass('x-form');
 149     },
 150
 151     // private
 152     onSubmit : function(e){
 153         e.stopEvent();
 154     },
 155
 156     /**
 157      * Returns true if client-side validation on the form is successful.
 158      * @return Boolean
 159      */
 160     isValid : function(){
 161         var valid = true;
 162         var target = false;
 163         this.items.each(function(f){
 164             if(f.validate()){
 165                 return;
 166             }
 167
 168             valid = false;
 169
 170             if(!target && f.el.isVisible(true)){
 171                 target = f;
 172             }
 173         });
 174
 175         if(this.errorMask && !valid){
 176             Roo.form.BasicForm.popover.mask(this, target);
 177         }
 178
 179         return valid;
 180     },
 181     /**
 182      * Returns array of invalid form fields.
 183      * @return Array
 184      */
 185
 186     invalidFields : function()
 187     {
 188         var ret = [];
 189         this.items.each(function(f){
 190             if(f.validate()){
 191                 return;
 192             }
 193             ret.push(f);
 194
 195         });
 196
 197         return ret;
 198     },
 199
 200
 201     /**
 202      * DEPRICATED Returns true if any fields in this form have changed since their original load.
 203      * @return Boolean
 204      */
 205     isDirty : function(){
 206         var dirty = false;
 207         this.items.each(function(f){
 208            if(f.isDirty()){
 209                dirty = true;
 210                return false;
 211            }
 212         });
 213         return dirty;
 214     },
 215
 216     /**
 217      * Returns true if any fields in this form have changed since their original load. (New version)
 218      * @return Boolean
 219      */
 220
 221     hasChanged : function()
 222     {
 223         var dirty = false;
 224         this.items.each(function(f){
 225            if(f.hasChanged()){
 226                dirty = true;
 227                return false;
 228            }
 229         });
 230         return dirty;
 231
 232     },
 233     /**
 234      * Resets all hasChanged to 'false' -
 235      * The old 'isDirty' used 'original value..' however this breaks reset() and a few other things.
 236      * So hasChanged storage is only to be used for this purpose
 237      * @return Boolean
 238      */
 239     resetHasChanged : function()
 240     {
 241         this.items.each(function(f){
 242            f.resetHasChanged();
 243         });
 244
 245     },
 246
 247
 248     /**
 249      * Performs a predefined action (submit or load) or custom actions you define on this form.
 250      * @param {String} actionName The name of the action type
 251      * @param {Object} options (optional) The options to pass to the action.  All of the config options listed
 252      * below are supported by both the submit and load actions unless otherwise noted (custom actions could also
 253      * accept other config options):
 254      * <pre>
 255 Property          Type             Description
 256 ----------------  ---------------  ----------------------------------------------------------------------------------
 257 url               String           The url for the action (defaults to the form's url)
 258 method            String           The form method to use (defaults to the form's method, or POST if not defined)
 259 params            String/Object    The params to pass (defaults to the form's baseParams, or none if not defined)
 260 clientValidation  Boolean          Applies to submit only.  Pass true to call form.isValid() prior to posting to
 261                                    validate the form on the client (defaults to false)
 262      * </pre>
 263      * @return {BasicForm} this
 264      */
 265     doAction : function(action, options){
 266         if(typeof action == 'string'){
 267             action = new Roo.form.Action.ACTION_TYPES[action](this, options);
 268         }
 269         if(this.fireEvent('beforeaction', this, action) !== false){
 270             this.beforeAction(action);
 271             action.run.defer(100, action);
 272         }
 273         return this;
 274     },
 275
 276     /**
 277      * Shortcut to do a submit action.
 278      * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
 279      * @return {BasicForm} this
 280      */
 281     submit : function(options){
 282         this.doAction('submit', options);
 283         return this;
 284     },
 285
 286     /**
 287      * Shortcut to do a load action.
 288      * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
 289      * @return {BasicForm} this
 290      */
 291     load : function(options){
 292         this.doAction('load', options);
 293         return this;
 294     },
 295
 296     /**
 297      * Persists the values in this form into the passed Roo.data.Record object in a beginEdit/endEdit block.
 298      * @param {Record} record The record to edit
 299      * @return {BasicForm} this
 300      */
 301     updateRecord : function(record){
 302         record.beginEdit();
 303         var fs = record.fields;
 304         fs.each(function(f){
 305             var field = this.findField(f.name);
 306             if(field){
 307                 record.set(f.name, field.getValue());
 308             }
 309         }, this);
 310         record.endEdit();
 311         return this;
 312     },
 313
 314     /**
 315      * Loads an Roo.data.Record into this form.
 316      * @param {Record} record The record to load
 317      * @return {BasicForm} this
 318      */
 319     loadRecord : function(record){
 320         this.setValues(record.data);
 321         return this;
 322     },
 323
 324     // private
 325     beforeAction : function(action){
 326         var o = action.options;
 327
 328         if(!this.disableMask) {
 329             if(this.waitMsgTarget === true){
 330                 this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
 331             }else if(this.waitMsgTarget){
 332                 this.waitMsgTarget = Roo.get(this.waitMsgTarget);
 333                 this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
 334             }else {
 335                 Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...');
 336             }
 337         }
 338
 339
 340     },
 341
 342     // private
 343     afterAction : function(action, success){
 344         this.activeAction = null;
 345         var o = action.options;
 346
 347         if(!this.disableMask) {
 348             if(this.waitMsgTarget === true){
 349                 this.el.unmask();
 350             }else if(this.waitMsgTarget){
 351                 this.waitMsgTarget.unmask();
 352             }else{
 353                 Roo.MessageBox.updateProgress(1);
 354                 Roo.MessageBox.hide();
 355             }
 356         }
 357
 358         if(success){
 359             if(o.reset){
 360                 this.reset();
 361             }
 362             Roo.callback(o.success, o.scope, [this, action]);
 363             this.fireEvent('actioncomplete', this, action);
 364
 365         }else{
 366
 367             // failure condition..
 368             // we have a scenario where updates need confirming.
 369             // eg. if a locking scenario exists..
 370             // we look for { errors : { needs_confirm : true }} in the response.
 371             if (
 372                 (typeof(action.result) != 'undefined')  &&
 373                 (typeof(action.result.errors) != 'undefined')  &&
 374                 (typeof(action.result.errors.needs_confirm) != 'undefined')
 375            ){
 376                 var _t = this;
 377                 Roo.MessageBox.confirm(
 378                     "Change requires confirmation",
 379                     action.result.errorMsg,
 380                     function(r) {
 381                         if (r != 'yes') {
 382                             return;
 383                         }
 384                         _t.doAction('submit', { params :  { _submit_confirmed : 1 } }  );
 385                     }
 386
 387                 );
 388
 389
 390
 391                 return;
 392             }
 393
 394             Roo.callback(o.failure, o.scope, [this, action]);
 395             // show an error message if no failed handler is set..
 396             if (!this.hasListener('actionfailed')) {
 397                 Roo.MessageBox.alert("Error",
 398                     (typeof(action.result) != 'undefined' && typeof(action.result.errorMsg) != 'undefined') ?
 399                         action.result.errorMsg :
 400                         "Saving Failed, please check your entries or try again"
 401                 );
 402             }
 403
 404             this.fireEvent('actionfailed', this, action);
 405         }
 406
 407     },
 408
 409     /**
 410      * Find a Roo.form.Field in this form by id, dataIndex, name or hiddenName
 411      * @param {String} id The value to search for
 412      * @return Field
 413      */
 414     findField : function(id){
 415         var field = this.items.get(id);
 416         if(!field){
 417             this.items.each(function(f){
 418                 if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
 419                     field = f;
 420                     return false;
 421                 }
 422             });
 423         }
 424         return field || null;
 425     },
 426
 427     /**
 428      * Add a secondary form to this one,
 429      * Used to provide tabbed forms. One form is primary, with hidden values
 430      * which mirror the elements from the other forms.
 431      *
 432      * @param {Roo.form.Form} form to add.
 433      *
 434      */
 435     addForm : function(form)
 436     {
 437
 438         if (this.childForms.indexOf(form) > -1) {
 439             // already added..
 440             return;
 441         }
 442         this.childForms.push(form);
 443         var n = '';
 444         Roo.each(form.allItems, function (fe) {
 445
 446             n = typeof(fe.getName) == 'undefined' ? fe.name : fe.getName();
 447             if (this.findField(n)) { // already added..
 448                 return;
 449             }
 450             var add = new Roo.form.Hidden({
 451                 name : n
 452             });
 453             add.render(this.el);
 454
 455             this.add( add );
 456         }, this);
 457
 458     },
 459     /**
 460      * Mark fields in this form invalid in bulk.
 461      * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
 462      * @return {BasicForm} this
 463      */
 464     markInvalid : function(errors){
 465         if(errors instanceof Array){
 466             for(var i = 0, len = errors.length; i < len; i++){
 467                 var fieldError = errors[i];
 468                 var f = this.findField(fieldError.id);
 469                 if(f){
 470                     f.markInvalid(fieldError.msg);
 471                 }
 472             }
 473         }else{
 474             var field, id;
 475             for(id in errors){
 476                 if(typeof errors[id] != 'function' && (field = this.findField(id))){
 477                     field.markInvalid(errors[id]);
 478                 }
 479             }
 480         }
 481         Roo.each(this.childForms || [], function (f) {
 482             f.markInvalid(errors);
 483         });
 484
 485         return this;
 486     },
 487
 488     /**
 489      * Set values for fields in this form in bulk.
 490      * @param {Array/Object} values Either an array in the form [{id:'fieldId', value:'foo'},...] or an object hash of {id: value, id2: value2}
 491      * @return {BasicForm} this
 492      */
 493     setValues : function(values){
 494         if(values instanceof Array){ // array of objects
 495             for(var i = 0, len = values.length; i < len; i++){
 496                 var v = values[i];
 497                 var f = this.findField(v.id);
 498                 if(f){
 499                     f.setValue(v.value);
 500                     if(this.trackResetOnLoad){
 501                         f.originalValue = f.getValue();
 502                     }
 503                 }
 504             }
 505         }else{ // object hash
 506             var field, id;
 507             for(id in values){
 508                 if(typeof values[id] != 'function' && (field = this.findField(id))){
 509
 510                     if (field.setFromData &&
 511                         field.valueField &&
 512                         field.displayField &&
 513                         // combos' with local stores can
 514                         // be queried via setValue()
 515                         // to set their value..
 516                         (field.store && !field.store.isLocal)
 517                         ) {
 518                         // it's a combo
 519                         var sd = { };
 520                         sd[field.valueField] = typeof(values[field.hiddenName]) == 'undefined' ? '' : values[field.hiddenName];
 521                         sd[field.displayField] = typeof(values[field.name]) == 'undefined' ? '' : values[field.name];
 522                         field.setFromData(sd);
 523
 524                     } else {
 525                         field.setValue(values[id]);
 526                     }
 527
 528
 529                     if(this.trackResetOnLoad){
 530                         field.originalValue = field.getValue();
 531                     }
 532                 }
 533             }
 534         }
 535         this.resetHasChanged();
 536
 537
 538         Roo.each(this.childForms || [], function (f) {
 539             f.setValues(values);
 540             f.resetHasChanged();
 541         });
 542
 543         return this;
 544     },
 545
 546     /**
 547      * Returns the fields in this form as an object with key/value pairs. If multiple fields exist with the same name
 548      * they are returned as an array.
 549      * @param {Boolean} asString
 550      * @return {Object}
 551      */
 552     getValues : function(asString){
 553         if (this.childForms) {
 554             // copy values from the child forms
 555             Roo.each(this.childForms, function (f) {
 556                 this.setValues(f.getValues());
 557             }, this);
 558         }
 559
 560         // use formdata
 561         if (typeof(FormData) != 'undefined' && asString !== true) {
 562             // this relies on a 'recent' version of chrome apparently...
 563             try {
 564                 var fd = (new FormData(this.el.dom)).entries();
 565                 var ret = {};
 566                 var ent = fd.next();
 567                 while (!ent.done) {
 568                     ret[ent.value[0]] = ent.value[1]; // not sure how this will handle duplicates..
 569                     ent = fd.next();
 570                 };
 571                 return ret;
 572             } catch(e) {
 573
 574             }
 575
 576         }
 577
 578
 579         var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
 580         if(asString === true){
 581             return fs;
 582         }
 583         return Roo.urlDecode(fs);
 584     },
 585
 586     /**
 587      * Returns the fields in this form as an object with key/value pairs.
 588      * This differs from getValues as it calls getValue on each child item, rather than using dom data.
 589      * @return {Object}
 590      */
 591     getFieldValues : function(with_hidden)
 592     {
 593         if (this.childForms) {
 594             // copy values from the child forms
 595             // should this call getFieldValues - probably not as we do not currently copy
 596             // hidden fields when we generate..
 597             Roo.each(this.childForms, function (f) {
 598                 this.setValues(f.getValues());
 599             }, this);
 600         }
 601
 602         var ret = {};
 603         this.items.each(function(f){
 604             if (!f.getName()) {
 605                 return;
 606             }
 607             var v = f.getValue();
 608             if (f.inputType =='radio') {
 609                 if (typeof(ret[f.getName()]) == 'undefined') {
 610                     ret[f.getName()] = ''; // empty..
 611                 }
 612
 613                 if (!f.el.dom.checked) {
 614                     return;
 615
 616                 }
 617                 v = f.el.dom.value;
 618
 619             }
 620
 621             // not sure if this supported any more..
 622             if ((typeof(v) == 'object') && f.getRawValue) {
 623                 v = f.getRawValue() ; // dates..
 624             }
 625             // combo boxes where name != hiddenName...
 626             if (f.name != f.getName()) {
 627                 ret[f.name] = f.getRawValue();
 628             }
 629             ret[f.getName()] = v;
 630         });
 631
 632         return ret;
 633     },
 634
 635     /**
 636      * Clears all invalid messages in this form.
 637      * @return {BasicForm} this
 638      */
 639     clearInvalid : function(){
 640         this.items.each(function(f){
 641            f.clearInvalid();
 642         });
 643
 644         Roo.each(this.childForms || [], function (f) {
 645             f.clearInvalid();
 646         });
 647
 648
 649         return this;
 650     },
 651
 652     /**
 653      * Resets this form.
 654      * @return {BasicForm} this
 655      */
 656     reset : function(){
 657         this.items.each(function(f){
 658             f.reset();
 659         });
 660
 661         Roo.each(this.childForms || [], function (f) {
 662             f.reset();
 663         });
 664         this.resetHasChanged();
 665
 666         return this;
 667     },
 668
 669     /**
 670      * Add Roo.form components to this form.
 671      * @param {Field} field1
 672      * @param {Field} field2 (optional)
 673      * @param {Field} etc (optional)
 674      * @return {BasicForm} this
 675      */
 676     add : function(){
 677         this.items.addAll(Array.prototype.slice.call(arguments, 0));
 678         return this;
 679     },
 680
 681
 682     /**
 683      * Removes a field from the items collection (does NOT remove its markup).
 684      * @param {Field} field
 685      * @return {BasicForm} this
 686      */
 687     remove : function(field){
 688         this.items.remove(field);
 689         return this;
 690     },
 691
 692     /**
 693      * Looks at the fields in this form, checks them for an id attribute,
 694      * and calls applyTo on the existing dom element with that id.
 695      * @return {BasicForm} this
 696      */
 697     render : function(){
 698         this.items.each(function(f){
 699             if(f.isFormField && !f.rendered && document.getElementById(f.id)){ // if the element exists
 700                 f.applyTo(f.id);
 701             }
 702         });
 703         return this;
 704     },
 705
 706     /**
 707      * Calls {@link Ext#apply} for all fields in this form with the passed object.
 708      * @param {Object} values
 709      * @return {BasicForm} this
 710      */
 711     applyToFields : function(o){
 712         this.items.each(function(f){
 713            Roo.apply(f, o);
 714         });
 715         return this;
 716     },
 717
 718     /**
 719      * Calls {@link Ext#applyIf} for all field in this form with the passed object.
 720      * @param {Object} values
 721      * @return {BasicForm} this
 722      */
 723     applyIfToFields : function(o){
 724         this.items.each(function(f){
 725            Roo.applyIf(f, o);
 726         });
 727         return this;
 728     }
 729 });
 730
 731 // back compat
 732 Roo.BasicForm = Roo.form.BasicForm;
 733
 734 Roo.apply(Roo.form.BasicForm, {
 735
 736     popover : {
 737
 738         padding : 5,
 739
 740         isApplied : false,
 741
 742         isMasked : false,
 743
 744         form : false,
 745
 746         target : false,
 747
 748         intervalID : false,
 749
 750         maskEl : false,
 751
 752         apply : function()
 753         {
 754             if(this.isApplied){
 755                 return;
 756             }
 757
 758             this.maskEl = {
 759                 top : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-top-mask" }, true),
 760                 left : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-left-mask" }, true),
 761                 bottom : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-bottom-mask" }, true),
 762                 right : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-right-mask" }, true)
 763             };
 764
 765             this.maskEl.top.enableDisplayMode("block");
 766             this.maskEl.left.enableDisplayMode("block");
 767             this.maskEl.bottom.enableDisplayMode("block");
 768             this.maskEl.right.enableDisplayMode("block");
 769
 770             Roo.get(document.body).on('click', function(){
 771                 this.unmask();
 772             }, this);
 773
 774             Roo.get(document.body).on('touchstart', function(){
 775                 this.unmask();
 776             }, this);
 777
 778             this.isApplied = true
 779         },
 780
 781         mask : function(form, target)
 782         {
 783             this.form = form;
 784
 785             this.target = target;
 786
 787             if(!this.form.errorMask || !target.el){
 788                 return;
 789             }
 790
 791             var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.x-layout-active-content', 100, true) || Roo.get(document.body);
 792
 793             var ot = this.target.el.calcOffsetsTo(scrollable);
 794
 795             var scrollTo = ot[1] - this.form.maskOffset;
 796
 797             scrollTo = Math.min(scrollTo, scrollable.dom.scrollHeight);
 798
 799             scrollable.scrollTo('top', scrollTo);
 800
 801             var el = this.target.wrap || this.target.el;
 802
 803             var box = el.getBox();
 804
 805             this.maskEl.top.setStyle('position', 'absolute');
 806             this.maskEl.top.setStyle('z-index', 10000);
 807             this.maskEl.top.setSize(Roo.lib.Dom.getDocumentWidth(), box.y - this.padding);
 808             this.maskEl.top.setLeft(0);
 809             this.maskEl.top.setTop(0);
 810             this.maskEl.top.show();
 811
 812             this.maskEl.left.setStyle('position', 'absolute');
 813             this.maskEl.left.setStyle('z-index', 10000);
 814             this.maskEl.left.setSize(box.x - this.padding, box.height + this.padding * 2);
 815             this.maskEl.left.setLeft(0);
 816             this.maskEl.left.setTop(box.y - this.padding);
 817             this.maskEl.left.show();
 818
 819             this.maskEl.bottom.setStyle('position', 'absolute');
 820             this.maskEl.bottom.setStyle('z-index', 10000);
 821             this.maskEl.bottom.setSize(Roo.lib.Dom.getDocumentWidth(), Roo.lib.Dom.getDocumentHeight() - box.bottom - this.padding);
 822             this.maskEl.bottom.setLeft(0);
 823             this.maskEl.bottom.setTop(box.bottom + this.padding);
 824             this.maskEl.bottom.show();
 825
 826             this.maskEl.right.setStyle('position', 'absolute');
 827             this.maskEl.right.setStyle('z-index', 10000);
 828             this.maskEl.right.setSize(Roo.lib.Dom.getDocumentWidth() - box.right - this.padding, box.height + this.padding * 2);
 829             this.maskEl.right.setLeft(box.right + this.padding);
 830             this.maskEl.right.setTop(box.y - this.padding);
 831             this.maskEl.right.show();
 832
 833             this.intervalID = window.setInterval(function() {
 834                 Roo.form.BasicForm.popover.unmask();
 835             }, 10000);
 836
 837             window.onwheel = function(){ return false;};
 838
 839             (function(){ this.isMasked = true; }).defer(500, this);
 840
 841         },
 842
 843         unmask : function()
 844         {
 845             if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errorMask){
 846                 return;
 847             }
 848
 849             this.maskEl.top.setStyle('position', 'absolute');
 850             this.maskEl.top.setSize(0, 0).setXY([0, 0]);
 851             this.maskEl.top.hide();
 852
 853             this.maskEl.left.setStyle('position', 'absolute');
 854             this.maskEl.left.setSize(0, 0).setXY([0, 0]);
 855             this.maskEl.left.hide();
 856
 857             this.maskEl.bottom.setStyle('position', 'absolute');
 858             this.maskEl.bottom.setSize(0, 0).setXY([0, 0]);
 859             this.maskEl.bottom.hide();
 860
 861             this.maskEl.right.setStyle('position', 'absolute');
 862             this.maskEl.right.setSize(0, 0).setXY([0, 0]);
 863             this.maskEl.right.hide();
 864
 865             window.onwheel = function(){ return true;};
 866
 867             if(this.intervalID){
 868                 window.clearInterval(this.intervalID);
 869                 this.intervalID = false;
 870             }
 871
 872             this.isMasked = false;
 873
 874         }
 875
 876     }
 877
 878 });