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                 valid = false;
 166
 167                 if(!target && f.el.isVisible(true)){
 168                     target = f;
 169                 }
 170            }
 171         });
 172
 173         if(this.errorMask && !valid){
 174             Roo.form.BasicForm.popover.mask(this, target);
 175         }
 176
 177         return valid;
 178     },
 179
 180     /**
 181      * DEPRICATED Returns true if any fields in this form have changed since their original load.
 182      * @return Boolean
 183      */
 184     isDirty : function(){
 185         var dirty = false;
 186         this.items.each(function(f){
 187            if(f.isDirty()){
 188                dirty = true;
 189                return false;
 190            }
 191         });
 192         return dirty;
 193     },
 194
 195     /**
 196      * Returns true if any fields in this form have changed since their original load. (New version)
 197      * @return Boolean
 198      */
 199
 200     hasChanged : function()
 201     {
 202         var dirty = false;
 203         this.items.each(function(f){
 204            if(f.hasChanged()){
 205                dirty = true;
 206                return false;
 207            }
 208         });
 209         return dirty;
 210
 211     },
 212     /**
 213      * Resets all hasChanged to 'false' -
 214      * The old 'isDirty' used 'original value..' however this breaks reset() and a few other things.
 215      * So hasChanged storage is only to be used for this purpose
 216      * @return Boolean
 217      */
 218     resetHasChanged : function()
 219     {
 220         this.items.each(function(f){
 221            f.resetHasChanged();
 222         });
 223
 224     },
 225
 226
 227     /**
 228      * Performs a predefined action (submit or load) or custom actions you define on this form.
 229      * @param {String} actionName The name of the action type
 230      * @param {Object} options (optional) The options to pass to the action.  All of the config options listed
 231      * below are supported by both the submit and load actions unless otherwise noted (custom actions could also
 232      * accept other config options):
 233      * <pre>
 234 Property          Type             Description
 235 ----------------  ---------------  ----------------------------------------------------------------------------------
 236 url               String           The url for the action (defaults to the form's url)
 237 method            String           The form method to use (defaults to the form's method, or POST if not defined)
 238 params            String/Object    The params to pass (defaults to the form's baseParams, or none if not defined)
 239 clientValidation  Boolean          Applies to submit only.  Pass true to call form.isValid() prior to posting to
 240                                    validate the form on the client (defaults to false)
 241      * </pre>
 242      * @return {BasicForm} this
 243      */
 244     doAction : function(action, options){
 245         if(typeof action == 'string'){
 246             action = new Roo.form.Action.ACTION_TYPES[action](this, options);
 247         }
 248         if(this.fireEvent('beforeaction', this, action) !== false){
 249             this.beforeAction(action);
 250             action.run.defer(100, action);
 251         }
 252         return this;
 253     },
 254
 255     /**
 256      * Shortcut to do a submit action.
 257      * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
 258      * @return {BasicForm} this
 259      */
 260     submit : function(options){
 261         this.doAction('submit', options);
 262         return this;
 263     },
 264
 265     /**
 266      * Shortcut to do a load action.
 267      * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
 268      * @return {BasicForm} this
 269      */
 270     load : function(options){
 271         this.doAction('load', options);
 272         return this;
 273     },
 274
 275     /**
 276      * Persists the values in this form into the passed Roo.data.Record object in a beginEdit/endEdit block.
 277      * @param {Record} record The record to edit
 278      * @return {BasicForm} this
 279      */
 280     updateRecord : function(record){
 281         record.beginEdit();
 282         var fs = record.fields;
 283         fs.each(function(f){
 284             var field = this.findField(f.name);
 285             if(field){
 286                 record.set(f.name, field.getValue());
 287             }
 288         }, this);
 289         record.endEdit();
 290         return this;
 291     },
 292
 293     /**
 294      * Loads an Roo.data.Record into this form.
 295      * @param {Record} record The record to load
 296      * @return {BasicForm} this
 297      */
 298     loadRecord : function(record){
 299         this.setValues(record.data);
 300         return this;
 301     },
 302
 303     // private
 304     beforeAction : function(action){
 305         var o = action.options;
 306
 307         if(!this.disableMask) {
 308             if(this.waitMsgTarget === true){
 309                 this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
 310             }else if(this.waitMsgTarget){
 311                 this.waitMsgTarget = Roo.get(this.waitMsgTarget);
 312                 this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
 313             }else {
 314                 Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...');
 315             }
 316         }
 317
 318
 319     },
 320
 321     // private
 322     afterAction : function(action, success){
 323         this.activeAction = null;
 324         var o = action.options;
 325
 326         if(!this.disableMask) {
 327             if(this.waitMsgTarget === true){
 328                 this.el.unmask();
 329             }else if(this.waitMsgTarget){
 330                 this.waitMsgTarget.unmask();
 331             }else{
 332                 Roo.MessageBox.updateProgress(1);
 333                 Roo.MessageBox.hide();
 334             }
 335         }
 336
 337         if(success){
 338             if(o.reset){
 339                 this.reset();
 340             }
 341             Roo.callback(o.success, o.scope, [this, action]);
 342             this.fireEvent('actioncomplete', this, action);
 343
 344         }else{
 345
 346             // failure condition..
 347             // we have a scenario where updates need confirming.
 348             // eg. if a locking scenario exists..
 349             // we look for { errors : { needs_confirm : true }} in the response.
 350             if (
 351                 (typeof(action.result) != 'undefined')  &&
 352                 (typeof(action.result.errors) != 'undefined')  &&
 353                 (typeof(action.result.errors.needs_confirm) != 'undefined')
 354            ){
 355                 var _t = this;
 356                 Roo.MessageBox.confirm(
 357                     "Change requires confirmation",
 358                     action.result.errorMsg,
 359                     function(r) {
 360                         if (r != 'yes') {
 361                             return;
 362                         }
 363                         _t.doAction('submit', { params :  { _submit_confirmed : 1 } }  );
 364                     }
 365
 366                 );
 367
 368
 369
 370                 return;
 371             }
 372
 373             Roo.callback(o.failure, o.scope, [this, action]);
 374             // show an error message if no failed handler is set..
 375             if (!this.hasListener('actionfailed')) {
 376                 Roo.MessageBox.alert("Error",
 377                     (typeof(action.result) != 'undefined' && typeof(action.result.errorMsg) != 'undefined') ?
 378                         action.result.errorMsg :
 379                         "Saving Failed, please check your entries or try again"
 380                 );
 381             }
 382
 383             this.fireEvent('actionfailed', this, action);
 384         }
 385
 386     },
 387
 388     /**
 389      * Find a Roo.form.Field in this form by id, dataIndex, name or hiddenName
 390      * @param {String} id The value to search for
 391      * @return Field
 392      */
 393     findField : function(id){
 394         var field = this.items.get(id);
 395         if(!field){
 396             this.items.each(function(f){
 397                 if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
 398                     field = f;
 399                     return false;
 400                 }
 401             });
 402         }
 403         return field || null;
 404     },
 405
 406     /**
 407      * Add a secondary form to this one,
 408      * Used to provide tabbed forms. One form is primary, with hidden values
 409      * which mirror the elements from the other forms.
 410      *
 411      * @param {Roo.form.Form} form to add.
 412      *
 413      */
 414     addForm : function(form)
 415     {
 416
 417         if (this.childForms.indexOf(form) > -1) {
 418             // already added..
 419             return;
 420         }
 421         this.childForms.push(form);
 422         var n = '';
 423         Roo.each(form.allItems, function (fe) {
 424
 425             n = typeof(fe.getName) == 'undefined' ? fe.name : fe.getName();
 426             if (this.findField(n)) { // already added..
 427                 return;
 428             }
 429             var add = new Roo.form.Hidden({
 430                 name : n
 431             });
 432             add.render(this.el);
 433
 434             this.add( add );
 435         }, this);
 436
 437     },
 438     /**
 439      * Mark fields in this form invalid in bulk.
 440      * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
 441      * @return {BasicForm} this
 442      */
 443     markInvalid : function(errors){
 444         if(errors instanceof Array){
 445             for(var i = 0, len = errors.length; i < len; i++){
 446                 var fieldError = errors[i];
 447                 var f = this.findField(fieldError.id);
 448                 if(f){
 449                     f.markInvalid(fieldError.msg);
 450                 }
 451             }
 452         }else{
 453             var field, id;
 454             for(id in errors){
 455                 if(typeof errors[id] != 'function' && (field = this.findField(id))){
 456                     field.markInvalid(errors[id]);
 457                 }
 458             }
 459         }
 460         Roo.each(this.childForms || [], function (f) {
 461             f.markInvalid(errors);
 462         });
 463
 464         return this;
 465     },
 466
 467     /**
 468      * Set values for fields in this form in bulk.
 469      * @param {Array/Object} values Either an array in the form [{id:'fieldId', value:'foo'},...] or an object hash of {id: value, id2: value2}
 470      * @return {BasicForm} this
 471      */
 472     setValues : function(values){
 473         if(values instanceof Array){ // array of objects
 474             for(var i = 0, len = values.length; i < len; i++){
 475                 var v = values[i];
 476                 var f = this.findField(v.id);
 477                 if(f){
 478                     f.setValue(v.value);
 479                     if(this.trackResetOnLoad){
 480                         f.originalValue = f.getValue();
 481                     }
 482                 }
 483             }
 484         }else{ // object hash
 485             var field, id;
 486             for(id in values){
 487                 if(typeof values[id] != 'function' && (field = this.findField(id))){
 488
 489                     if (field.setFromData &&
 490                         field.valueField &&
 491                         field.displayField &&
 492                         // combos' with local stores can
 493                         // be queried via setValue()
 494                         // to set their value..
 495                         (field.store && !field.store.isLocal)
 496                         ) {
 497                         // it's a combo
 498                         var sd = { };
 499                         sd[field.valueField] = typeof(values[field.hiddenName]) == 'undefined' ? '' : values[field.hiddenName];
 500                         sd[field.displayField] = typeof(values[field.name]) == 'undefined' ? '' : values[field.name];
 501                         field.setFromData(sd);
 502
 503                     } else {
 504                         field.setValue(values[id]);
 505                     }
 506
 507
 508                     if(this.trackResetOnLoad){
 509                         field.originalValue = field.getValue();
 510                     }
 511                 }
 512             }
 513         }
 514         this.resetHasChanged();
 515
 516
 517         Roo.each(this.childForms || [], function (f) {
 518             f.setValues(values);
 519             f.resetHasChanged();
 520         });
 521
 522         return this;
 523     },
 524
 525     /**
 526      * Returns the fields in this form as an object with key/value pairs. If multiple fields exist with the same name
 527      * they are returned as an array.
 528      * @param {Boolean} asString
 529      * @return {Object}
 530      */
 531     getValues : function(asString){
 532         if (this.childForms) {
 533             // copy values from the child forms
 534             Roo.each(this.childForms, function (f) {
 535                 this.setValues(f.getValues());
 536             }, this);
 537         }
 538
 539
 540
 541         var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
 542         if(asString === true){
 543             return fs;
 544         }
 545         return Roo.urlDecode(fs);
 546     },
 547
 548     /**
 549      * Returns the fields in this form as an object with key/value pairs.
 550      * This differs from getValues as it calls getValue on each child item, rather than using dom data.
 551      * @return {Object}
 552      */
 553     getFieldValues : function(with_hidden)
 554     {
 555         if (this.childForms) {
 556             // copy values from the child forms
 557             // should this call getFieldValues - probably not as we do not currently copy
 558             // hidden fields when we generate..
 559             Roo.each(this.childForms, function (f) {
 560                 this.setValues(f.getValues());
 561             }, this);
 562         }
 563
 564         var ret = {};
 565         this.items.each(function(f){
 566             if (!f.getName()) {
 567                 return;
 568             }
 569             var v = f.getValue();
 570             if (f.inputType =='radio') {
 571                 if (typeof(ret[f.getName()]) == 'undefined') {
 572                     ret[f.getName()] = ''; // empty..
 573                 }
 574
 575                 if (!f.el.dom.checked) {
 576                     return;
 577
 578                 }
 579                 v = f.el.dom.value;
 580
 581             }
 582
 583             // not sure if this supported any more..
 584             if ((typeof(v) == 'object') && f.getRawValue) {
 585                 v = f.getRawValue() ; // dates..
 586             }
 587             // combo boxes where name != hiddenName...
 588             if (f.name != f.getName()) {
 589                 ret[f.name] = f.getRawValue();
 590             }
 591             ret[f.getName()] = v;
 592         });
 593
 594         return ret;
 595     },
 596
 597     /**
 598      * Clears all invalid messages in this form.
 599      * @return {BasicForm} this
 600      */
 601     clearInvalid : function(){
 602         this.items.each(function(f){
 603            f.clearInvalid();
 604         });
 605
 606         Roo.each(this.childForms || [], function (f) {
 607             f.clearInvalid();
 608         });
 609
 610
 611         return this;
 612     },
 613
 614     /**
 615      * Resets this form.
 616      * @return {BasicForm} this
 617      */
 618     reset : function(){
 619         this.items.each(function(f){
 620             f.reset();
 621         });
 622
 623         Roo.each(this.childForms || [], function (f) {
 624             f.reset();
 625         });
 626         this.resetHasChanged();
 627
 628         return this;
 629     },
 630
 631     /**
 632      * Add Roo.form components to this form.
 633      * @param {Field} field1
 634      * @param {Field} field2 (optional)
 635      * @param {Field} etc (optional)
 636      * @return {BasicForm} this
 637      */
 638     add : function(){
 639         this.items.addAll(Array.prototype.slice.call(arguments, 0));
 640         return this;
 641     },
 642
 643
 644     /**
 645      * Removes a field from the items collection (does NOT remove its markup).
 646      * @param {Field} field
 647      * @return {BasicForm} this
 648      */
 649     remove : function(field){
 650         this.items.remove(field);
 651         return this;
 652     },
 653
 654     /**
 655      * Looks at the fields in this form, checks them for an id attribute,
 656      * and calls applyTo on the existing dom element with that id.
 657      * @return {BasicForm} this
 658      */
 659     render : function(){
 660         this.items.each(function(f){
 661             if(f.isFormField && !f.rendered && document.getElementById(f.id)){ // if the element exists
 662                 f.applyTo(f.id);
 663             }
 664         });
 665         return this;
 666     },
 667
 668     /**
 669      * Calls {@link Ext#apply} for all fields in this form with the passed object.
 670      * @param {Object} values
 671      * @return {BasicForm} this
 672      */
 673     applyToFields : function(o){
 674         this.items.each(function(f){
 675            Roo.apply(f, o);
 676         });
 677         return this;
 678     },
 679
 680     /**
 681      * Calls {@link Ext#applyIf} for all field in this form with the passed object.
 682      * @param {Object} values
 683      * @return {BasicForm} this
 684      */
 685     applyIfToFields : function(o){
 686         this.items.each(function(f){
 687            Roo.applyIf(f, o);
 688         });
 689         return this;
 690     }
 691 });
 692
 693 // back compat
 694 Roo.BasicForm = Roo.form.BasicForm;
 695
 696 Roo.apply(Roo.form.BasicForm, {
 697
 698     popover : {
 699
 700         padding : 5,
 701
 702         isApplied : false,
 703
 704         isMasked : false,
 705
 706         form : false,
 707
 708         target : false,
 709
 710         toolTip : false,
 711
 712         intervalID : false,
 713
 714         maskEl : false,
 715
 716         apply : function()
 717         {
 718             if(this.isApplied){
 719                 return;
 720             }
 721
 722             this.maskEl = {
 723                 top : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-top-mask" }, true),
 724                 left : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-left-mask" }, true),
 725                 bottom : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-bottom-mask" }, true),
 726                 right : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-right-mask" }, true)
 727             };
 728
 729             this.maskEl.top.enableDisplayMode("block");
 730             this.maskEl.left.enableDisplayMode("block");
 731             this.maskEl.bottom.enableDisplayMode("block");
 732             this.maskEl.right.enableDisplayMode("block");
 733
 734 //            this.toolTip = new Roo.bootstrap.Tooltip({
 735 //                cls : 'roo-form-error-popover',
 736 //                alignment : {
 737 //                    'left' : ['r-l', [-2,0], 'right'],
 738 //                    'right' : ['l-r', [2,0], 'left'],
 739 //                    'bottom' : ['tl-bl', [0,2], 'top'],
 740 //                    'top' : [ 'bl-tl', [0,-2], 'bottom']
 741 //                }
 742 //            });
 743 //
 744 //            this.toolTip.render(Roo.get(document.body));
 745 //
 746 //            this.toolTip.el.enableDisplayMode("block");
 747
 748             Roo.get(document.body).on('click', function(){
 749                 this.unmask();
 750             }, this);
 751
 752             Roo.get(document.body).on('touchstart', function(){
 753                 this.unmask();
 754             }, this);
 755
 756             this.isApplied = true
 757         },
 758
 759         mask : function(form, target)
 760         {
 761             this.form = form;
 762
 763             this.target = target;
 764
 765             if(!this.form.errorMask || !target.el){
 766                 return;
 767             }
 768
 769             var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.x-layout-active-content', 100, true) || Roo.get(document.body);
 770
 771             Roo.log(scrollable);
 772
 773             var ot = this.target.el.calcOffsetsTo(scrollable);
 774
 775             var scrollTo = ot[1] - this.form.maskOffset;
 776
 777             scrollTo = Math.min(scrollTo, scrollable.dom.scrollHeight);
 778
 779             scrollable.scrollTo('top', scrollTo);
 780
 781             var box = this.target.el.getBox();
 782             Roo.log(box);
 783             var zIndex = Roo.bootstrap.Modal.zIndex++;
 784
 785
 786             this.maskEl.top.setStyle('position', 'absolute');
 787             this.maskEl.top.setStyle('z-index', zIndex);
 788             this.maskEl.top.setSize(Roo.lib.Dom.getDocumentWidth(), box.y - this.padding);
 789             this.maskEl.top.setLeft(0);
 790             this.maskEl.top.setTop(0);
 791             this.maskEl.top.show();
 792
 793             this.maskEl.left.setStyle('position', 'absolute');
 794             this.maskEl.left.setStyle('z-index', zIndex);
 795             this.maskEl.left.setSize(box.x - this.padding, box.height + this.padding * 2);
 796             this.maskEl.left.setLeft(0);
 797             this.maskEl.left.setTop(box.y - this.padding);
 798             this.maskEl.left.show();
 799
 800             this.maskEl.bottom.setStyle('position', 'absolute');
 801             this.maskEl.bottom.setStyle('z-index', zIndex);
 802             this.maskEl.bottom.setSize(Roo.lib.Dom.getDocumentWidth(), Roo.lib.Dom.getDocumentHeight() - box.bottom - this.padding);
 803             this.maskEl.bottom.setLeft(0);
 804             this.maskEl.bottom.setTop(box.bottom + this.padding);
 805             this.maskEl.bottom.show();
 806
 807             this.maskEl.right.setStyle('position', 'absolute');
 808             this.maskEl.right.setStyle('z-index', zIndex);
 809             this.maskEl.right.setSize(Roo.lib.Dom.getDocumentWidth() - box.right - this.padding, box.height + this.padding * 2);
 810             this.maskEl.right.setLeft(box.right + this.padding);
 811             this.maskEl.right.setTop(box.y - this.padding);
 812             this.maskEl.right.show();
 813
 814             this.toolTip.bindEl = this.target.el;
 815
 816             this.toolTip.el.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
 817
 818             var tip = this.target.blankText;
 819
 820             if(this.target.getValue() !== '' ) {
 821
 822                 if (this.target.invalidText.length) {
 823                     tip = this.target.invalidText;
 824                 } else if (this.target.regexText.length){
 825                     tip = this.target.regexText;
 826                 }
 827             }
 828
 829             this.toolTip.show(tip);
 830
 831             this.intervalID = window.setInterval(function() {
 832                 Roo.bootstrap.Form.popover.unmask();
 833             }, 10000);
 834
 835             window.onwheel = function(){ return false;};
 836
 837             (function(){ this.isMasked = true; }).defer(500, this);
 838
 839         },
 840
 841         unmask : function()
 842         {
 843             if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errorMask){
 844                 return;
 845             }
 846
 847             this.maskEl.top.setStyle('position', 'absolute');
 848             this.maskEl.top.setSize(0, 0).setXY([0, 0]);
 849             this.maskEl.top.hide();
 850
 851             this.maskEl.left.setStyle('position', 'absolute');
 852             this.maskEl.left.setSize(0, 0).setXY([0, 0]);
 853             this.maskEl.left.hide();
 854
 855             this.maskEl.bottom.setStyle('position', 'absolute');
 856             this.maskEl.bottom.setSize(0, 0).setXY([0, 0]);
 857             this.maskEl.bottom.hide();
 858
 859             this.maskEl.right.setStyle('position', 'absolute');
 860             this.maskEl.right.setSize(0, 0).setXY([0, 0]);
 861             this.maskEl.right.hide();
 862
 863 //            this.toolTip.hide();
 864
 865 //            this.toolTip.el.hide();
 866
 867             window.onwheel = function(){ return true;};
 868
 869             if(this.intervalID){
 870                 window.clearInterval(this.intervalID);
 871                 this.intervalID = false;
 872             }
 873
 874             this.isMasked = false;
 875
 876         }
 877
 878     }
 879
 880 });