git.roojs.org Git - roojs1/blob - roojs-bootstrap-debug.js

   1 /*
   2  * - LGPL
   3  *
   4  * base class for bootstrap elements.
   5  *
   6  */
   7
   8 Roo.bootstrap = Roo.bootstrap || {};
   9 /**
  10  * @class Roo.bootstrap.Component
  11  * @extends Roo.Component
  12  * Bootstrap Component base class
  13  * @cfg {String} cls css class
  14  * @cfg {String} style any extra css
  15  * @cfg {Object} xattr extra attributes to add to 'element' (used by builder to store stuff.)
  16  * @cfg {Boolean} can_build_overlaid  True if element can be rebuild from a HTML page
  17  * @cfg {string} dataId cutomer id
  18  * @cfg {string} name Specifies name attribute
  19  *
  20  * @constructor
  21  * Do not use directly - it does not do anything..
  22  * @param {Object} config The config object
  23  */
  24
  25
  26
  27 Roo.bootstrap.Component = function(config){
  28     Roo.bootstrap.Component.superclass.constructor.call(this, config);
  29 };
  30
  31 Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
  32
  33
  34     allowDomMove : false, // to stop relocations in parent onRender...
  35
  36     cls : false,
  37
  38     style : false,
  39
  40     autoCreate : false,
  41
  42     initEvents : function() {  },
  43
  44     xattr : false,
  45
  46     parentId : false,
  47
  48     can_build_overlaid : true,
  49
  50     dataId : false,
  51
  52     name : false,
  53
  54     parent: function() {
  55         // returns the parent component..
  56         return Roo.ComponentMgr.get(this.parentId)
  57
  58
  59     },
  60
  61     // private
  62     onRender : function(ct, position)
  63     {
  64        // Roo.log("Call onRender: " + this.xtype);
  65
  66         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
  67
  68         if(this.el){
  69             if (this.el.attr('xtype')) {
  70                 this.el.attr('xtypex', this.el.attr('xtype'));
  71                 this.el.dom.removeAttribute('xtype');
  72
  73                 this.initEvents();
  74             }
  75
  76             return;
  77         }
  78
  79
  80
  81         var cfg = Roo.apply({},  this.getAutoCreate());
  82         cfg.id = Roo.id();
  83
  84         // fill in the extra attributes
  85         if (this.xattr && typeof(this.xattr) =='object') {
  86             for (var i in this.xattr) {
  87                 cfg[i] = this.xattr[i];
  88             }
  89         }
  90
  91         if(this.dataId){
  92             cfg.dataId = this.dataId;
  93         }
  94
  95         if (this.cls) {
  96             cfg.cls = (typeof(cfg.cls) == 'undefined') ? this.cls : cfg.cls + ' ' + this.cls;
  97         }
  98
  99         if (this.style) { // fixme needs to support more complex style data.
 100             cfg.style = this.style;
 101         }
 102
 103         if(this.name){
 104             cfg.name = this.name;
 105         }
 106
 107         this.el = ct.createChild(cfg, position);
 108
 109         if(this.tabIndex !== undefined){
 110             this.el.dom.setAttribute('tabIndex', this.tabIndex);
 111         }
 112         this.initEvents();
 113
 114
 115     },
 116
 117     getChildContainer : function()
 118     {
 119         return this.el;
 120     },
 121
 122
 123     addxtype  : function(tree,cntr)
 124     {
 125         var cn = this;
 126
 127         cn = Roo.factory(tree);
 128
 129         cn.parentType = this.xtype; //??
 130         cn.parentId = this.id;
 131
 132         cntr = (typeof(cntr) == 'undefined' ) ? 'getChildContainer' : cntr;
 133
 134         var has_flexy_each =  (typeof(tree['flexy:foreach']) != 'undefined');
 135
 136         var has_flexy_if =  (typeof(tree['flexy:if']) != 'undefined');
 137
 138         var build_from_html =  Roo.XComponent.build_from_html;
 139
 140         var is_body  = (tree.xtype == 'Body') ;
 141
 142         var page_has_body = (Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body');
 143
 144         var self_cntr_el = Roo.get(this[cntr]());
 145
 146         if (!has_flexy_each || !build_from_html || is_body || !page_has_body) {
 147             if(!has_flexy_if || typeof(tree.name) == 'undefined' || !build_from_html || is_body || !page_has_body){
 148                 return this.addxtypeChild(tree,cntr);
 149             }
 150
 151             var echild =self_cntr_el ? self_cntr_el.child('>*[name=' + tree.name + ']') : false;
 152
 153             if(echild){
 154                 return this.addxtypeChild(Roo.apply({}, tree),cntr);
 155             }
 156
 157             Roo.log('skipping render');
 158             return cn;
 159
 160         }
 161
 162         var ret = false;
 163
 164         while (true) {
 165             var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
 166
 167             if (!echild) {
 168                 break;
 169             }
 170
 171             if (echild && echild.attr('xtype').split('.').pop() != cn.xtype) {
 172                 break;
 173             }
 174
 175             ret = this.addxtypeChild(Roo.apply({}, tree),cntr);
 176         }
 177         return ret;
 178     },
 179
 180     addxtypeChild : function (tree, cntr)
 181     {
 182         Roo.log('addxtypeChild:' + cntr);
 183         var cn = this;
 184         cntr = (typeof(cntr) == 'undefined' ) ? 'getChildContainer' : cntr;
 185
 186
 187         var has_flexy = (typeof(tree['flexy:if']) != 'undefined') ||
 188                     (typeof(tree['flexy:foreach']) != 'undefined');
 189
 190
 191
 192
 193         // render the element if it's not BODY.
 194         if (tree.xtype != 'Body') {
 195
 196             cn = Roo.factory(tree);
 197
 198             cn.parentType = this.xtype; //??
 199             cn.parentId = this.id;
 200
 201             var build_from_html =  Roo.XComponent.build_from_html;
 202
 203
 204             // does the container contain child eleemnts with 'xtype' attributes.
 205             // that match this xtype..
 206             // note - when we render we create these as well..
 207             // so we should check to see if body has xtype set.
 208             if (Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body') {
 209
 210                 var self_cntr_el = Roo.get(this[cntr]());
 211                 var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
 212
 213                 if (echild && echild.attr('xtype').split('.').pop() == cn.xtype) {
 214                   //  Roo.log("found child for " + this.xtype +": " + echild.attr('xtype') );
 215
 216
 217
 218                     cn.el = echild;
 219                   //  Roo.log("GOT");
 220                     //echild.dom.removeAttribute('xtype');
 221                 } else {
 222                     Roo.log("MISSING " + cn.xtype + " on child of " + (this.el ? this.el.attr('xbuilderid') : 'no parent'));
 223
 224                 }
 225             }
 226
 227
 228
 229             // if object has flexy:if - then it may or may not be rendered.
 230             if (build_from_html && has_flexy && !cn.el &&  cn.can_build_overlaid) {
 231                 // skip a flexy if element.
 232                 Roo.log('skipping render');
 233              } else {
 234
 235                 // actually if flexy:foreach is found, we really want to create
 236                 // multiple copies here...
 237                 //Roo.log('render');
 238                 //Roo.log(this[cntr]());
 239                 cn.render(this[cntr]());
 240              }
 241             // then add the element..
 242         }
 243
 244
 245         // handle the kids..
 246
 247         var nitems = [];
 248         if (typeof (tree.menu) != 'undefined') {
 249             tree.menu.parentType = cn.xtype;
 250             tree.menu.triggerEl = cn.el;
 251             nitems.push(cn.addxtype(Roo.apply({}, tree.menu)));
 252
 253         }
 254
 255         if (!tree.items || !tree.items.length) {
 256             cn.items = nitems;
 257             return cn;
 258         }
 259         var items = tree.items;
 260         delete tree.items;
 261
 262         //Roo.log(items.length);
 263             // add the items..
 264         for(var i =0;i < items.length;i++) {
 265             nitems.push(cn.addxtype(Roo.apply({}, items[i])));
 266         }
 267
 268         cn.items = nitems;
 269
 270         return cn;
 271     }
 272
 273
 274
 275
 276 });
 277
 278  /*
 279  * - LGPL
 280  *
 281  * Body
 282  *
 283  */
 284
 285 /**
 286  * @class Roo.bootstrap.Body
 287  * @extends Roo.bootstrap.Component
 288  * Bootstrap Body class
 289  *
 290  * @constructor
 291  * Create a new body
 292  * @param {Object} config The config object
 293  */
 294
 295 Roo.bootstrap.Body = function(config){
 296     Roo.bootstrap.Body.superclass.constructor.call(this, config);
 297     this.el = Roo.get(document.body);
 298 };
 299
 300 Roo.extend(Roo.bootstrap.Body, Roo.bootstrap.Component,  {
 301
 302         autoCreate : {
 303         cls: 'container'
 304     },
 305     onRender : function(ct, position){
 306
 307
 308         //this.el.addClass([this.fieldClass, this.cls]);
 309
 310     }
 311
 312
 313
 314
 315 });
 316
 317  /*
 318  * - LGPL
 319  *
 320  * button group
 321  *
 322  */
 323
 324
 325 /**
 326  * @class Roo.bootstrap.ButtonGroup
 327  * @extends Roo.bootstrap.Component
 328  * Bootstrap ButtonGroup class
 329  * @cfg {String} size lg | sm | xs (default empty normal)
 330  * @cfg {String} align vertical | justified  (default none)
 331  * @cfg {String} direction up | down (default down)
 332  * @cfg {Boolean} toolbar false | true
 333  * @cfg {Boolean} btn true | false
 334  *
 335  *
 336  * @constructor
 337  * Create a new Input
 338  * @param {Object} config The config object
 339  */
 340
 341 Roo.bootstrap.ButtonGroup = function(config){
 342     Roo.bootstrap.ButtonGroup.superclass.constructor.call(this, config);
 343 };
 344
 345 Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component,  {
 346
 347     size: '',
 348     align: '',
 349     direction: '',
 350     toolbar: false,
 351     btn: true,
 352
 353     getAutoCreate : function(){
 354         var cfg = {
 355             cls: 'btn-group',
 356             html : null
 357         }
 358
 359         cfg.html = this.html || cfg.html;
 360
 361         if (this.toolbar) {
 362             cfg = {
 363                 cls: 'btn-toolbar',
 364                 html: null
 365             }
 366
 367             return cfg;
 368         }
 369
 370         if (['vertical','justified'].indexOf(this.align)!==-1) {
 371             cfg.cls = 'btn-group-' + this.align;
 372
 373             if (this.align == 'justified') {
 374                 console.log(this.items);
 375             }
 376         }
 377
 378         if (['lg','sm','xs'].indexOf(this.size)!==-1) {
 379             cfg.cls += ' btn-group-' + this.size;
 380         }
 381
 382         if (this.direction == 'up') {
 383             cfg.cls += ' dropup' ;
 384         }
 385
 386         return cfg;
 387     }
 388
 389 });
 390
 391  /*
 392  * - LGPL
 393  *
 394  * button
 395  *
 396  */
 397
 398 /**
 399  * @class Roo.bootstrap.Button
 400  * @extends Roo.bootstrap.Component
 401  * Bootstrap Button class
 402  * @cfg {String} html The button content
 403  * @cfg {String} weight default (or empty) | primary | success | info | warning | danger | link
 404  * @cfg {String} size empty | lg | sm | xs
 405  * @cfg {String} tag empty | a | input | submit
 406  * @cfg {String} href empty or href
 407  * @cfg {Boolean} disabled false | true
 408  * @cfg {Boolean} isClose false | true
 409  * @cfg {String} glyphicon empty | adjust | align-center | align-justify | align-left | align-right | arrow-down | arrow-left | arrow-right | arrow-up | asterisk | backward | ban-circle | barcode | bell | bold | book | bookmark | briefcase | bullhorn | calendar | camera | certificate | check | chevron-down | chevron-left | chevron-right | chevron-up | circle-arrow-down | circle-arrow-left | circle-arrow-right | circle-arrow-up | cloud | cloud-download | cloud-upload | cog | collapse-down | collapse-up | comment | compressed | copyright-mark | credit-card | cutlery | dashboard | download | download-alt | earphone | edit | eject | envelope | euro | exclamation-sign | expand | export | eye-close | eye-open | facetime-video | fast-backward | fast-forward | file | film | filter | fire | flag | flash | floppy-disk | floppy-open | floppy-remove | floppy-save | floppy-saved | folder-close | folder-open | font | forward | fullscreen | gbp | gift | glass | globe | hand-down | hand-left | hand-right | hand-up | hd-video | hdd | header | headphones | heart | heart-empty | home | import | inbox | indent-left | indent-right | info-sign | italic | leaf | link | list | list-alt | lock | log-in | log-out | magnet | map-marker | minus | minus-sign | move | music | new-window | off | ok | ok-circle | ok-sign | open | paperclip | pause | pencil | phone | phone-alt | picture | plane | play | play-circle | plus | plus-sign | print | pushpin | qrcode | question-sign | random | record | refresh | registration-mark | remove | remove-circle | remove-sign | repeat | resize-full | resize-horizontal | resize-small | resize-vertical | retweet | road | save | saved | screenshot | sd-video | search | send | share | share-alt | shopping-cart | signal | sort | sort-by-alphabet | sort-by-alphabet-alt | sort-by-attributes | sort-by-attributes-alt | sort-by-order | sort-by-order-alt | sound-5-1 | sound-6-1 | sound-7-1 | sound-dolby | sound-stereo | star | star-empty | stats | step-backward | step-forward | stop | subtitles | tag | tags | tasks | text-height | text-width | th | th-large | th-list | thumbs-down | thumbs-up | time | tint | tower | transfer | trash | tree-conifer | tree-deciduous | unchecked | upload | usd | user | volume-down | volume-off | volume-up | warning-sign | wrench | zoom-in | zoom-out
 410  * @cfg {String} badge text for badge
 411  * @cfg {String} theme default (or empty) | glow
 412  * @cfg {Boolean} inverse false | true
 413  * @cfg {Boolean} toggle false | true
 414  * @cfg {String} ontext text for on toggle state
 415  * @cfg {String} offtext text for off toggle state
 416  * @cfg {Boolean} defaulton true | false
 417  * @cfg {Boolean} preventDefault (true | false) default true
 418  * @cfg {Boolean} removeClass true | false remove the standard class..
 419  * @cfg {String} target (_self|_blank|_parent|_top)target for a href.
 420  *
 421  * @constructor
 422  * Create a new button
 423  * @param {Object} config The config object
 424  */
 425
 426
 427 Roo.bootstrap.Button = function(config){
 428     Roo.bootstrap.Button.superclass.constructor.call(this, config);
 429     this.addEvents({
 430         // raw events
 431         /**
 432          * @event click
 433          * When a butotn is pressed
 434          * @param {Roo.EventObject} e
 435          */
 436         "click" : true,
 437          /**
 438          * @event toggle
 439          * After the button has been toggles
 440          * @param {Roo.EventObject} e
 441          * @param {boolean} pressed (also available as button.pressed)
 442          */
 443         "toggle" : true
 444     });
 445 };
 446
 447 Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component,  {
 448     html: false,
 449     active: false,
 450     weight: '',
 451     size: '',
 452     tag: 'button',
 453     href: '',
 454     disabled: false,
 455     isClose: false,
 456     glyphicon: '',
 457     badge: '',
 458     theme: 'default',
 459     inverse: false,
 460
 461     toggle: false,
 462     ontext: 'ON',
 463     offtext: 'OFF',
 464     defaulton: true,
 465     preventDefault: true,
 466     removeClass: false,
 467     name: false,
 468     target: false,
 469
 470
 471     pressed : null,
 472
 473
 474     getAutoCreate : function(){
 475
 476         var cfg = {
 477             tag : 'button',
 478             cls : 'roo-button',
 479             html: ''
 480         };
 481
 482         if (['a', 'button', 'input', 'submit'].indexOf(this.tag) < 0) {
 483             throw "Invalid value for tag: " + this.tag + ". must be a, button, input or submit.";
 484             this.tag = 'button';
 485         } else {
 486             cfg.tag = this.tag;
 487         }
 488         cfg.html = this.html || cfg.html;
 489
 490         if (this.toggle == true) {
 491             cfg={
 492                 tag: 'div',
 493                 cls: 'slider-frame roo-button',
 494                 cn: [
 495                     {
 496                         tag: 'span',
 497                         'data-on-text':'ON',
 498                         'data-off-text':'OFF',
 499                         cls: 'slider-button',
 500                         html: this.offtext
 501                     }
 502                 ]
 503             };
 504
 505             if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
 506                 cfg.cls += ' '+this.weight;
 507             }
 508
 509             return cfg;
 510         }
 511
 512         if (this.isClose) {
 513             cfg.cls += ' close';
 514
 515             cfg["aria-hidden"] = true;
 516
 517             cfg.html = "&times;";
 518
 519             return cfg;
 520         }
 521
 522
 523         if (this.theme==='default') {
 524             cfg.cls = 'btn roo-button';
 525
 526             //if (this.parentType != 'Navbar') {
 527             this.weight = this.weight.length ?  this.weight : 'default';
 528             //}
 529             if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
 530
 531                 cfg.cls += ' btn-' + this.weight;
 532             }
 533         } else if (this.theme==='glow') {
 534
 535             cfg.tag = 'a';
 536             cfg.cls = 'btn-glow roo-button';
 537
 538             if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
 539
 540                 cfg.cls += ' ' + this.weight;
 541             }
 542         }
 543
 544
 545         if (this.inverse) {
 546             this.cls += ' inverse';
 547         }
 548
 549
 550         if (this.active) {
 551             cfg.cls += ' active';
 552         }
 553
 554         if (this.disabled) {
 555             cfg.disabled = 'disabled';
 556         }
 557
 558         if (this.items) {
 559             Roo.log('changing to ul' );
 560             cfg.tag = 'ul';
 561             this.glyphicon = 'caret';
 562         }
 563
 564         cfg.cls += this.size.length ? (' btn-' + this.size) : '';
 565
 566         //gsRoo.log(this.parentType);
 567         if (this.parentType === 'Navbar' && !this.parent().bar) {
 568             Roo.log('changing to li?');
 569
 570             cfg.tag = 'li';
 571
 572             cfg.cls = '';
 573             cfg.cn =  [{
 574                 tag : 'a',
 575                 cls : 'roo-button',
 576                 html : this.html,
 577                 href : this.href || '#'
 578             }];
 579             if (this.menu) {
 580                 cfg.cn[0].html = this.html  + ' <span class="caret"></span>';
 581                 cfg.cls += ' dropdown';
 582             }
 583
 584             delete cfg.html;
 585
 586         }
 587
 588        cfg.cls += this.parentType === 'Navbar' ?  ' navbar-btn' : '';
 589
 590         if (this.glyphicon) {
 591             cfg.html = ' ' + cfg.html;
 592
 593             cfg.cn = [
 594                 {
 595                     tag: 'span',
 596                     cls: 'glyphicon glyphicon-' + this.glyphicon
 597                 }
 598             ];
 599         }
 600
 601         if (this.badge) {
 602             cfg.html += ' ';
 603
 604             cfg.tag = 'a';
 605
 606 //            cfg.cls='btn roo-button';
 607
 608             cfg.href=this.href;
 609
 610             var value = cfg.html;
 611
 612             if(this.glyphicon){
 613                 value = {
 614                             tag: 'span',
 615                             cls: 'glyphicon glyphicon-' + this.glyphicon,
 616                             html: this.html
 617                         };
 618
 619             }
 620
 621             cfg.cn = [
 622                 value,
 623                 {
 624                     tag: 'span',
 625                     cls: 'badge',
 626                     html: this.badge
 627                 }
 628             ];
 629
 630             cfg.html='';
 631         }
 632
 633         if (this.menu) {
 634             cfg.cls += ' dropdown';
 635             cfg.html = typeof(cfg.html) != 'undefined' ? cfg.html + ' <span class="caret"></span>' : '<span class="caret"></span>';
 636         }
 637
 638         if (cfg.tag !== 'a' && this.href !== '') {
 639             throw "Tag must be a to set href.";
 640         } else if (this.href.length > 0) {
 641             cfg.href = this.href;
 642         }
 643
 644         if(this.removeClass){
 645             cfg.cls = '';
 646         }
 647
 648         if(this.target){
 649             cfg.target = this.target;
 650         }
 651
 652         return cfg;
 653     },
 654     initEvents: function() {
 655        // Roo.log('init events?');
 656 //        Roo.log(this.el.dom);
 657        if (this.el.hasClass('roo-button')) {
 658             this.el.on('click', this.onClick, this);
 659        } else {
 660             this.el.select('.roo-button').on('click', this.onClick, this);
 661        }
 662
 663
 664
 665     },
 666     onClick : function(e)
 667     {
 668         if (this.disabled) {
 669             return;
 670         }
 671
 672         Roo.log('button on click ');
 673         if(this.preventDefault){
 674             e.preventDefault();
 675         }
 676         if (this.pressed === true || this.pressed === false) {
 677             this.pressed = !this.pressed;
 678             this.el[this.pressed ? 'addClass' : 'removeClass']('active');
 679             this.fireEvent('toggle', this, e, this.pressed);
 680         }
 681
 682
 683         this.fireEvent('click', this, e);
 684     },
 685
 686     /**
 687      * Enables this button
 688      */
 689     enable : function()
 690     {
 691         this.disabled = false;
 692         this.el.removeClass('disabled');
 693     },
 694
 695     /**
 696      * Disable this button
 697      */
 698     disable : function()
 699     {
 700         this.disabled = true;
 701         this.el.addClass('disabled');
 702     },
 703      /**
 704      * sets the active state on/off,
 705      * @param {Boolean} state (optional) Force a particular state
 706      */
 707     setActive : function(v) {
 708
 709         this.el[v ? 'addClass' : 'removeClass']('active');
 710     },
 711      /**
 712      * toggles the current active state
 713      */
 714     toggleActive : function()
 715     {
 716        var active = this.el.hasClass('active');
 717        this.setActive(!active);
 718
 719
 720     }
 721
 722
 723
 724 });
 725
 726  /*
 727  * - LGPL
 728  *
 729  * column
 730  *
 731  */
 732
 733 /**
 734  * @class Roo.bootstrap.Column
 735  * @extends Roo.bootstrap.Component
 736  * Bootstrap Column class
 737  * @cfg {Number} xs colspan out of 12 for mobile-sized screens
 738  * @cfg {Number} sm colspan out of 12 for tablet-sized screens
 739  * @cfg {Number} md colspan out of 12 for computer-sized screens
 740  * @cfg {Number} lg colspan out of 12 for large computer-sized screens
 741  * @cfg {String} html content of column.
 742  *
 743  * @constructor
 744  * Create a new Column
 745  * @param {Object} config The config object
 746  */
 747
 748 Roo.bootstrap.Column = function(config){
 749     Roo.bootstrap.Column.superclass.constructor.call(this, config);
 750 };
 751
 752 Roo.extend(Roo.bootstrap.Column, Roo.bootstrap.Component,  {
 753
 754     xs: null,
 755     sm: null,
 756     md: null,
 757     lg: null,
 758     html: '',
 759     offset: 0,
 760
 761     getAutoCreate : function(){
 762         var cfg = Roo.apply({}, Roo.bootstrap.Column.superclass.getAutoCreate.call(this));
 763
 764         cfg = {
 765             tag: 'div',
 766             cls: 'column'
 767         };
 768
 769         var settings=this;
 770         ['xs','sm','md','lg'].map(function(size){
 771             if (settings[size]) {
 772                 cfg.cls += ' col-' + size + '-' + settings[size];
 773             }
 774         });
 775         if (this.html.length) {
 776             cfg.html = this.html;
 777         }
 778
 779         return cfg;
 780     }
 781
 782 });
 783
 784
 785
 786  /*
 787  * - LGPL
 788  *
 789  * page container.
 790  *
 791  */
 792
 793
 794 /**
 795  * @class Roo.bootstrap.Container
 796  * @extends Roo.bootstrap.Component
 797  * Bootstrap Container class
 798  * @cfg {Boolean} jumbotron is it a jumbotron element
 799  * @cfg {String} html content of element
 800  * @cfg {String} well (lg|sm|md) a well, large, small or medium.
 801  * @cfg {String} panel (primary|success|info|warning|danger) render as a panel.
 802  * @cfg {String} header content of header (for panel)
 803  * @cfg {String} footer content of footer (for panel)
 804  * @cfg {String} sticky (footer|wrap|push) block to use as footer or body- needs css-bootstrap/sticky-footer.css
 805  *
 806  * @constructor
 807  * Create a new Container
 808  * @param {Object} config The config object
 809  */
 810
 811 Roo.bootstrap.Container = function(config){
 812     Roo.bootstrap.Container.superclass.constructor.call(this, config);
 813 };
 814
 815 Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
 816
 817     jumbotron : false,
 818     well: '',
 819     panel : '',
 820     header: '',
 821     footer : '',
 822     sticky: '',
 823
 824
 825     getChildContainer : function() {
 826
 827         if(!this.el){
 828             return false;
 829         }
 830
 831         if (this.panel.length) {
 832             return this.el.select('.panel-body',true).first();
 833         }
 834
 835         return this.el;
 836     },
 837
 838
 839     getAutoCreate : function(){
 840
 841         var cfg = {
 842             html : '',
 843             cls : ''
 844         };
 845         if (this.jumbotron) {
 846             cfg.cls = 'jumbotron';
 847         }
 848         if (this.cls) {
 849             cfg.cls = this.cls + '';
 850         }
 851
 852         if (this.sticky.length) {
 853
 854             var bd = Roo.get(document.body);
 855             if (!bd.hasClass('bootstrap-sticky')) {
 856                 bd.addClass('bootstrap-sticky');
 857                 Roo.select('html',true).setStyle('height', '100%');
 858             }
 859
 860             cfg.cls += 'bootstrap-sticky-' + this.sticky;
 861         }
 862
 863
 864         if (this.well.length) {
 865             switch (this.well) {
 866                 case 'lg':
 867                 case 'sm':
 868                     cfg.cls +=' well well-' +this.well;
 869                     break;
 870                 default:
 871                     cfg.cls +=' well';
 872                     break;
 873             }
 874         }
 875
 876         var body = cfg;
 877
 878         if (this.panel.length) {
 879             cfg.cls += ' panel panel-' + this.panel;
 880             cfg.cn = [];
 881             if (this.header.length) {
 882                 cfg.cn.push({
 883
 884                     cls : 'panel-heading',
 885                     cn : [{
 886                         tag: 'h3',
 887                         cls : 'panel-title',
 888                         html : this.header
 889                     }]
 890
 891                 });
 892             }
 893             body = false;
 894             cfg.cn.push({
 895                 cls : 'panel-body',
 896                 html : this.html
 897             });
 898
 899
 900             if (this.footer.length) {
 901                 cfg.cn.push({
 902                     cls : 'panel-footer',
 903                     html : this.footer
 904
 905                 });
 906             }
 907
 908         }
 909         if (body) {
 910             body.html = this.html || cfg.html;
 911         }
 912         if (!cfg.cls.length) {
 913             cfg.cls =  'container';
 914         }
 915
 916         return cfg;
 917     }
 918
 919 });
 920
 921  /*
 922  * - LGPL
 923  *
 924  * image
 925  *
 926  */
 927
 928
 929 /**
 930  * @class Roo.bootstrap.Img
 931  * @extends Roo.bootstrap.Component
 932  * Bootstrap Img class
 933  * @cfg {Boolean} imgResponsive false | true
 934  * @cfg {String} border rounded | circle | thumbnail
 935  * @cfg {String} src image source
 936  * @cfg {String} alt image alternative text
 937  * @cfg {String} href a tag href
 938  * @cfg {String} target (_self|_blank|_parent|_top)target for a href.
 939  *
 940  * @constructor
 941  * Create a new Input
 942  * @param {Object} config The config object
 943  */
 944
 945 Roo.bootstrap.Img = function(config){
 946     Roo.bootstrap.Img.superclass.constructor.call(this, config);
 947
 948     this.addEvents({
 949         // img events
 950         /**
 951          * @event click
 952          * The img click event for the img.
 953          * @param {Roo.EventObject} e
 954          */
 955         "click" : true
 956     });
 957 };
 958
 959 Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component,  {
 960
 961     imgResponsive: true,
 962     border: '',
 963     src: '',
 964     href: false,
 965     target: false,
 966
 967     getAutoCreate : function(){
 968
 969         var cfg = {
 970             tag: 'img',
 971             cls: 'img-responsive',
 972             html : null
 973         }
 974
 975         cfg.html = this.html || cfg.html;
 976
 977         cfg.src = this.src || cfg.src;
 978
 979         if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) {
 980             cfg.cls += ' img-' + this.border;
 981         }
 982
 983         if(this.alt){
 984             cfg.alt = this.alt;
 985         }
 986
 987         if(this.href){
 988             var a = {
 989                 tag: 'a',
 990                 href: this.href,
 991                 cn: [
 992                     cfg
 993                 ]
 994             }
 995
 996             if(this.target){
 997                 a.target = this.target;
 998             }
 999
1000         }
1001
1002
1003         return (this.href) ? a : cfg;
1004     },
1005
1006     initEvents: function() {
1007
1008         if(!this.href){
1009             this.el.on('click', this.onClick, this);
1010         }
1011     },
1012
1013     onClick : function(e)
1014     {
1015         Roo.log('img onclick');
1016         this.fireEvent('click', this, e);
1017     }
1018
1019 });
1020
1021  /*
1022  * - LGPL
1023  *
1024  * header
1025  *
1026  */
1027
1028 /**
1029  * @class Roo.bootstrap.Header
1030  * @extends Roo.bootstrap.Component
1031  * Bootstrap Header class
1032  * @cfg {String} html content of header
1033  * @cfg {Number} level (1|2|3|4|5|6) default 1
1034  *
1035  * @constructor
1036  * Create a new Header
1037  * @param {Object} config The config object
1038  */
1039
1040
1041 Roo.bootstrap.Header  = function(config){
1042     Roo.bootstrap.Header.superclass.constructor.call(this, config);
1043 };
1044
1045 Roo.extend(Roo.bootstrap.Header, Roo.bootstrap.Component,  {
1046
1047     //href : false,
1048     html : false,
1049     level : 1,
1050
1051
1052
1053     getAutoCreate : function(){
1054
1055         var cfg = {
1056             tag: 'h' + (1 *this.level),
1057             html: this.html || 'fill in html'
1058         } ;
1059
1060         return cfg;
1061     }
1062
1063 });
1064
1065
1066
1067  /*
1068  * Based on:
1069  * Ext JS Library 1.1.1
1070  * Copyright(c) 2006-2007, Ext JS, LLC.
1071  *
1072  * Originally Released Under LGPL - original licence link has changed is not relivant.
1073  *
1074  * Fork - LGPL
1075  * <script type="text/javascript">
1076  */
1077
1078 /**
1079  * @class Roo.bootstrap.MenuMgr
1080  * Provides a common registry of all menu items on a page so that they can be easily accessed by id.
1081  * @singleton
1082  */
1083 Roo.bootstrap.MenuMgr = function(){
1084    var menus, active, groups = {}, attached = false, lastShow = new Date();
1085
1086    // private - called when first menu is created
1087    function init(){
1088        menus = {};
1089        active = new Roo.util.MixedCollection();
1090        Roo.get(document).addKeyListener(27, function(){
1091            if(active.length > 0){
1092                hideAll();
1093            }
1094        });
1095    }
1096
1097    // private
1098    function hideAll(){
1099        if(active && active.length > 0){
1100            var c = active.clone();
1101            c.each(function(m){
1102                m.hide();
1103            });
1104        }
1105    }
1106
1107    // private
1108    function onHide(m){
1109        active.remove(m);
1110        if(active.length < 1){
1111            Roo.get(document).un("mouseup", onMouseDown);
1112
1113            attached = false;
1114        }
1115    }
1116
1117    // private
1118    function onShow(m){
1119        var last = active.last();
1120        lastShow = new Date();
1121        active.add(m);
1122        if(!attached){
1123           Roo.get(document).on("mouseup", onMouseDown);
1124
1125            attached = true;
1126        }
1127        if(m.parentMenu){
1128           //m.getEl().setZIndex(parseInt(m.parentMenu.getEl().getStyle("z-index"), 10) + 3);
1129           m.parentMenu.activeChild = m;
1130        }else if(last && last.isVisible()){
1131           //m.getEl().setZIndex(parseInt(last.getEl().getStyle("z-index"), 10) + 3);
1132        }
1133    }
1134
1135    // private
1136    function onBeforeHide(m){
1137        if(m.activeChild){
1138            m.activeChild.hide();
1139        }
1140        if(m.autoHideTimer){
1141            clearTimeout(m.autoHideTimer);
1142            delete m.autoHideTimer;
1143        }
1144    }
1145
1146    // private
1147    function onBeforeShow(m){
1148        var pm = m.parentMenu;
1149        if(!pm && !m.allowOtherMenus){
1150            hideAll();
1151        }else if(pm && pm.activeChild && active != m){
1152            pm.activeChild.hide();
1153        }
1154    }
1155
1156    // private
1157    function onMouseDown(e){
1158         Roo.log("on MouseDown");
1159         if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu")){
1160            hideAll();
1161         }
1162
1163
1164    }
1165
1166    // private
1167    function onBeforeCheck(mi, state){
1168        if(state){
1169            var g = groups[mi.group];
1170            for(var i = 0, l = g.length; i < l; i++){
1171                if(g[i] != mi){
1172                    g[i].setChecked(false);
1173                }
1174            }
1175        }
1176    }
1177
1178    return {
1179
1180        /**
1181         * Hides all menus that are currently visible
1182         */
1183        hideAll : function(){
1184             hideAll();
1185        },
1186
1187        // private
1188        register : function(menu){
1189            if(!menus){
1190                init();
1191            }
1192            menus[menu.id] = menu;
1193            menu.on("beforehide", onBeforeHide);
1194            menu.on("hide", onHide);
1195            menu.on("beforeshow", onBeforeShow);
1196            menu.on("show", onShow);
1197            var g = menu.group;
1198            if(g && menu.events["checkchange"]){
1199                if(!groups[g]){
1200                    groups[g] = [];
1201                }
1202                groups[g].push(menu);
1203                menu.on("checkchange", onCheck);
1204            }
1205        },
1206
1207         /**
1208          * Returns a {@link Roo.menu.Menu} object
1209          * @param {String/Object} menu The string menu id, an existing menu object reference, or a Menu config that will
1210          * be used to generate and return a new Menu instance.
1211          */
1212        get : function(menu){
1213            if(typeof menu == "string"){ // menu id
1214                return menus[menu];
1215            }else if(menu.events){  // menu instance
1216                return menu;
1217            }
1218            /*else if(typeof menu.length == 'number'){ // array of menu items?
1219                return new Roo.bootstrap.Menu({items:menu});
1220            }else{ // otherwise, must be a config
1221                return new Roo.bootstrap.Menu(menu);
1222            }
1223            */
1224            return false;
1225        },
1226
1227        // private
1228        unregister : function(menu){
1229            delete menus[menu.id];
1230            menu.un("beforehide", onBeforeHide);
1231            menu.un("hide", onHide);
1232            menu.un("beforeshow", onBeforeShow);
1233            menu.un("show", onShow);
1234            var g = menu.group;
1235            if(g && menu.events["checkchange"]){
1236                groups[g].remove(menu);
1237                menu.un("checkchange", onCheck);
1238            }
1239        },
1240
1241        // private
1242        registerCheckable : function(menuItem){
1243            var g = menuItem.group;
1244            if(g){
1245                if(!groups[g]){
1246                    groups[g] = [];
1247                }
1248                groups[g].push(menuItem);
1249                menuItem.on("beforecheckchange", onBeforeCheck);
1250            }
1251        },
1252
1253        // private
1254        unregisterCheckable : function(menuItem){
1255            var g = menuItem.group;
1256            if(g){
1257                groups[g].remove(menuItem);
1258                menuItem.un("beforecheckchange", onBeforeCheck);
1259            }
1260        }
1261    };
1262 }();/*
1263  * - LGPL
1264  *
1265  * menu
1266  *
1267  */
1268
1269 /**
1270  * @class Roo.bootstrap.Menu
1271  * @extends Roo.bootstrap.Component
1272  * Bootstrap Menu class - container for MenuItems
1273  * @cfg {String} type type of menu
1274  *
1275  * @constructor
1276  * Create a new Menu
1277  * @param {Object} config The config object
1278  */
1279
1280
1281 Roo.bootstrap.Menu = function(config){
1282     Roo.bootstrap.Menu.superclass.constructor.call(this, config);
1283     if (this.registerMenu) {
1284         Roo.bootstrap.MenuMgr.register(this);
1285     }
1286     this.addEvents({
1287         /**
1288          * @event beforeshow
1289          * Fires before this menu is displayed
1290          * @param {Roo.menu.Menu} this
1291          */
1292         beforeshow : true,
1293         /**
1294          * @event beforehide
1295          * Fires before this menu is hidden
1296          * @param {Roo.menu.Menu} this
1297          */
1298         beforehide : true,
1299         /**
1300          * @event show
1301          * Fires after this menu is displayed
1302          * @param {Roo.menu.Menu} this
1303          */
1304         show : true,
1305         /**
1306          * @event hide
1307          * Fires after this menu is hidden
1308          * @param {Roo.menu.Menu} this
1309          */
1310         hide : true,
1311         /**
1312          * @event click
1313          * Fires when this menu is clicked (or when the enter key is pressed while it is active)
1314          * @param {Roo.menu.Menu} this
1315          * @param {Roo.menu.Item} menuItem The menu item that was clicked
1316          * @param {Roo.EventObject} e
1317          */
1318         click : true,
1319         /**
1320          * @event mouseover
1321          * Fires when the mouse is hovering over this menu
1322          * @param {Roo.menu.Menu} this
1323          * @param {Roo.EventObject} e
1324          * @param {Roo.menu.Item} menuItem The menu item that was clicked
1325          */
1326         mouseover : true,
1327         /**
1328          * @event mouseout
1329          * Fires when the mouse exits this menu
1330          * @param {Roo.menu.Menu} this
1331          * @param {Roo.EventObject} e
1332          * @param {Roo.menu.Item} menuItem The menu item that was clicked
1333          */
1334         mouseout : true,
1335         /**
1336          * @event itemclick
1337          * Fires when a menu item contained in this menu is clicked
1338          * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
1339          * @param {Roo.EventObject} e
1340          */
1341         itemclick: true
1342     });
1343     this.menuitems = new Roo.util.MixedCollection(false, function(o) { return o.el.id; });
1344 };
1345
1346 Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
1347
1348    /// html : false,
1349     //align : '',
1350     triggerEl : false,  // is this set by component builder? -- it should really be fetched from parent()???
1351     type: false,
1352     /**
1353      * @cfg {Boolean} registerMenu True (default) - means that clicking on screen etc. hides it.
1354      */
1355     registerMenu : true,
1356
1357     menuItems :false, // stores the menu items..
1358
1359     hidden:true,
1360
1361     parentMenu : false,
1362
1363     getChildContainer : function() {
1364         return this.el;
1365     },
1366
1367     getAutoCreate : function(){
1368
1369         //if (['right'].indexOf(this.align)!==-1) {
1370         //    cfg.cn[1].cls += ' pull-right'
1371         //}
1372         var cfg = {
1373             tag : 'ul',
1374             cls : 'dropdown-menu' ,
1375             style : 'z-index:1000'
1376
1377         }
1378
1379         if (this.type === 'submenu') {
1380             cfg.cls = 'submenu active'
1381         }
1382
1383         return cfg;
1384     },
1385     initEvents : function() {
1386
1387        // Roo.log("ADD event");
1388        // Roo.log(this.triggerEl.dom);
1389         this.triggerEl.on('click', this.onTriggerPress, this);
1390         this.triggerEl.addClass('dropdown-toggle');
1391         this.el.on(Roo.isTouch ? 'touchstart' : 'click'   , this.onClick, this);
1392
1393         this.el.on("mouseover", this.onMouseOver, this);
1394         this.el.on("mouseout", this.onMouseOut, this);
1395
1396
1397     },
1398     findTargetItem : function(e){
1399         var t = e.getTarget(".dropdown-menu-item", this.el,  true);
1400         if(!t){
1401             return false;
1402         }
1403         //Roo.log(t);         Roo.log(t.id);
1404         if(t && t.id){
1405             //Roo.log(this.menuitems);
1406             return this.menuitems.get(t.id);
1407
1408             //return this.items.get(t.menuItemId);
1409         }
1410
1411         return false;
1412     },
1413     onClick : function(e){
1414         Roo.log("menu.onClick");
1415         var t = this.findTargetItem(e);
1416         if(!t){
1417             return;
1418         }
1419         Roo.log(e);
1420         /*
1421         if (Roo.isTouch && e.type == 'touchstart' && t.menu  && !t.disabled) {
1422             if(t == this.activeItem && t.shouldDeactivate(e)){
1423                 this.activeItem.deactivate();
1424                 delete this.activeItem;
1425                 return;
1426             }
1427             if(t.canActivate){
1428                 this.setActiveItem(t, true);
1429             }
1430             return;
1431
1432
1433         }
1434         */
1435         Roo.log('pass click event');
1436
1437         t.onClick(e);
1438
1439         this.fireEvent("click", this, t, e);
1440
1441         this.hide();
1442     },
1443      onMouseOver : function(e){
1444         var t  = this.findTargetItem(e);
1445         //Roo.log(t);
1446         //if(t){
1447         //    if(t.canActivate && !t.disabled){
1448         //        this.setActiveItem(t, true);
1449         //    }
1450         //}
1451
1452         this.fireEvent("mouseover", this, e, t);
1453     },
1454     isVisible : function(){
1455         return !this.hidden;
1456     },
1457      onMouseOut : function(e){
1458         var t  = this.findTargetItem(e);
1459
1460         //if(t ){
1461         //    if(t == this.activeItem && t.shouldDeactivate(e)){
1462         //        this.activeItem.deactivate();
1463         //        delete this.activeItem;
1464         //    }
1465         //}
1466         this.fireEvent("mouseout", this, e, t);
1467     },
1468
1469
1470     /**
1471      * Displays this menu relative to another element
1472      * @param {String/HTMLElement/Roo.Element} element The element to align to
1473      * @param {String} position (optional) The {@link Roo.Element#alignTo} anchor position to use in aligning to
1474      * the element (defaults to this.defaultAlign)
1475      * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
1476      */
1477     show : function(el, pos, parentMenu){
1478         this.parentMenu = parentMenu;
1479         if(!this.el){
1480             this.render();
1481         }
1482         this.fireEvent("beforeshow", this);
1483         this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);
1484     },
1485      /**
1486      * Displays this menu at a specific xy position
1487      * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)
1488      * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
1489      */
1490     showAt : function(xy, parentMenu, /* private: */_e){
1491         this.parentMenu = parentMenu;
1492         if(!this.el){
1493             this.render();
1494         }
1495         if(_e !== false){
1496             this.fireEvent("beforeshow", this);
1497
1498             //xy = this.el.adjustForConstraints(xy);
1499         }
1500         //this.el.setXY(xy);
1501         //this.el.show();
1502         this.hideMenuItems();
1503         this.hidden = false;
1504         this.triggerEl.addClass('open');
1505         this.focus();
1506         this.fireEvent("show", this);
1507     },
1508
1509     focus : function(){
1510         return;
1511         if(!this.hidden){
1512             this.doFocus.defer(50, this);
1513         }
1514     },
1515
1516     doFocus : function(){
1517         if(!this.hidden){
1518             this.focusEl.focus();
1519         }
1520     },
1521
1522     /**
1523      * Hides this menu and optionally all parent menus
1524      * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
1525      */
1526     hide : function(deep){
1527
1528         this.hideMenuItems();
1529         if(this.el && this.isVisible()){
1530             this.fireEvent("beforehide", this);
1531             if(this.activeItem){
1532                 this.activeItem.deactivate();
1533                 this.activeItem = null;
1534             }
1535             this.triggerEl.removeClass('open');;
1536             this.hidden = true;
1537             this.fireEvent("hide", this);
1538         }
1539         if(deep === true && this.parentMenu){
1540             this.parentMenu.hide(true);
1541         }
1542     },
1543
1544     onTriggerPress  : function(e)
1545     {
1546
1547         Roo.log('trigger press');
1548         //Roo.log(e.getTarget());
1549        // Roo.log(this.triggerEl.dom);
1550         if (Roo.get(e.getTarget()).findParent('.dropdown-menu')) {
1551             return;
1552         }
1553         if (this.isVisible()) {
1554             Roo.log('hide');
1555             this.hide();
1556         } else {
1557             this.show(this.triggerEl, false, false);
1558         }
1559
1560
1561     },
1562
1563
1564
1565
1566     hideMenuItems : function()
1567     {
1568         //$(backdrop).remove()
1569         Roo.select('.open',true).each(function(aa) {
1570
1571             aa.removeClass('open');
1572           //var parent = getParent($(this))
1573           //var relatedTarget = { relatedTarget: this }
1574
1575            //$parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
1576           //if (e.isDefaultPrevented()) return
1577            //$parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
1578         })
1579     },
1580     addxtypeChild : function (tree, cntr) {
1581         var comp= Roo.bootstrap.Menu.superclass.addxtypeChild.call(this, tree, cntr);
1582
1583         this.menuitems.add(comp);
1584         return comp;
1585
1586     },
1587     getEl : function()
1588     {
1589         Roo.log(this.el);
1590         return this.el;
1591     }
1592 });
1593
1594
1595  /*
1596  * - LGPL
1597  *
1598  * menu item
1599  *
1600  */
1601
1602
1603 /**
1604  * @class Roo.bootstrap.MenuItem
1605  * @extends Roo.bootstrap.Component
1606  * Bootstrap MenuItem class
1607  * @cfg {String} html the menu label
1608  * @cfg {String} href the link
1609  * @cfg {Boolean} preventDefault (true | false) default true
1610  *
1611  *
1612  * @constructor
1613  * Create a new MenuItem
1614  * @param {Object} config The config object
1615  */
1616
1617
1618 Roo.bootstrap.MenuItem = function(config){
1619     Roo.bootstrap.MenuItem.superclass.constructor.call(this, config);
1620     this.addEvents({
1621         // raw events
1622         /**
1623          * @event click
1624          * The raw click event for the entire grid.
1625          * @param {Roo.EventObject} e
1626          */
1627         "click" : true
1628     });
1629 };
1630
1631 Roo.extend(Roo.bootstrap.MenuItem, Roo.bootstrap.Component,  {
1632
1633     href : false,
1634     html : false,
1635     preventDefault: true,
1636
1637     getAutoCreate : function(){
1638         var cfg= {
1639             tag: 'li',
1640         cls: 'dropdown-menu-item',
1641             cn: [
1642             {
1643                 tag : 'a',
1644                 href : '#',
1645                 html : 'Link'
1646             }
1647             ]
1648     };
1649
1650         cfg.cn[0].href = this.href || cfg.cn[0].href ;
1651         cfg.cn[0].html = this.html || cfg.cn[0].html ;
1652         return cfg;
1653     },
1654
1655     initEvents: function() {
1656
1657         //this.el.select('a').on('click', this.onClick, this);
1658
1659     },
1660     onClick : function(e)
1661     {
1662         Roo.log('item on click ');
1663         //if(this.preventDefault){
1664         //    e.preventDefault();
1665         //}
1666         //this.parent().hideMenuItems();
1667
1668         this.fireEvent('click', this, e);
1669     },
1670     getEl : function()
1671     {
1672         return this.el;
1673     }
1674 });
1675
1676
1677
1678  /*
1679  * - LGPL
1680  *
1681  * menu separator
1682  *
1683  */
1684
1685
1686 /**
1687  * @class Roo.bootstrap.MenuSeparator
1688  * @extends Roo.bootstrap.Component
1689  * Bootstrap MenuSeparator class
1690  *
1691  * @constructor
1692  * Create a new MenuItem
1693  * @param {Object} config The config object
1694  */
1695
1696
1697 Roo.bootstrap.MenuSeparator = function(config){
1698     Roo.bootstrap.MenuSeparator.superclass.constructor.call(this, config);
1699 };
1700
1701 Roo.extend(Roo.bootstrap.MenuSeparator, Roo.bootstrap.Component,  {
1702
1703     getAutoCreate : function(){
1704         var cfg = {
1705             cls: 'divider',
1706             tag : 'li'
1707         };
1708
1709         return cfg;
1710     }
1711
1712 });
1713
1714
1715
1716
1717 /*
1718 <div class="modal fade">
1719   <div class="modal-dialog">
1720     <div class="modal-content">
1721       <div class="modal-header">
1722         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
1723         <h4 class="modal-title">Modal title</h4>
1724       </div>
1725       <div class="modal-body">
1726         <p>One fine body&hellip;</p>
1727       </div>
1728       <div class="modal-footer">
1729         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
1730         <button type="button" class="btn btn-primary">Save changes</button>
1731       </div>
1732     </div><!-- /.modal-content -->
1733   </div><!-- /.modal-dialog -->
1734 </div><!-- /.modal -->
1735 */
1736 /*
1737  * - LGPL
1738  *
1739  * page contgainer.
1740  *
1741  */
1742
1743 /**
1744  * @class Roo.bootstrap.Modal
1745  * @extends Roo.bootstrap.Component
1746  * Bootstrap Modal class
1747  * @cfg {String} title Title of dialog
1748  * @cfg {Number} width width of dialog
1749  * @cfg {Array} buttons Array of buttons or standard button set..
1750  *
1751  * @constructor
1752  * Create a new Modal Dialog
1753  * @param {Object} config The config object
1754  */
1755
1756 Roo.bootstrap.Modal = function(config){
1757     Roo.bootstrap.Modal.superclass.constructor.call(this, config);
1758     this.addEvents({
1759         // raw events
1760         /**
1761          * @event btnclick
1762          * The raw btnclick event for the button
1763          * @param {Roo.EventObject} e
1764          */
1765         "btnclick" : true
1766     });
1767 };
1768
1769 Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
1770
1771     title : 'test dialog',
1772
1773     buttons : false,
1774
1775     width : false,
1776
1777     onRender : function(ct, position)
1778     {
1779         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
1780
1781         if(!this.el){
1782             var cfg = Roo.apply({},  this.getAutoCreate());
1783             cfg.id = Roo.id();
1784             //if(!cfg.name){
1785             //    cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
1786             //}
1787             //if (!cfg.name.length) {
1788             //    delete cfg.name;
1789            // }
1790             if (this.cls) {
1791                 cfg.cls += ' ' + this.cls;
1792             }
1793             if (this.style) {
1794                 cfg.style = this.style;
1795             }
1796             this.el = Roo.get(document.body).createChild(cfg, position);
1797         }
1798         //var type = this.el.dom.type;
1799
1800         if(this.tabIndex !== undefined){
1801             this.el.dom.setAttribute('tabIndex', this.tabIndex);
1802         }
1803
1804
1805
1806         this.maskEl = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
1807         this.maskEl.enableDisplayMode("block");
1808         this.maskEl.hide();
1809         //this.el.addClass("x-dlg-modal");
1810
1811         if (this.buttons) {
1812             Roo.each(this.buttons, function(bb) {
1813                 b = Roo.apply({}, bb);
1814                 b.xns = b.xns || Roo.bootstrap;
1815                 b.xtype = b.xtype || 'Button';
1816                 if (typeof(b.listeners) == 'undefined') {
1817                     b.listeners = { click : this.onButtonClick.createDelegate(this)  };
1818                 }
1819
1820                 var btn = Roo.factory(b);
1821
1822                 btn.onRender(this.el.select('.modal-footer').first());
1823
1824             },this);
1825         }
1826         // render the children.
1827         var nitems = [];
1828
1829         if(typeof(this.items) != 'undefined'){
1830             var items = this.items;
1831             delete this.items;
1832
1833             for(var i =0;i < items.length;i++) {
1834                 nitems.push(this.addxtype(Roo.apply({}, items[i])));
1835             }
1836         }
1837
1838         this.items = nitems;
1839         this.initEvents();
1840         //this.el.addClass([this.fieldClass, this.cls]);
1841
1842     },
1843     getAutoCreate : function(){
1844
1845
1846         var bdy = {
1847                 cls : 'modal-body',
1848                 html : this.html || ''
1849         };
1850
1851
1852         var modal = {
1853             cls: "modal fade",
1854             cn : [
1855                 {
1856                     cls: "modal-dialog",
1857                     cn : [
1858                         {
1859                             cls : "modal-content",
1860                             cn : [
1861                                 {
1862                                     cls : 'modal-header',
1863                                     cn : [
1864                                         {
1865                                             tag: 'button',
1866                                             cls : 'close',
1867                                             html : '&times'
1868                                         },
1869                                         {
1870                                             tag: 'h4',
1871                                             cls : 'modal-title',
1872                                             html : this.title
1873                                         }
1874
1875                                     ]
1876                                 },
1877                                 bdy,
1878                                 {
1879                                     cls : 'modal-footer'
1880                                 }
1881
1882
1883                             ]
1884
1885                         }
1886                     ]
1887
1888                 }
1889             ]
1890
1891
1892         };
1893
1894         if(this.width){
1895             modal.cn[0].style = 'width:' + this.width + 'px';
1896         }
1897
1898         return modal;
1899
1900     },
1901     getChildContainer : function() {
1902
1903          return this.el.select('.modal-body',true).first();
1904
1905     },
1906     getButtonContainer : function() {
1907          return this.el.select('.modal-footer',true).first();
1908
1909     },
1910     initEvents : function()
1911     {
1912         this.el.select('.modal-header .close').on('click', this.hide, this);
1913 //
1914 //        this.addxtype(this);
1915     },
1916     show : function() {
1917
1918         if (!this.rendered) {
1919             this.render();
1920         }
1921
1922         this.el.addClass('on');
1923         this.el.removeClass('fade');
1924         this.el.setStyle('display', 'block');
1925         Roo.get(document.body).addClass("x-body-masked");
1926         this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
1927         this.maskEl.show();
1928         this.el.setStyle('zIndex', '10001');
1929         this.fireEvent('show', this);
1930
1931
1932     },
1933     hide : function()
1934     {
1935         Roo.log('Modal hide?!');
1936         this.maskEl.hide();
1937         Roo.get(document.body).removeClass("x-body-masked");
1938         this.el.removeClass('on');
1939         this.el.addClass('fade');
1940         this.el.setStyle('display', 'none');
1941         this.fireEvent('hide', this);
1942     },
1943     onButtonClick: function(btn,e)
1944     {
1945         //Roo.log([a,b,c]);
1946         this.fireEvent('btnclick', btn.name, e);
1947     }
1948 });
1949
1950
1951 Roo.apply(Roo.bootstrap.Modal,  {
1952     /**
1953          * Button config that displays a single OK button
1954          * @type Object
1955          */
1956         OK :  [{
1957             name : 'ok',
1958             weight : 'primary',
1959             html : 'OK'
1960         }],
1961         /**
1962          * Button config that displays Yes and No buttons
1963          * @type Object
1964          */
1965         YESNO : [
1966             {
1967                 name  : 'no',
1968                 html : 'No'
1969             },
1970             {
1971                 name  :'yes',
1972                 weight : 'primary',
1973                 html : 'Yes'
1974             }
1975         ],
1976
1977         /**
1978          * Button config that displays OK and Cancel buttons
1979          * @type Object
1980          */
1981         OKCANCEL : [
1982             {
1983                name : 'cancel',
1984                 html : 'Cancel'
1985             },
1986             {
1987                 name : 'ok',
1988                 weight : 'primary',
1989                 html : 'OK'
1990             }
1991         ],
1992         /**
1993          * Button config that displays Yes, No and Cancel buttons
1994          * @type Object
1995          */
1996         YESNOCANCEL : [
1997             {
1998                 name : 'yes',
1999                 weight : 'primary',
2000                 html : 'Yes'
2001             },
2002             {
2003                 name : 'no',
2004                 html : 'No'
2005             },
2006             {
2007                 name : 'cancel',
2008                 html : 'Cancel'
2009             }
2010         ]
2011 });
2012  /*
2013  * - LGPL
2014  *
2015  * navbar
2016  *
2017  */
2018
2019 /**
2020  * @class Roo.bootstrap.Navbar
2021  * @extends Roo.bootstrap.Component
2022  * Bootstrap Navbar class
2023  * @cfg {Boolean} sidebar has side bar
2024  * @cfg {Boolean} bar is a bar?
2025  * @cfg {String} position (fixed-top|fixed-bottom|static-top) position
2026  * @cfg {String} brand what is brand
2027  * @cfg {Boolean} inverse is inverted color
2028  * @cfg {String} type (nav | pills | tabs)
2029  * @cfg {Boolean} arrangement stacked | justified
2030  * @cfg {String} align (left | right) alignment
2031  * @cfg {String} brand_href href of the brand
2032  * @cfg {Boolean} main (true|false) main nav bar? default false
2033  * @cfg {Boolean} loadMask (true|false) loadMask on the bar
2034  *
2035  *
2036  * @constructor
2037  * Create a new Navbar
2038  * @param {Object} config The config object
2039  */
2040
2041
2042 Roo.bootstrap.Navbar = function(config){
2043     Roo.bootstrap.Navbar.superclass.constructor.call(this, config);
2044 };
2045
2046 Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
2047
2048     sidebar: false,
2049
2050     bar: false,
2051     brand: '',
2052     inverse: false,
2053     position: '',
2054     align : false,
2055     type: 'nav',
2056     arrangement: '',
2057     brand_href: false,
2058     main : false,
2059     loadMask : false,
2060
2061     getAutoCreate : function(){
2062         var cfg = {
2063             cls : 'navbar'
2064         };
2065
2066         if (this.sidebar === true) {
2067             cfg = {
2068                 tag: 'div',
2069                 cls: 'sidebar-nav'
2070             };
2071             return cfg;
2072         }
2073
2074         if (this.bar === true) {
2075             cfg = {
2076                 tag: 'nav',
2077                 cls: 'navbar',
2078                 role: 'navigation',
2079                 cn: [
2080                     {
2081                         tag: 'div',
2082                         cls: 'navbar-header',
2083                         cn: [
2084                             {
2085                             tag: 'button',
2086                             type: 'button',
2087                             cls: 'navbar-toggle',
2088                             'data-toggle': 'collapse',
2089                             cn: [
2090                                 {
2091                                     tag: 'span',
2092                                     cls: 'sr-only',
2093                                     html: 'Toggle navigation'
2094                                 },
2095                                 {
2096                                     tag: 'span',
2097                                     cls: 'icon-bar'
2098                                 },
2099                                 {
2100                                     tag: 'span',
2101                                     cls: 'icon-bar'
2102                                 },
2103                                 {
2104                                     tag: 'span',
2105                                     cls: 'icon-bar'
2106                                 }
2107                             ]
2108                             }
2109                         ]
2110                     },
2111                     {
2112                     tag: 'div',
2113                     cls: 'collapse navbar-collapse'
2114                     }
2115                 ]
2116             };
2117
2118             cfg.cls += this.inverse ? ' navbar-inverse' : ' navbar-default';
2119
2120             if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) {
2121                 cfg.cls += ' navbar-' + this.position;
2122                 cfg.tag = this.position  == 'fixed-bottom' ? 'footer' : 'header';
2123             }
2124
2125             if (this.brand !== '') {
2126                 cfg.cn[0].cn.push({
2127                     tag: 'a',
2128                     href: this.brand_href ? this.brand_href : '#',
2129                     cls: 'navbar-brand',
2130                     cn: [
2131                     this.brand
2132                     ]
2133                 });
2134             }
2135
2136             if(this.main){
2137                 cfg.cls += ' main-nav';
2138             }
2139
2140
2141             return cfg;
2142
2143         } else if (this.bar === false) {
2144
2145         } else {
2146             Roo.log('Property \'bar\' in of Navbar must be either true or false')
2147         }
2148
2149         cfg.cn = [
2150             {
2151                 cls: 'nav',
2152                 tag : 'ul'
2153             }
2154         ];
2155
2156         if (['tabs','pills'].indexOf(this.type)!==-1) {
2157             cfg.cn[0].cls += ' nav-' + this.type
2158         } else {
2159             if (this.type!=='nav') {
2160             Roo.log('nav type must be nav/tabs/pills')
2161             }
2162             cfg.cn[0].cls += ' navbar-nav'
2163         }
2164
2165         if (['stacked','justified'].indexOf(this.arrangement)!==-1) {
2166             cfg.cn[0].cls += ' nav-' + this.arrangement;
2167         }
2168
2169         if (this.align === 'right') {
2170             cfg.cn[0].cls += ' navbar-right';
2171         }
2172         if (this.inverse) {
2173             cfg.cls += ' navbar-inverse';
2174
2175         }
2176
2177
2178         return cfg;
2179     },
2180
2181     initEvents :function ()
2182     {
2183         //Roo.log(this.el.select('.navbar-toggle',true));
2184         this.el.select('.navbar-toggle',true).on('click', function() {
2185            // Roo.log('click');
2186             this.el.select('.navbar-collapse',true).toggleClass('in');
2187         }, this);
2188
2189         var mark = {
2190             tag: "div",
2191             cls:"x-dlg-mask"
2192         }
2193
2194         this.maskEl = Roo.DomHelper.append(this.el, mark, true);
2195
2196         var size = this.el.getSize();
2197         this.maskEl.setSize(size.width, size.height);
2198         this.maskEl.enableDisplayMode("block");
2199         this.maskEl.hide();
2200
2201         if(this.loadMask){
2202             this.maskEl.show();
2203         }
2204     },
2205
2206
2207     getChildContainer : function()
2208     {
2209         if (this.bar === true) {
2210             return this.el.select('.collapse',true).first();
2211         }
2212
2213         return this.el;
2214     },
2215
2216     mask : function()
2217     {
2218         this.maskEl.show();
2219     },
2220
2221     unmask : function()
2222     {
2223         this.maskEl.hide();
2224     }
2225
2226 });
2227
2228
2229
2230  /*
2231  * - LGPL
2232  *
2233  * nav group
2234  *
2235  */
2236
2237 /**
2238  * @class Roo.bootstrap.NavGroup
2239  * @extends Roo.bootstrap.Component
2240  * Bootstrap NavGroup class
2241  * @cfg {String} align left | right
2242  * @cfg {Boolean} inverse false | true
2243  * @cfg {String} type (nav|pills|tab) default nav
2244  *
2245  * @constructor
2246  * Create a new nav group
2247  * @param {Object} config The config object
2248  */
2249
2250 Roo.bootstrap.NavGroup = function(config){
2251     Roo.bootstrap.NavGroup.superclass.constructor.call(this, config);
2252 };
2253
2254 Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component,  {
2255
2256     align: '',
2257     inverse: false,
2258     form: false,
2259     type: 'nav',
2260
2261     getAutoCreate : function(){
2262         var cfg = Roo.apply({}, Roo.bootstrap.NavGroup.superclass.getAutoCreate.call(this));
2263
2264         cfg = {
2265             tag : 'ul',
2266             cls: 'nav'
2267         }
2268
2269         if (['tabs','pills'].indexOf(this.type)!==-1) {
2270             cfg.cls += ' nav-' + this.type
2271         } else {
2272             if (this.type!=='nav') {
2273                 Roo.log('nav type must be nav/tabs/pills')
2274             }
2275             cfg.cls += ' navbar-nav'
2276         }
2277
2278         if (this.parent().sidebar === true) {
2279             cfg = {
2280                 tag: 'ul',
2281                 cls: 'dashboard-menu'
2282             }
2283
2284             return cfg;
2285         }
2286
2287         if (this.form === true) {
2288             cfg = {
2289                 tag: 'form',
2290                 cls: 'navbar-form'
2291             }
2292
2293             if (this.align === 'right') {
2294                 cfg.cls += ' navbar-right';
2295             } else {
2296                 cfg.cls += ' navbar-left';
2297             }
2298         }
2299
2300         if (this.align === 'right') {
2301             cfg.cls += ' navbar-right';
2302         }
2303
2304         if (this.inverse) {
2305             cfg.cls += ' navbar-inverse';
2306
2307         }
2308
2309
2310         return cfg;
2311     }
2312
2313 });
2314
2315
2316
2317  /*
2318  * - LGPL
2319  *
2320  * row
2321  *
2322  */
2323
2324 /**
2325  * @class Roo.bootstrap.Navbar.Item
2326  * @extends Roo.bootstrap.Component
2327  * Bootstrap Navbar.Button class
2328  * @cfg {String} href  link to
2329  * @cfg {String} html content of button
2330  * @cfg {String} badge text inside badge
2331  * @cfg {String} glyphicon name of glyphicon
2332  * @cfg {String} icon name of font awesome icon
2333  * @cfg {Boolena} active Is item active
2334  * @cfg {Boolean} preventDefault (true | false) default false
2335
2336  * @constructor
2337  * Create a new Navbar Button
2338  * @param {Object} config The config object
2339  */
2340 Roo.bootstrap.Navbar.Item = function(config){
2341     Roo.bootstrap.Navbar.Item.superclass.constructor.call(this, config);
2342     this.addEvents({
2343         // raw events
2344         /**
2345          * @event click
2346          * The raw click event for the entire grid.
2347          * @param {Roo.EventObject} e
2348          */
2349         "click" : true
2350     });
2351 };
2352
2353 Roo.extend(Roo.bootstrap.Navbar.Item, Roo.bootstrap.Component,  {
2354
2355     href: false,
2356     html: '',
2357     badge: '',
2358     icon: false,
2359     glyphicon: false,
2360     icon: false,
2361     active: false,
2362     preventDefault : false,
2363
2364     getAutoCreate : function(){
2365
2366         var cfg = Roo.apply({}, Roo.bootstrap.Navbar.Item.superclass.getAutoCreate.call(this));
2367
2368         if (this.parent().parent().sidebar === true) {
2369             cfg = {
2370                 tag: 'li',
2371                 cls: '',
2372                 cn: [
2373                     {
2374                         tag: 'p',
2375                         cls: ''
2376                     }
2377                 ]
2378             }
2379
2380             if (this.html) {
2381                 cfg.cn[0].html = this.html;
2382             }
2383
2384             if (this.active) {
2385                 this.cls += ' active';
2386             }
2387
2388             if (this.menu) {
2389                 cfg.cn[0].cls += ' dropdown-toggle';
2390                 cfg.cn[0].html = (cfg.cn[0].html || this.html) + '<span class="glyphicon glyphicon-chevron-down"></span>';
2391             }
2392
2393             if (this.href) {
2394                 cfg.cn[0].tag = 'a',
2395                 cfg.cn[0].href = this.href;
2396             }
2397
2398             if (this.glyphicon) {
2399                 cfg.cn[0].html = '<i class="glyphicon glyphicon-'+this.glyphicon+'"></i><span>' + cfg.cn[0].html || this.html + '</span>'
2400             }
2401
2402             if (this.icon) {
2403                 cfg.cn[0].html = '<i class="'+this.icon+'"></i><span>' + cfg.cn[0].html || this.html + '</span>'
2404             }
2405
2406             return cfg;
2407         }
2408
2409         cfg = {
2410             tag: 'li',
2411             cls: 'nav-item'
2412         }
2413
2414         if (this.active) {
2415             cfg.cls = typeof(cfg.cls) == 'undefined' ? 'active' : cfg.cls + ' active';
2416         }
2417
2418         cfg.cn = [
2419             {
2420                 tag: 'p',
2421                 html: 'Text'
2422             }
2423         ];
2424
2425         if (this.glyphicon) {
2426             if(cfg.html){cfg.html = ' ' + this.html};
2427             cfg.cn=[
2428                 {
2429                     tag: 'span',
2430                     cls: 'glyphicon glyphicon-' + this.glyphicon
2431                 }
2432             ];
2433         }
2434
2435         cfg.cn[0].html = this.html || cfg.cn[0].html ;
2436
2437         if (this.menu) {
2438             cfg.cn[0].tag='a';
2439             cfg.cn[0].href='#';
2440             cfg.cn[0].html += " <span class='caret'></span>";
2441         //}else if (!this.href) {
2442         //    cfg.cn[0].tag='p';
2443         //    cfg.cn[0].cls='navbar-text';
2444         } else {
2445             cfg.cn[0].tag='a';
2446             cfg.cn[0].href=this.href||'#';
2447             cfg.cn[0].html=this.html;
2448         }
2449
2450         if (this.badge !== '') {
2451
2452             cfg.cn[0].cn=[
2453                 cfg.cn[0].html + ' ',
2454                 {
2455                     tag: 'span',
2456                     cls: 'badge',
2457                     html: this.badge
2458                 }
2459             ];
2460             cfg.cn[0].html=''
2461         }
2462
2463         if (this.icon) {
2464             cfg.cn[0].html = '<i class="'+this.icon+'"></i><span>' + cfg.cn[0].html || this.html + '</span>'
2465         }
2466
2467         return cfg;
2468     },
2469     initEvents: function() {
2470        // Roo.log('init events?');
2471        // Roo.log(this.el.dom);
2472         this.el.select('a',true).on('click', this.onClick, this);
2473     },
2474
2475     onClick : function(e)
2476     {
2477         if(this.preventDefault){
2478             e.preventDefault();
2479         }
2480
2481         if(this.fireEvent('click', this, e) === false){
2482             return;
2483         };
2484
2485         if (['tabs','pills'].indexOf(this.parent().type)!==-1) {
2486             this.onTabsClick(e);
2487         }
2488     },
2489
2490     onTabsClick : function(e)
2491     {
2492         Roo.each(this.parent().el.select('.active',true).elements, function(v){
2493             v.removeClass('active');
2494         })
2495
2496         this.el.addClass('active');
2497
2498         if(this.href && this.href.substring(0,1) == '#'){
2499             var tab = Roo.select('[tabId=' + this.href + ']', true).first();
2500
2501             Roo.each(tab.findParent('.tab-content', 0, true).select('.active', true).elements, function(v){
2502                 v.removeClass('active');
2503             });
2504
2505             tab.addClass('active');
2506         }
2507     }
2508
2509 });
2510
2511
2512  /*
2513  * - LGPL
2514  *
2515  * row
2516  *
2517  */
2518
2519 /**
2520  * @class Roo.bootstrap.Row
2521  * @extends Roo.bootstrap.Component
2522  * Bootstrap Row class (contains columns...)
2523  *
2524  * @constructor
2525  * Create a new Row
2526  * @param {Object} config The config object
2527  */
2528
2529 Roo.bootstrap.Row = function(config){
2530     Roo.bootstrap.Row.superclass.constructor.call(this, config);
2531 };
2532
2533 Roo.extend(Roo.bootstrap.Row, Roo.bootstrap.Component,  {
2534
2535     getAutoCreate : function(){
2536        return {
2537             cls: 'row clearfix'
2538        };
2539     }
2540
2541
2542 });
2543
2544
2545
2546  /*
2547  * - LGPL
2548  *
2549  * element
2550  *
2551  */
2552
2553 /**
2554  * @class Roo.bootstrap.Element
2555  * @extends Roo.bootstrap.Component
2556  * Bootstrap Element class
2557  * @cfg {String} html contents of the element
2558  * @cfg {String} tag tag of the element
2559  * @cfg {String} cls class of the element
2560  *
2561  * @constructor
2562  * Create a new Element
2563  * @param {Object} config The config object
2564  */
2565
2566 Roo.bootstrap.Element = function(config){
2567     Roo.bootstrap.Element.superclass.constructor.call(this, config);
2568 };
2569
2570 Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component,  {
2571
2572     tag: 'div',
2573     cls: '',
2574     html: '',
2575
2576
2577     getAutoCreate : function(){
2578
2579         var cfg = {
2580             tag: this.tag,
2581             cls: this.cls,
2582             html: this.html
2583         }
2584
2585
2586
2587         return cfg;
2588     }
2589
2590 });
2591
2592
2593
2594  /*
2595  * - LGPL
2596  *
2597  * pagination
2598  *
2599  */
2600
2601 /**
2602  * @class Roo.bootstrap.Pagination
2603  * @extends Roo.bootstrap.Component
2604  * Bootstrap Pagination class
2605  * @cfg {String} size xs | sm | md | lg
2606  * @cfg {Boolean} inverse false | true
2607  *
2608  * @constructor
2609  * Create a new Pagination
2610  * @param {Object} config The config object
2611  */
2612
2613 Roo.bootstrap.Pagination = function(config){
2614     Roo.bootstrap.Pagination.superclass.constructor.call(this, config);
2615 };
2616
2617 Roo.extend(Roo.bootstrap.Pagination, Roo.bootstrap.Component,  {
2618
2619     cls: false,
2620     size: false,
2621     inverse: false,
2622
2623     getAutoCreate : function(){
2624         var cfg = {
2625             tag: 'ul',
2626                 cls: 'pagination'
2627         };
2628         if (this.inverse) {
2629             cfg.cls += ' inverse';
2630         }
2631         if (this.html) {
2632             cfg.html=this.html;
2633         }
2634         if (this.cls) {
2635             cfg.cls += " " + this.cls;
2636         }
2637         return cfg;
2638     }
2639
2640 });
2641
2642
2643
2644  /*
2645  * - LGPL
2646  *
2647  * Pagination item
2648  *
2649  */
2650
2651
2652 /**
2653  * @class Roo.bootstrap.PaginationItem
2654  * @extends Roo.bootstrap.Component
2655  * Bootstrap PaginationItem class
2656  * @cfg {String} html text
2657  * @cfg {String} href the link
2658  * @cfg {Boolean} preventDefault (true | false) default true
2659  * @cfg {Boolean} active (true | false) default false
2660  *
2661  *
2662  * @constructor
2663  * Create a new PaginationItem
2664  * @param {Object} config The config object
2665  */
2666
2667
2668 Roo.bootstrap.PaginationItem = function(config){
2669     Roo.bootstrap.PaginationItem.superclass.constructor.call(this, config);
2670     this.addEvents({
2671         // raw events
2672         /**
2673          * @event click
2674          * The raw click event for the entire grid.
2675          * @param {Roo.EventObject} e
2676          */
2677         "click" : true
2678     });
2679 };
2680
2681 Roo.extend(Roo.bootstrap.PaginationItem, Roo.bootstrap.Component,  {
2682
2683     href : false,
2684     html : false,
2685     preventDefault: true,
2686     active : false,
2687     cls : false,
2688
2689     getAutoCreate : function(){
2690         var cfg= {
2691             tag: 'li',
2692             cn: [
2693                 {
2694                     tag : 'a',
2695                     href : this.href ? this.href : '#',
2696                     html : this.html ? this.html : ''
2697                 }
2698             ]
2699         };
2700
2701         if(this.cls){
2702             cfg.cls = this.cls;
2703         }
2704
2705         if(this.active){
2706             cfg.cls = typeof(cfg.cls) !== 'undefined' ? cfg.cls + ' active' : 'active';
2707         }
2708
2709         return cfg;
2710     },
2711
2712     initEvents: function() {
2713
2714         this.el.on('click', this.onClick, this);
2715
2716     },
2717     onClick : function(e)
2718     {
2719         Roo.log('PaginationItem on click ');
2720         if(this.preventDefault){
2721             e.preventDefault();
2722         }
2723
2724         this.fireEvent('click', this, e);
2725     }
2726
2727 });
2728
2729
2730
2731  /*
2732  * - LGPL
2733  *
2734  * slider
2735  *
2736  */
2737
2738
2739 /**
2740  * @class Roo.bootstrap.Slider
2741  * @extends Roo.bootstrap.Component
2742  * Bootstrap Slider class
2743  *
2744  * @constructor
2745  * Create a new Slider
2746  * @param {Object} config The config object
2747  */
2748
2749 Roo.bootstrap.Slider = function(config){
2750     Roo.bootstrap.Slider.superclass.constructor.call(this, config);
2751 };
2752
2753 Roo.extend(Roo.bootstrap.Slider, Roo.bootstrap.Component,  {
2754
2755     getAutoCreate : function(){
2756
2757         var cfg = {
2758             tag: 'div',
2759             cls: 'slider slider-sample1 vertical-handler ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all',
2760             cn: [
2761                 {
2762                     tag: 'a',
2763                     cls: 'ui-slider-handle ui-state-default ui-corner-all'
2764                 }
2765             ]
2766         }
2767
2768         return cfg;
2769     }
2770
2771 });
2772
2773  /*
2774  * - LGPL
2775  *
2776  * table
2777  *
2778  */
2779
2780 /**
2781  * @class Roo.bootstrap.Table
2782  * @extends Roo.bootstrap.Component
2783  * Bootstrap Table class
2784  * @cfg {String} cls table class
2785  * @cfg {String} align (left|center|right) Specifies the alignment of a table according to surrounding text
2786  * @cfg {String} bgcolor Specifies the background color for a table
2787  * @cfg {Number} border Specifies whether the table cells should have borders or not
2788  * @cfg {Number} cellpadding Specifies the space between the cell wall and the cell content
2789  * @cfg {Number} cellspacing Specifies the space between cells
2790  * @cfg {String} frame Specifies which parts of the outside borders that should be visible
2791  * @cfg {String} rules Specifies which parts of the inside borders that should be visible
2792  * @cfg {String} sortable Specifies that the table should be sortable
2793  * @cfg {String} summary Specifies a summary of the content of a table
2794  * @cfg {Number} width Specifies the width of a table
2795  *
2796  * @cfg {boolean} striped Should the rows be alternative striped
2797  * @cfg {boolean} bordered Add borders to the table
2798  * @cfg {boolean} hover Add hover highlighting
2799  * @cfg {boolean} condensed Format condensed
2800  * @cfg {boolean} responsive Format condensed
2801  *
2802
2803
2804  *
2805  * @constructor
2806  * Create a new Table
2807  * @param {Object} config The config object
2808  */
2809
2810 Roo.bootstrap.Table = function(config){
2811     Roo.bootstrap.Table.superclass.constructor.call(this, config);
2812
2813     if (this.sm) {
2814         this.selModel = Roo.factory(this.sm, Roo.bootstrap.Table);
2815         this.sm = this.selModel;
2816         this.sm.xmodule = this.xmodule || false;
2817     }
2818     if (this.cm && typeof(this.cm.config) == 'undefined') {
2819         this.colModel = new Roo.bootstrap.Table.ColumnModel(this.cm);
2820         this.cm = this.colModel;
2821         this.cm.xmodule = this.xmodule || false;
2822     }
2823     if (this.store) {
2824         this.store= Roo.factory(this.store, Roo.data);
2825         this.ds = this.store;
2826         this.ds.xmodule = this.xmodule || false;
2827
2828     }
2829 };
2830
2831 Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
2832
2833     cls: false,
2834     align: false,
2835     bgcolor: false,
2836     border: false,
2837     cellpadding: false,
2838     cellspacing: false,
2839     frame: false,
2840     rules: false,
2841     sortable: false,
2842     summary: false,
2843     width: false,
2844     striped : false,
2845     bordered: false,
2846     hover:  false,
2847     condensed : false,
2848     responsive : false,
2849     sm : false,
2850     cm : false,
2851     store : false,
2852
2853     getAutoCreate : function(){
2854         var cfg = Roo.apply({}, Roo.bootstrap.Table.superclass.getAutoCreate.call(this));
2855
2856         cfg = {
2857             tag: 'table',
2858             cls : 'table',
2859             cn : []
2860         }
2861
2862         if (this.striped) {
2863             cfg.cls += ' table-striped';
2864         }
2865         if (this.hover) {
2866             cfg.cls += ' table-hover';
2867         }
2868         if (this.bordered) {
2869             cfg.cls += ' table-bordered';
2870         }
2871         if (this.condensed) {
2872             cfg.cls += ' table-condensed';
2873         }
2874         if (this.responsive) {
2875             cfg.cls += ' table-responsive';
2876         }
2877
2878
2879
2880
2881         if (this.cls) {
2882             cfg.cls+=  ' ' +this.cls;
2883         }
2884
2885         // this lot should be simplifed...
2886
2887         if (this.align) {
2888             cfg.align=this.align;
2889         }
2890         if (this.bgcolor) {
2891             cfg.bgcolor=this.bgcolor;
2892         }
2893         if (this.border) {
2894             cfg.border=this.border;
2895         }
2896         if (this.cellpadding) {
2897             cfg.cellpadding=this.cellpadding;
2898         }
2899         if (this.cellspacing) {
2900             cfg.cellspacing=this.cellspacing;
2901         }
2902         if (this.frame) {
2903             cfg.frame=this.frame;
2904         }
2905         if (this.rules) {
2906             cfg.rules=this.rules;
2907         }
2908         if (this.sortable) {
2909             cfg.sortable=this.sortable;
2910         }
2911         if (this.summary) {
2912             cfg.summary=this.summary;
2913         }
2914         if (this.width) {
2915             cfg.width=this.width;
2916         }
2917
2918         if(this.store || this.cm){
2919             cfg.cn.push(this.renderHeader());
2920             cfg.cn.push(this.renderBody());
2921             cfg.cn.push(this.renderFooter());
2922
2923             cfg.cls+=  ' TableGrid';
2924         }
2925
2926         return cfg;
2927     },
2928 //
2929 //    initTableGrid : function()
2930 //    {
2931 //        var cfg = {};
2932 //
2933 //        var header = {
2934 //            tag: 'thead',
2935 //            cn : []
2936 //        };
2937 //
2938 //        var cm = this.cm;
2939 //
2940 //        for(var i = 0, len = cm.getColumnCount(); i < len; i++){
2941 //            header.cn.push({
2942 //                tag: 'th',
2943 //                html: cm.getColumnHeader(i)
2944 //            })
2945 //        }
2946 //
2947 //        cfg.push(header);
2948 //
2949 //        return cfg;
2950 //
2951 //
2952 //    },
2953
2954     initEvents : function()
2955     {
2956         if(!this.store || !this.cm){
2957             return;
2958         }
2959
2960         Roo.log('initEvents with ds!!!!');
2961
2962 //        this.maskEl = Roo.DomHelper.append(this.el.select('.TableGrid', true).first(), {tag: "div", cls:"x-dlg-mask"}, true);
2963 //        this.maskEl.enableDisplayMode("block");
2964 //        this.maskEl.show();
2965
2966         this.store.on('load', this.onLoad, this);
2967         this.store.on('beforeload', this.onBeforeLoad, this);
2968
2969         this.store.load();
2970
2971
2972
2973     },
2974
2975     renderHeader : function()
2976     {
2977         var header = {
2978             tag: 'thead',
2979             cn : []
2980         };
2981
2982         var cm = this.cm;
2983
2984         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
2985             header.cn.push({
2986                 tag: 'th',
2987                 html: cm.getColumnHeader(i)
2988             })
2989         }
2990
2991         return header;
2992     },
2993
2994     renderBody : function()
2995     {
2996         var body = {
2997             tag: 'tbody',
2998             cn : []
2999         };
3000
3001         return body;
3002     },
3003
3004     renderFooter : function()
3005     {
3006         var footer = {
3007             tag: 'tfoot',
3008             cn : []
3009         };
3010
3011         return footer;
3012     },
3013
3014     onLoad : function()
3015     {
3016         Roo.log('ds onload');
3017
3018         var cm = this.cm;
3019
3020         var tbody = this.el.select('tbody', true).first();
3021
3022         var renders = [];
3023
3024         if(this.store.getCount() > 0){
3025             this.store.data.each(function(d){
3026                 var row = {
3027                     tag : 'tr',
3028                     cn : []
3029                 };
3030
3031                 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
3032                     var renderer = cm.getRenderer(i);
3033                     var value = '';
3034                     var id = Roo.id();
3035
3036                     if(typeof(renderer) !== 'undefined'){
3037                         value = renderer(d.data[cm.getDataIndex(i)], false, d);
3038                     }
3039
3040                     if(typeof(value) === 'object'){
3041                         renders.push({
3042                             id : id,
3043                             cfg : value
3044                         })
3045                     }
3046
3047                     row.cn.push({
3048                         tag: 'td',
3049                         id: id,
3050                         html: (typeof(value) === 'object') ? '' : value
3051                     })
3052
3053                 }
3054
3055                 tbody.createChild(row);
3056
3057             });
3058         }
3059
3060
3061         if(renders.length){
3062             var _this = this;
3063             Roo.each(renders, function(r){
3064                 _this.renderColumn(r);
3065             })
3066         }
3067 //
3068 //        if(this.loadMask){
3069 //            this.maskEl.hide();
3070 //        }
3071     },
3072
3073     onBeforeLoad : function()
3074     {
3075         Roo.log('ds onBeforeLoad');
3076
3077         this.clear();
3078
3079 //        if(this.loadMask){
3080 //            this.maskEl.show();
3081 //        }
3082     },
3083
3084     clear : function()
3085     {
3086         this.el.select('tbody', true).first().dom.innerHTML = '';
3087     },
3088
3089     getSelectionModel : function(){
3090         if(!this.selModel){
3091             this.selModel = new Roo.bootstrap.Table.RowSelectionModel();
3092         }
3093         return this.selModel;
3094     },
3095
3096     renderColumn : function(r)
3097     {
3098         var _this = this;
3099         r.cfg.render(Roo.get(r.id));
3100
3101         if(r.cfg.cn){
3102             Roo.each(r.cfg.cn, function(c){
3103                 var child = {
3104                     id: r.id,
3105                     cfg: c
3106                 }
3107                 _this.renderColumn(child);
3108             })
3109         }
3110     }
3111
3112 });
3113
3114
3115
3116  /*
3117  * - LGPL
3118  *
3119  * table cell
3120  *
3121  */
3122
3123 /**
3124  * @class Roo.bootstrap.TableCell
3125  * @extends Roo.bootstrap.Component
3126  * Bootstrap TableCell class
3127  * @cfg {String} html cell contain text
3128  * @cfg {String} cls cell class
3129  * @cfg {String} tag cell tag (td|th) default td
3130  * @cfg {String} abbr Specifies an abbreviated version of the content in a cell
3131  * @cfg {String} align Aligns the content in a cell
3132  * @cfg {String} axis Categorizes cells
3133  * @cfg {String} bgcolor Specifies the background color of a cell
3134  * @cfg {Number} charoff Sets the number of characters the content will be aligned from the character specified by the char attribute
3135  * @cfg {Number} colspan Specifies the number of columns a cell should span
3136  * @cfg {String} headers Specifies one or more header cells a cell is related to
3137  * @cfg {Number} height Sets the height of a cell
3138  * @cfg {String} nowrap Specifies that the content inside a cell should not wrap
3139  * @cfg {Number} rowspan Sets the number of rows a cell should span
3140  * @cfg {String} scope Defines a way to associate header cells and data cells in a table
3141  * @cfg {String} valign Vertical aligns the content in a cell
3142  * @cfg {Number} width Specifies the width of a cell
3143  *
3144  * @constructor
3145  * Create a new TableCell
3146  * @param {Object} config The config object
3147  */
3148
3149 Roo.bootstrap.TableCell = function(config){
3150     Roo.bootstrap.TableCell.superclass.constructor.call(this, config);
3151 };
3152
3153 Roo.extend(Roo.bootstrap.TableCell, Roo.bootstrap.Component,  {
3154
3155     html: false,
3156     cls: false,
3157     tag: false,
3158     abbr: false,
3159     align: false,
3160     axis: false,
3161     bgcolor: false,
3162     charoff: false,
3163     colspan: false,
3164     headers: false,
3165     height: false,
3166     nowrap: false,
3167     rowspan: false,
3168     scope: false,
3169     valign: false,
3170     width: false,
3171
3172
3173     getAutoCreate : function(){
3174         var cfg = Roo.apply({}, Roo.bootstrap.TableCell.superclass.getAutoCreate.call(this));
3175
3176         cfg = {
3177             tag: 'td'
3178         }
3179
3180         if(this.tag){
3181             cfg.tag = this.tag;
3182         }
3183
3184         if (this.html) {
3185             cfg.html=this.html
3186         }
3187         if (this.cls) {
3188             cfg.cls=this.cls
3189         }
3190         if (this.abbr) {
3191             cfg.abbr=this.abbr
3192         }
3193         if (this.align) {
3194             cfg.align=this.align
3195         }
3196         if (this.axis) {
3197             cfg.axis=this.axis
3198         }
3199         if (this.bgcolor) {
3200             cfg.bgcolor=this.bgcolor
3201         }
3202         if (this.charoff) {
3203             cfg.charoff=this.charoff
3204         }
3205         if (this.colspan) {
3206             cfg.colspan=this.colspan
3207         }
3208         if (this.headers) {
3209             cfg.headers=this.headers
3210         }
3211         if (this.height) {
3212             cfg.height=this.height
3213         }
3214         if (this.nowrap) {
3215             cfg.nowrap=this.nowrap
3216         }
3217         if (this.rowspan) {
3218             cfg.rowspan=this.rowspan
3219         }
3220         if (this.scope) {
3221             cfg.scope=this.scope
3222         }
3223         if (this.valign) {
3224             cfg.valign=this.valign
3225         }
3226         if (this.width) {
3227             cfg.width=this.width
3228         }
3229
3230
3231         return cfg;
3232     }
3233
3234 });
3235
3236
3237
3238  /*
3239  * - LGPL
3240  *
3241  * table row
3242  *
3243  */
3244
3245 /**
3246  * @class Roo.bootstrap.TableRow
3247  * @extends Roo.bootstrap.Component
3248  * Bootstrap TableRow class
3249  * @cfg {String} cls row class
3250  * @cfg {String} align Aligns the content in a table row
3251  * @cfg {String} bgcolor Specifies a background color for a table row
3252  * @cfg {Number} charoff Sets the number of characters the content will be aligned from the character specified by the char attribute
3253  * @cfg {String} valign Vertical aligns the content in a table row
3254  *
3255  * @constructor
3256  * Create a new TableRow
3257  * @param {Object} config The config object
3258  */
3259
3260 Roo.bootstrap.TableRow = function(config){
3261     Roo.bootstrap.TableRow.superclass.constructor.call(this, config);
3262 };
3263
3264 Roo.extend(Roo.bootstrap.TableRow, Roo.bootstrap.Component,  {
3265
3266     cls: false,
3267     align: false,
3268     bgcolor: false,
3269     charoff: false,
3270     valign: false,
3271
3272     getAutoCreate : function(){
3273         var cfg = Roo.apply({}, Roo.bootstrap.TableRow.superclass.getAutoCreate.call(this));
3274
3275         cfg = {
3276             tag: 'tr'
3277         }
3278
3279         if(this.cls){
3280             cfg.cls = this.cls;
3281         }
3282         if(this.align){
3283             cfg.align = this.align;
3284         }
3285         if(this.bgcolor){
3286             cfg.bgcolor = this.bgcolor;
3287         }
3288         if(this.charoff){
3289             cfg.charoff = this.charoff;
3290         }
3291         if(this.valign){
3292             cfg.valign = this.valign;
3293         }
3294
3295         return cfg;
3296     }
3297
3298 });
3299
3300
3301
3302  /*
3303  * - LGPL
3304  *
3305  * table body
3306  *
3307  */
3308
3309 /**
3310  * @class Roo.bootstrap.TableBody
3311  * @extends Roo.bootstrap.Component
3312  * Bootstrap TableBody class
3313  * @cfg {String} cls element class
3314  * @cfg {String} tag element tag (thead|tbody|tfoot) default tbody
3315  * @cfg {String} align Aligns the content inside the element
3316  * @cfg {Number} charoff Sets the number of characters the content inside the element will be aligned from the character specified by the char attribute
3317  * @cfg {String} valign Vertical aligns the content inside the <tbody> element
3318  *
3319  * @constructor
3320  * Create a new TableBody
3321  * @param {Object} config The config object
3322  */
3323
3324 Roo.bootstrap.TableBody = function(config){
3325     Roo.bootstrap.TableBody.superclass.constructor.call(this, config);
3326 };
3327
3328 Roo.extend(Roo.bootstrap.TableBody, Roo.bootstrap.Component,  {
3329
3330     cls: false,
3331     tag: false,
3332     align: false,
3333     charoff: false,
3334     valign: false,
3335
3336     getAutoCreate : function(){
3337         var cfg = Roo.apply({}, Roo.bootstrap.TableBody.superclass.getAutoCreate.call(this));
3338
3339         cfg = {
3340             tag: 'tbody'
3341         }
3342
3343         if (this.cls) {
3344             cfg.cls=this.cls
3345         }
3346         if(this.tag){
3347             cfg.tag = this.tag;
3348         }
3349
3350         if(this.align){
3351             cfg.align = this.align;
3352         }
3353         if(this.charoff){
3354             cfg.charoff = this.charoff;
3355         }
3356         if(this.valign){
3357             cfg.valign = this.valign;
3358         }
3359
3360         return cfg;
3361     }
3362
3363
3364 //    initEvents : function()
3365 //    {
3366 //
3367 //        if(!this.store){
3368 //            return;
3369 //        }
3370 //
3371 //        this.store = Roo.factory(this.store, Roo.data);
3372 //        this.store.on('load', this.onLoad, this);
3373 //
3374 //        this.store.load();
3375 //
3376 //    },
3377 //
3378 //    onLoad: function ()
3379 //    {
3380 //        this.fireEvent('load', this);
3381 //    }
3382 //
3383 //
3384 });
3385
3386
3387
3388  /*
3389  * Based on:
3390  * Ext JS Library 1.1.1
3391  * Copyright(c) 2006-2007, Ext JS, LLC.
3392  *
3393  * Originally Released Under LGPL - original licence link has changed is not relivant.
3394  *
3395  * Fork - LGPL
3396  * <script type="text/javascript">
3397  */
3398
3399 // as we use this in bootstrap.
3400 Roo.namespace('Roo.form');
3401  /**
3402  * @class Roo.form.Action
3403  * Internal Class used to handle form actions
3404  * @constructor
3405  * @param {Roo.form.BasicForm} el The form element or its id
3406  * @param {Object} config Configuration options
3407  */
3408
3409
3410
3411 // define the action interface
3412 Roo.form.Action = function(form, options){
3413     this.form = form;
3414     this.options = options || {};
3415 };
3416 /**
3417  * Client Validation Failed
3418  * @const
3419  */
3420 Roo.form.Action.CLIENT_INVALID = 'client';
3421 /**
3422  * Server Validation Failed
3423  * @const
3424  */
3425 Roo.form.Action.SERVER_INVALID = 'server';
3426  /**
3427  * Connect to Server Failed
3428  * @const
3429  */
3430 Roo.form.Action.CONNECT_FAILURE = 'connect';
3431 /**
3432  * Reading Data from Server Failed
3433  * @const
3434  */
3435 Roo.form.Action.LOAD_FAILURE = 'load';
3436
3437 Roo.form.Action.prototype = {
3438     type : 'default',
3439     failureType : undefined,
3440     response : undefined,
3441     result : undefined,
3442
3443     // interface method
3444     run : function(options){
3445
3446     },
3447
3448     // interface method
3449     success : function(response){
3450
3451     },
3452
3453     // interface method
3454     handleResponse : function(response){
3455
3456     },
3457
3458     // default connection failure
3459     failure : function(response){
3460
3461         this.response = response;
3462         this.failureType = Roo.form.Action.CONNECT_FAILURE;
3463         this.form.afterAction(this, false);
3464     },
3465
3466     processResponse : function(response){
3467         this.response = response;
3468         if(!response.responseText){
3469             return true;
3470         }
3471         this.result = this.handleResponse(response);
3472         return this.result;
3473     },
3474
3475     // utility functions used internally
3476     getUrl : function(appendParams){
3477         var url = this.options.url || this.form.url || this.form.el.dom.action;
3478         if(appendParams){
3479             var p = this.getParams();
3480             if(p){
3481                 url += (url.indexOf('?') != -1 ? '&' : '?') + p;
3482             }
3483         }
3484         return url;
3485     },
3486
3487     getMethod : function(){
3488         return (this.options.method || this.form.method || this.form.el.dom.method || 'POST').toUpperCase();
3489     },
3490
3491     getParams : function(){
3492         var bp = this.form.baseParams;
3493         var p = this.options.params;
3494         if(p){
3495             if(typeof p == "object"){
3496                 p = Roo.urlEncode(Roo.applyIf(p, bp));
3497             }else if(typeof p == 'string' && bp){
3498                 p += '&' + Roo.urlEncode(bp);
3499             }
3500         }else if(bp){
3501             p = Roo.urlEncode(bp);
3502         }
3503         return p;
3504     },
3505
3506     createCallback : function(){
3507         return {
3508             success: this.success,
3509             failure: this.failure,
3510             scope: this,
3511             timeout: (this.form.timeout*1000),
3512             upload: this.form.fileUpload ? this.success : undefined
3513         };
3514     }
3515 };
3516
3517 Roo.form.Action.Submit = function(form, options){
3518     Roo.form.Action.Submit.superclass.constructor.call(this, form, options);
3519 };
3520
3521 Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
3522     type : 'submit',
3523
3524     haveProgress : false,
3525     uploadComplete : false,
3526
3527     // uploadProgress indicator.
3528     uploadProgress : function()
3529     {
3530         if (!this.form.progressUrl) {
3531             return;
3532         }
3533
3534         if (!this.haveProgress) {
3535             Roo.MessageBox.progress("Uploading", "Uploading");
3536         }
3537         if (this.uploadComplete) {
3538            Roo.MessageBox.hide();
3539            return;
3540         }
3541
3542         this.haveProgress = true;
3543
3544         var uid = this.form.findField('UPLOAD_IDENTIFIER').getValue();
3545
3546         var c = new Roo.data.Connection();
3547         c.request({
3548             url : this.form.progressUrl,
3549             params: {
3550                 id : uid
3551             },
3552             method: 'GET',
3553             success : function(req){
3554                //console.log(data);
3555                 var rdata = false;
3556                 var edata;
3557                 try  {
3558                    rdata = Roo.decode(req.responseText)
3559                 } catch (e) {
3560                     Roo.log("Invalid data from server..");
3561                     Roo.log(edata);
3562                     return;
3563                 }
3564                 if (!rdata || !rdata.success) {
3565                     Roo.log(rdata);
3566                     Roo.MessageBox.alert(Roo.encode(rdata));
3567                     return;
3568                 }
3569                 var data = rdata.data;
3570
3571                 if (this.uploadComplete) {
3572                    Roo.MessageBox.hide();
3573                    return;
3574                 }
3575
3576                 if (data){
3577                     Roo.MessageBox.updateProgress(data.bytes_uploaded/data.bytes_total,
3578                        Math.floor((data.bytes_total - data.bytes_uploaded)/1000) + 'k remaining'
3579                     );
3580                 }
3581                 this.uploadProgress.defer(2000,this);
3582             },
3583
3584             failure: function(data) {
3585                 Roo.log('progress url failed ');
3586                 Roo.log(data);
3587             },
3588             scope : this
3589         });
3590
3591     },
3592
3593
3594     run : function()
3595     {
3596         // run get Values on the form, so it syncs any secondary forms.
3597         this.form.getValues();
3598
3599         var o = this.options;
3600         var method = this.getMethod();
3601         var isPost = method == 'POST';
3602         if(o.clientValidation === false || this.form.isValid()){
3603
3604             if (this.form.progressUrl) {
3605                 this.form.findField('UPLOAD_IDENTIFIER').setValue(
3606                     (new Date() * 1) + '' + Math.random());
3607
3608             }
3609
3610
3611             Roo.Ajax.request(Roo.apply(this.createCallback(), {
3612                 form:this.form.el.dom,
3613                 url:this.getUrl(!isPost),
3614                 method: method,
3615                 params:isPost ? this.getParams() : null,
3616                 isUpload: this.form.fileUpload
3617             }));
3618
3619             this.uploadProgress();
3620
3621         }else if (o.clientValidation !== false){ // client validation failed
3622             this.failureType = Roo.form.Action.CLIENT_INVALID;
3623             this.form.afterAction(this, false);
3624         }
3625     },
3626
3627     success : function(response)
3628     {
3629         this.uploadComplete= true;
3630         if (this.haveProgress) {
3631             Roo.MessageBox.hide();
3632         }
3633
3634
3635         var result = this.processResponse(response);
3636         if(result === true || result.success){
3637             this.form.afterAction(this, true);
3638             return;
3639         }
3640         if(result.errors){
3641             this.form.markInvalid(result.errors);
3642             this.failureType = Roo.form.Action.SERVER_INVALID;
3643         }
3644         this.form.afterAction(this, false);
3645     },
3646     failure : function(response)
3647     {
3648         this.uploadComplete= true;
3649         if (this.haveProgress) {
3650             Roo.MessageBox.hide();
3651         }
3652
3653         this.response = response;
3654         this.failureType = Roo.form.Action.CONNECT_FAILURE;
3655         this.form.afterAction(this, false);
3656     },
3657
3658     handleResponse : function(response){
3659         if(this.form.errorReader){
3660             var rs = this.form.errorReader.read(response);
3661             var errors = [];
3662             if(rs.records){
3663                 for(var i = 0, len = rs.records.length; i < len; i++) {
3664                     var r = rs.records[i];
3665                     errors[i] = r.data;
3666                 }
3667             }
3668             if(errors.length < 1){
3669                 errors = null;
3670             }
3671             return {
3672                 success : rs.success,
3673                 errors : errors
3674             };
3675         }
3676         var ret = false;
3677         try {
3678             ret = Roo.decode(response.responseText);
3679         } catch (e) {
3680             ret = {
3681                 success: false,
3682                 errorMsg: "Failed to read server message: " + (response ? response.responseText : ' - no message'),
3683                 errors : []
3684             };
3685         }
3686         return ret;
3687
3688     }
3689 });
3690
3691
3692 Roo.form.Action.Load = function(form, options){
3693     Roo.form.Action.Load.superclass.constructor.call(this, form, options);
3694     this.reader = this.form.reader;
3695 };
3696
3697 Roo.extend(Roo.form.Action.Load, Roo.form.Action, {
3698     type : 'load',
3699
3700     run : function(){
3701
3702         Roo.Ajax.request(Roo.apply(
3703                 this.createCallback(), {
3704                     method:this.getMethod(),
3705                     url:this.getUrl(false),
3706                     params:this.getParams()
3707         }));
3708     },
3709
3710     success : function(response){
3711
3712         var result = this.processResponse(response);
3713         if(result === true || !result.success || !result.data){
3714             this.failureType = Roo.form.Action.LOAD_FAILURE;
3715             this.form.afterAction(this, false);
3716             return;
3717         }
3718         this.form.clearInvalid();
3719         this.form.setValues(result.data);
3720         this.form.afterAction(this, true);
3721     },
3722
3723     handleResponse : function(response){
3724         if(this.form.reader){
3725             var rs = this.form.reader.read(response);
3726             var data = rs.records && rs.records[0] ? rs.records[0].data : null;
3727             return {
3728                 success : rs.success,
3729                 data : data
3730             };
3731         }
3732         return Roo.decode(response.responseText);
3733     }
3734 });
3735
3736 Roo.form.Action.ACTION_TYPES = {
3737     'load' : Roo.form.Action.Load,
3738     'submit' : Roo.form.Action.Submit
3739 };/*
3740  * - LGPL
3741  *
3742  * form
3743  *
3744  */
3745
3746 /**
3747  * @class Roo.bootstrap.Form
3748  * @extends Roo.bootstrap.Component
3749  * Bootstrap Form class
3750  * @cfg {String} method  GET | POST (default POST)
3751  * @cfg {String} labelAlign top | left (default top)
3752   * @cfg {String} align left  | right - for navbars
3753
3754  *
3755  * @constructor
3756  * Create a new Form
3757  * @param {Object} config The config object
3758  */
3759
3760
3761 Roo.bootstrap.Form = function(config){
3762     Roo.bootstrap.Form.superclass.constructor.call(this, config);
3763     this.addEvents({
3764         /**
3765          * @event clientvalidation
3766          * If the monitorValid config option is true, this event fires repetitively to notify of valid state
3767          * @param {Form} this
3768          * @param {Boolean} valid true if the form has passed client-side validation
3769          */
3770         clientvalidation: true,
3771         /**
3772          * @event beforeaction
3773          * Fires before any action is performed. Return false to cancel the action.
3774          * @param {Form} this
3775          * @param {Action} action The action to be performed
3776          */
3777         beforeaction: true,
3778         /**
3779          * @event actionfailed
3780          * Fires when an action fails.
3781          * @param {Form} this
3782          * @param {Action} action The action that failed
3783          */
3784         actionfailed : true,
3785         /**
3786          * @event actioncomplete
3787          * Fires when an action is completed.
3788          * @param {Form} this
3789          * @param {Action} action The action that completed
3790          */
3791         actioncomplete : true
3792     });
3793
3794 };
3795
3796 Roo.extend(Roo.bootstrap.Form, Roo.bootstrap.Component,  {
3797
3798      /**
3799      * @cfg {String} method
3800      * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
3801      */
3802     method : 'POST',
3803     /**
3804      * @cfg {String} url
3805      * The URL to use for form actions if one isn't supplied in the action options.
3806      */
3807     /**
3808      * @cfg {Boolean} fileUpload
3809      * Set to true if this form is a file upload.
3810      */
3811
3812     /**
3813      * @cfg {Object} baseParams
3814      * Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
3815      */
3816
3817     /**
3818      * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
3819      */
3820     timeout: 30,
3821     /**
3822      * @cfg {Sting} align (left|right) for navbar forms
3823      */
3824     align : 'left',
3825
3826     // private
3827     activeAction : null,
3828
3829     /**
3830      * By default wait messages are displayed with Roo.MessageBox.wait. You can target a specific
3831      * element by passing it or its id or mask the form itself by passing in true.
3832      * @type Mixed
3833      */
3834     waitMsgTarget : false,
3835
3836
3837
3838     /**
3839      * By default wait messages are displayed with Roo.MessageBox.wait. You can target a specific
3840      * element by passing it or its id or mask the form itself by passing in true.
3841      * @type Mixed
3842      */
3843
3844     getAutoCreate : function(){
3845
3846         var cfg = {
3847             tag: 'form',
3848             method : this.method || 'POST',
3849             id : this.id || Roo.id(),
3850             cls : ''
3851         }
3852         if (this.parent().xtype.match(/^Nav/)) {
3853             cfg.cls = 'navbar-form navbar-' + this.align;
3854
3855         }
3856
3857         if (this.labelAlign == 'left' ) {
3858             cfg.cls += ' form-horizontal';
3859         }
3860
3861
3862         return cfg;
3863     },
3864     initEvents : function()
3865     {
3866         this.el.on('submit', this.onSubmit, this);
3867
3868
3869     },
3870     // private
3871     onSubmit : function(e){
3872         e.stopEvent();
3873     },
3874
3875      /**
3876      * Returns true if client-side validation on the form is successful.
3877      * @return Boolean
3878      */
3879     isValid : function(){
3880         var items = this.getItems();
3881         var valid = true;
3882         items.each(function(f){
3883            if(!f.validate()){
3884                valid = false;
3885
3886            }
3887         });
3888         return valid;
3889     },
3890     /**
3891      * Returns true if any fields in this form have changed since their original load.
3892      * @return Boolean
3893      */
3894     isDirty : function(){
3895         var dirty = false;
3896         var items = this.getItems();
3897         items.each(function(f){
3898            if(f.isDirty()){
3899                dirty = true;
3900                return false;
3901            }
3902            return true;
3903         });
3904         return dirty;
3905     },
3906      /**
3907      * Performs a predefined action (submit or load) or custom actions you define on this form.
3908      * @param {String} actionName The name of the action type
3909      * @param {Object} options (optional) The options to pass to the action.  All of the config options listed
3910      * below are supported by both the submit and load actions unless otherwise noted (custom actions could also
3911      * accept other config options):
3912      * <pre>
3913 Property          Type             Description
3914 ----------------  ---------------  ----------------------------------------------------------------------------------
3915 url               String           The url for the action (defaults to the form's url)
3916 method            String           The form method to use (defaults to the form's method, or POST if not defined)
3917 params            String/Object    The params to pass (defaults to the form's baseParams, or none if not defined)
3918 clientValidation  Boolean          Applies to submit only.  Pass true to call form.isValid() prior to posting to
3919                                    validate the form on the client (defaults to false)
3920      * </pre>
3921      * @return {BasicForm} this
3922      */
3923     doAction : function(action, options){
3924         if(typeof action == 'string'){
3925             action = new Roo.form.Action.ACTION_TYPES[action](this, options);
3926         }
3927         if(this.fireEvent('beforeaction', this, action) !== false){
3928             this.beforeAction(action);
3929             action.run.defer(100, action);
3930         }
3931         return this;
3932     },
3933
3934     // private
3935     beforeAction : function(action){
3936         var o = action.options;
3937
3938         // not really supported yet.. ??
3939
3940         //if(this.waitMsgTarget === true){
3941             this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
3942         //}else if(this.waitMsgTarget){
3943         //    this.waitMsgTarget = Roo.get(this.waitMsgTarget);
3944         //    this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
3945         //}else {
3946         //    Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...');
3947        // }
3948
3949     },
3950
3951     // private
3952     afterAction : function(action, success){
3953         this.activeAction = null;
3954         var o = action.options;
3955
3956         //if(this.waitMsgTarget === true){
3957             this.el.unmask();
3958         //}else if(this.waitMsgTarget){
3959         //    this.waitMsgTarget.unmask();
3960         //}else{
3961         //    Roo.MessageBox.updateProgress(1);
3962         //    Roo.MessageBox.hide();
3963        // }
3964         //
3965         if(success){
3966             if(o.reset){
3967                 this.reset();
3968             }
3969             Roo.callback(o.success, o.scope, [this, action]);
3970             this.fireEvent('actioncomplete', this, action);
3971
3972         }else{
3973
3974             // failure condition..
3975             // we have a scenario where updates need confirming.
3976             // eg. if a locking scenario exists..
3977             // we look for { errors : { needs_confirm : true }} in the response.
3978             if (
3979                 (typeof(action.result) != 'undefined')  &&
3980                 (typeof(action.result.errors) != 'undefined')  &&
3981                 (typeof(action.result.errors.needs_confirm) != 'undefined')
3982            ){
3983                 var _t = this;
3984                 Roo.log("not supported yet");
3985                  /*
3986
3987                 Roo.MessageBox.confirm(
3988                     "Change requires confirmation",
3989                     action.result.errorMsg,
3990                     function(r) {
3991                         if (r != 'yes') {
3992                             return;
3993                         }
3994                         _t.doAction('submit', { params :  { _submit_confirmed : 1 } }  );
3995                     }
3996
3997                 );
3998                 */
3999
4000
4001                 return;
4002             }
4003
4004             Roo.callback(o.failure, o.scope, [this, action]);
4005             // show an error message if no failed handler is set..
4006             if (!this.hasListener('actionfailed')) {
4007                 Roo.log("need to add dialog support");
4008                 /*
4009                 Roo.MessageBox.alert("Error",
4010                     (typeof(action.result) != 'undefined' && typeof(action.result.errorMsg) != 'undefined') ?
4011                         action.result.errorMsg :
4012                         "Saving Failed, please check your entries or try again"
4013                 );
4014                 */
4015             }
4016
4017             this.fireEvent('actionfailed', this, action);
4018         }
4019
4020     },
4021     /**
4022      * Find a Roo.form.Field in this form by id, dataIndex, name or hiddenName
4023      * @param {String} id The value to search for
4024      * @return Field
4025      */
4026     findField : function(id){
4027         var items = this.getItems();
4028         var field = items.get(id);
4029         if(!field){
4030              items.each(function(f){
4031                 if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
4032                     field = f;
4033                     return false;
4034                 }
4035                 return true;
4036             });
4037         }
4038         return field || null;
4039     },
4040      /**
4041      * Mark fields in this form invalid in bulk.
4042      * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
4043      * @return {BasicForm} this
4044      */
4045     markInvalid : function(errors){
4046         if(errors instanceof Array){
4047             for(var i = 0, len = errors.length; i < len; i++){
4048                 var fieldError = errors[i];
4049                 var f = this.findField(fieldError.id);
4050                 if(f){
4051                     f.markInvalid(fieldError.msg);
4052                 }
4053             }
4054         }else{
4055             var field, id;
4056             for(id in errors){
4057                 if(typeof errors[id] != 'function' && (field = this.findField(id))){
4058                     field.markInvalid(errors[id]);
4059                 }
4060             }
4061         }
4062         //Roo.each(this.childForms || [], function (f) {
4063         //    f.markInvalid(errors);
4064         //});
4065
4066         return this;
4067     },
4068
4069     /**
4070      * Set values for fields in this form in bulk.
4071      * @param {Array/Object} values Either an array in the form [{id:'fieldId', value:'foo'},...] or an object hash of {id: value, id2: value2}
4072      * @return {BasicForm} this
4073      */
4074     setValues : function(values){
4075         if(values instanceof Array){ // array of objects
4076             for(var i = 0, len = values.length; i < len; i++){
4077                 var v = values[i];
4078                 var f = this.findField(v.id);
4079                 if(f){
4080                     f.setValue(v.value);
4081                     if(this.trackResetOnLoad){
4082                         f.originalValue = f.getValue();
4083                     }
4084                 }
4085             }
4086         }else{ // object hash
4087             var field, id;
4088             for(id in values){
4089                 if(typeof values[id] != 'function' && (field = this.findField(id))){
4090
4091                     if (field.setFromData &&
4092                         field.valueField &&
4093                         field.displayField &&
4094                         // combos' with local stores can
4095                         // be queried via setValue()
4096                         // to set their value..
4097                         (field.store && !field.store.isLocal)
4098                         ) {
4099                         // it's a combo
4100                         var sd = { };
4101                         sd[field.valueField] = typeof(values[field.hiddenName]) == 'undefined' ? '' : values[field.hiddenName];
4102                         sd[field.displayField] = typeof(values[field.name]) == 'undefined' ? '' : values[field.name];
4103                         field.setFromData(sd);
4104
4105                     } else {
4106                         field.setValue(values[id]);
4107                     }
4108
4109
4110                     if(this.trackResetOnLoad){
4111                         field.originalValue = field.getValue();
4112                     }
4113                 }
4114             }
4115         }
4116
4117         //Roo.each(this.childForms || [], function (f) {
4118         //    f.setValues(values);
4119         //});
4120
4121         return this;
4122     },
4123
4124     /**
4125      * Returns the fields in this form as an object with key/value pairs. If multiple fields exist with the same name
4126      * they are returned as an array.
4127      * @param {Boolean} asString
4128      * @return {Object}
4129      */
4130     getValues : function(asString){
4131         //if (this.childForms) {
4132             // copy values from the child forms
4133         //    Roo.each(this.childForms, function (f) {
4134         //        this.setValues(f.getValues());
4135         //    }, this);
4136         //}
4137
4138
4139
4140         var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
4141         if(asString === true){
4142             return fs;
4143         }
4144         return Roo.urlDecode(fs);
4145     },
4146
4147     /**
4148      * Returns the fields in this form as an object with key/value pairs.
4149      * This differs from getValues as it calls getValue on each child item, rather than using dom data.
4150      * @return {Object}
4151      */
4152     getFieldValues : function(with_hidden)
4153     {
4154         var items = this.getItems();
4155         var ret = {};
4156         items.each(function(f){
4157             if (!f.getName()) {
4158                 return;
4159             }
4160             var v = f.getValue();
4161             if (f.inputType =='radio') {
4162                 if (typeof(ret[f.getName()]) == 'undefined') {
4163                     ret[f.getName()] = ''; // empty..
4164                 }
4165
4166                 if (!f.el.dom.checked) {
4167                     return;
4168
4169                 }
4170                 v = f.el.dom.value;
4171
4172             }
4173
4174             // not sure if this supported any more..
4175             if ((typeof(v) == 'object') && f.getRawValue) {
4176                 v = f.getRawValue() ; // dates..
4177             }
4178             // combo boxes where name != hiddenName...
4179             if (f.name != f.getName()) {
4180                 ret[f.name] = f.getRawValue();
4181             }
4182             ret[f.getName()] = v;
4183         });
4184
4185         return ret;
4186     },
4187
4188     /**
4189      * Clears all invalid messages in this form.
4190      * @return {BasicForm} this
4191      */
4192     clearInvalid : function(){
4193         var items = this.getItems();
4194
4195         items.each(function(f){
4196            f.clearInvalid();
4197         });
4198
4199
4200
4201         return this;
4202     },
4203
4204     /**
4205      * Resets this form.
4206      * @return {BasicForm} this
4207      */
4208     reset : function(){
4209         var items = this.getItems();
4210         items.each(function(f){
4211             f.reset();
4212         });
4213
4214         Roo.each(this.childForms || [], function (f) {
4215             f.reset();
4216         });
4217
4218
4219         return this;
4220     },
4221     getItems : function()
4222     {
4223         var r=new Roo.util.MixedCollection(false, function(o){
4224             return o.id || (o.id = Roo.id());
4225         });
4226         var iter = function(el) {
4227             if (el.inputEl) {
4228                 r.add(el);
4229             }
4230             if (!el.items) {
4231                 return;
4232             }
4233             Roo.each(el.items,function(e) {
4234                 iter(e);
4235             });
4236
4237
4238         };
4239         iter(this);
4240         return r;
4241
4242
4243
4244
4245     }
4246
4247 });
4248
4249
4250 /*
4251  * Based on:
4252  * Ext JS Library 1.1.1
4253  * Copyright(c) 2006-2007, Ext JS, LLC.
4254  *
4255  * Originally Released Under LGPL - original licence link has changed is not relivant.
4256  *
4257  * Fork - LGPL
4258  * <script type="text/javascript">
4259  */
4260 /**
4261  * @class Roo.form.VTypes
4262  * Overridable validation definitions. The validations provided are basic and intended to be easily customizable and extended.
4263  * @singleton
4264  */
4265 Roo.form.VTypes = function(){
4266     // closure these in so they are only created once.
4267     var alpha = /^[a-zA-Z_]+$/;
4268     var alphanum = /^[a-zA-Z0-9_]+$/;
4269     var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/;
4270     var url = /(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
4271
4272     // All these messages and functions are configurable
4273     return {
4274         /**
4275          * The function used to validate email addresses
4276          * @param {String} value The email address
4277          */
4278         'email' : function(v){
4279             return email.test(v);
4280         },
4281         /**
4282          * The error text to display when the email validation function returns false
4283          * @type String
4284          */
4285         'emailText' : 'This field should be an e-mail address in the format "user@domain.com"',
4286         /**
4287          * The keystroke filter mask to be applied on email input
4288          * @type RegExp
4289          */
4290         'emailMask' : /[a-z0-9_\.\-@]/i,
4291
4292         /**
4293          * The function used to validate URLs
4294          * @param {String} value The URL
4295          */
4296         'url' : function(v){
4297             return url.test(v);
4298         },
4299         /**
4300          * The error text to display when the url validation function returns false
4301          * @type String
4302          */
4303         'urlText' : 'This field should be a URL in the format "http:/'+'/www.domain.com"',
4304
4305         /**
4306          * The function used to validate alpha values
4307          * @param {String} value The value
4308          */
4309         'alpha' : function(v){
4310             return alpha.test(v);
4311         },
4312         /**
4313          * The error text to display when the alpha validation function returns false
4314          * @type String
4315          */
4316         'alphaText' : 'This field should only contain letters and _',
4317         /**
4318          * The keystroke filter mask to be applied on alpha input
4319          * @type RegExp
4320          */
4321         'alphaMask' : /[a-z_]/i,
4322
4323         /**
4324          * The function used to validate alphanumeric values
4325          * @param {String} value The value
4326          */
4327         'alphanum' : function(v){
4328             return alphanum.test(v);
4329         },
4330         /**
4331          * The error text to display when the alphanumeric validation function returns false
4332          * @type String
4333          */
4334         'alphanumText' : 'This field should only contain letters, numbers and _',
4335         /**
4336          * The keystroke filter mask to be applied on alphanumeric input
4337          * @type RegExp
4338          */
4339         'alphanumMask' : /[a-z0-9_]/i
4340     };
4341 }();/*
4342  * - LGPL
4343  *
4344  * Input
4345  *
4346  */
4347
4348 /**
4349  * @class Roo.bootstrap.Input
4350  * @extends Roo.bootstrap.Component
4351  * Bootstrap Input class
4352  * @cfg {Boolean} disabled is it disabled
4353  * @cfg {String} fieldLabel - the label associated
4354  * @cfg {String} inputType button | checkbox | email | file | hidden | image | number | password | radio | range | reset | search | submit | text
4355  * @cfg {String} name name of the input
4356  * @cfg {string} fieldLabel - the label associated
4357  * @cfg {string}  inputType - input / file submit ...
4358  * @cfg {string} placeholder - placeholder to put in text.
4359  * @cfg {string}  before - input group add on before
4360  * @cfg {string} after - input group add on after
4361  * @cfg {string} size - (lg|sm) or leave empty..
4362  * @cfg {Number} xs colspan out of 12 for mobile-sized screens
4363  * @cfg {Number} sm colspan out of 12 for tablet-sized screens
4364  * @cfg {Number} md colspan out of 12 for computer-sized screens
4365  * @cfg {Number} lg colspan out of 12 for large computer-sized screens
4366  * @cfg {string} value default value of the input
4367  * @cfg {Number} labelWidth set the width of label (0-12)
4368  * @cfg {String} labelAlign (top|left)
4369  * @cfg {Boolean} readOnly Specifies that the field should be read-only
4370  *
4371  *
4372  * @constructor
4373  * Create a new Input
4374  * @param {Object} config The config object
4375  */
4376
4377 Roo.bootstrap.Input = function(config){
4378     Roo.bootstrap.Input.superclass.constructor.call(this, config);
4379
4380         this.addEvents({
4381             /**
4382              * @event focus
4383              * Fires when this field receives input focus.
4384              * @param {Roo.form.Field} this
4385              */
4386             focus : true,
4387             /**
4388              * @event blur
4389              * Fires when this field loses input focus.
4390              * @param {Roo.form.Field} this
4391              */
4392             blur : true,
4393             /**
4394              * @event specialkey
4395              * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
4396              * {@link Roo.EventObject#getKey} to determine which key was pressed.
4397              * @param {Roo.form.Field} this
4398              * @param {Roo.EventObject} e The event object
4399              */
4400             specialkey : true,
4401             /**
4402              * @event change
4403              * Fires just before the field blurs if the field value has changed.
4404              * @param {Roo.form.Field} this
4405              * @param {Mixed} newValue The new value
4406              * @param {Mixed} oldValue The original value
4407              */
4408             change : true,
4409             /**
4410              * @event invalid
4411              * Fires after the field has been marked as invalid.
4412              * @param {Roo.form.Field} this
4413              * @param {String} msg The validation message
4414              */
4415             invalid : true,
4416             /**
4417              * @event valid
4418              * Fires after the field has been validated with no errors.
4419              * @param {Roo.form.Field} this
4420              */
4421             valid : true,
4422              /**
4423              * @event keyup
4424              * Fires after the key up
4425              * @param {Roo.form.Field} this
4426              * @param {Roo.EventObject}  e The event Object
4427              */
4428             keyup : true
4429         });
4430 };
4431
4432 Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
4433      /**
4434      * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
4435       automatic validation (defaults to "keyup").
4436      */
4437     validationEvent : "keyup",
4438      /**
4439      * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true).
4440      */
4441     validateOnBlur : true,
4442     /**
4443      * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
4444      */
4445     validationDelay : 250,
4446      /**
4447      * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to "x-form-focus")
4448      */
4449     focusClass : "x-form-focus",  // not needed???
4450
4451
4452     /**
4453      * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
4454      */
4455     invalidClass : "has-error",
4456
4457     /**
4458      * @cfg {Boolean} selectOnFocus True to automatically select any existing field text when the field receives input focus (defaults to false)
4459      */
4460     selectOnFocus : false,
4461
4462      /**
4463      * @cfg {String} maskRe An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
4464      */
4465     maskRe : null,
4466        /**
4467      * @cfg {String} vtype A validation type name as defined in {@link Roo.form.VTypes} (defaults to null)
4468      */
4469     vtype : null,
4470
4471       /**
4472      * @cfg {Boolean} disableKeyFilter True to disable input keystroke filtering (defaults to false)
4473      */
4474     disableKeyFilter : false,
4475
4476        /**
4477      * @cfg {Boolean} disabled True to disable the field (defaults to false).
4478      */
4479     disabled : false,
4480      /**
4481      * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to true)
4482      */
4483     allowBlank : true,
4484     /**
4485      * @cfg {String} blankText Error text to display if the allow blank validation fails (defaults to "This field is required")
4486      */
4487     blankText : "This field is required",
4488
4489      /**
4490      * @cfg {Number} minLength Minimum input field length required (defaults to 0)
4491      */
4492     minLength : 0,
4493     /**
4494      * @cfg {Number} maxLength Maximum input field length allowed (defaults to Number.MAX_VALUE)
4495      */
4496     maxLength : Number.MAX_VALUE,
4497     /**
4498      * @cfg {String} minLengthText Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
4499      */
4500     minLengthText : "The minimum length for this field is {0}",
4501     /**
4502      * @cfg {String} maxLengthText Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
4503      */
4504     maxLengthText : "The maximum length for this field is {0}",
4505
4506
4507     /**
4508      * @cfg {Function} validator A custom validation function to be called during field validation (defaults to null).
4509      * If available, this function will be called only after the basic validators all return true, and will be passed the
4510      * current field value and expected to return boolean true if the value is valid or a string error message if invalid.
4511      */
4512     validator : null,
4513     /**
4514      * @cfg {RegExp} regex A JavaScript RegExp object to be tested against the field value during validation (defaults to null).
4515      * If available, this regex will be evaluated only after the basic validators all return true, and will be passed the
4516      * current field value.  If the test fails, the field will be marked invalid using {@link #regexText}.
4517      */
4518     regex : null,
4519     /**
4520      * @cfg {String} regexText The error text to display if {@link #regex} is used and the test fails during validation (defaults to "")
4521      */
4522     regexText : "",
4523
4524
4525
4526     fieldLabel : '',
4527     inputType : 'text',
4528
4529     name : false,
4530     placeholder: false,
4531     before : false,
4532     after : false,
4533     size : false,
4534     // private
4535     hasFocus : false,
4536     preventMark: false,
4537     isFormField : true,
4538     value : '',
4539     labelWidth : 2,
4540     labelAlign : false,
4541     readOnly : false,
4542
4543     parentLabelAlign : function()
4544     {
4545         var parent = this;
4546         while (parent.parent()) {
4547             parent = parent.parent();
4548             if (typeof(parent.labelAlign) !='undefined') {
4549                 return parent.labelAlign;
4550             }
4551         }
4552         return 'left';
4553
4554     },
4555
4556     getAutoCreate : function(){
4557
4558         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
4559
4560         var id = Roo.id();
4561
4562         var cfg = {};
4563
4564         if(this.inputType != 'hidden'){
4565             cfg.cls = 'form-group' //input-group
4566         }
4567
4568         var input =  {
4569             tag: 'input',
4570             id : id,
4571             type : this.inputType,
4572             value : this.value,
4573             cls : 'form-control',
4574             placeholder : this.placeholder || ''
4575
4576         };
4577
4578         if(this.maxLength && this.maxLength != Number.MAX_VALUE){
4579             input.maxLength = this.maxLength;
4580         }
4581
4582         if (this.disabled) {
4583             input.disabled=true;
4584         }
4585
4586         if (this.readOnly) {
4587             input.readonly=true;
4588         }
4589
4590         if (this.name) {
4591             input.name = this.name;
4592         }
4593         if (this.size) {
4594             input.cls += ' input-' + this.size;
4595         }
4596         var settings=this;
4597         ['xs','sm','md','lg'].map(function(size){
4598             if (settings[size]) {
4599                 cfg.cls += ' col-' + size + '-' + settings[size];
4600             }
4601         });
4602
4603         var inputblock = input;
4604
4605         if (this.before || this.after) {
4606
4607             inputblock = {
4608                 cls : 'input-group',
4609                 cn :  []
4610             };
4611             if (this.before) {
4612                 inputblock.cn.push({
4613                     tag :'span',
4614                     cls : 'input-group-addon',
4615                     html : this.before
4616                 });
4617             }
4618             inputblock.cn.push(input);
4619             if (this.after) {
4620                 inputblock.cn.push({
4621                     tag :'span',
4622                     cls : 'input-group-addon',
4623                     html : this.after
4624                 });
4625             }
4626
4627         };
4628
4629         if (align ==='left' && this.fieldLabel.length) {
4630                 Roo.log("left and has label");
4631                 cfg.cn = [
4632
4633                     {
4634                         tag: 'label',
4635                         'for' :  id,
4636                         cls : 'control-label col-sm-' + this.labelWidth,
4637                         html : this.fieldLabel
4638
4639                     },
4640                     {
4641                         cls : "col-sm-" + (12 - this.labelWidth),
4642                         cn: [
4643                             inputblock
4644                         ]
4645                     }
4646
4647                 ];
4648         } else if ( this.fieldLabel.length) {
4649                 Roo.log(" label");
4650                  cfg.cn = [
4651
4652                     {
4653                         tag: 'label',
4654                         //cls : 'input-group-addon',
4655                         html : this.fieldLabel
4656
4657                     },
4658
4659                     inputblock
4660
4661                 ];
4662
4663         } else {
4664
4665                 Roo.log(" no label && no align");
4666                 cfg.cn = [
4667
4668                         inputblock
4669
4670                 ];
4671
4672
4673         };
4674         Roo.log('input-parentType: ' + this.parentType);
4675
4676         if (this.parentType === 'Navbar' &&  this.parent().bar) {
4677            cfg.cls += ' navbar-form';
4678            Roo.log(cfg);
4679         }
4680
4681         return cfg;
4682
4683     },
4684     /**
4685      * return the real input element.
4686      */
4687     inputEl: function ()
4688     {
4689         return this.el.select('input.form-control',true).first();
4690     },
4691     setDisabled : function(v)
4692     {
4693         var i  = this.inputEl().dom;
4694         if (!v) {
4695             i.removeAttribute('disabled');
4696             return;
4697
4698         }
4699         i.setAttribute('disabled','true');
4700     },
4701     initEvents : function()
4702     {
4703
4704         this.inputEl().on("keydown" , this.fireKey,  this);
4705         this.inputEl().on("focus", this.onFocus,  this);
4706         this.inputEl().on("blur", this.onBlur,  this);
4707
4708         this.inputEl().relayEvent('keyup', this);
4709
4710         // reference to original value for reset
4711         this.originalValue = this.getValue();
4712         //Roo.form.TextField.superclass.initEvents.call(this);
4713         if(this.validationEvent == 'keyup'){
4714             this.validationTask = new Roo.util.DelayedTask(this.validate, this);
4715             this.inputEl().on('keyup', this.filterValidation, this);
4716         }
4717         else if(this.validationEvent !== false){
4718             this.inputEl().on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
4719         }
4720
4721         if(this.selectOnFocus){
4722             this.on("focus", this.preFocus, this);
4723
4724         }
4725         if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){
4726             this.inputEl().on("keypress", this.filterKeys, this);
4727         }
4728        /* if(this.grow){
4729             this.el.on("keyup", this.onKeyUp,  this, {buffer:50});
4730             this.el.on("click", this.autoSize,  this);
4731         }
4732         */
4733         if(this.inputEl().is('input[type=password]') && Roo.isSafari){
4734             this.inputEl().on('keydown', this.SafariOnKeyDown, this);
4735         }
4736
4737     },
4738     filterValidation : function(e){
4739         if(!e.isNavKeyPress()){
4740             this.validationTask.delay(this.validationDelay);
4741         }
4742     },
4743      /**
4744      * Validates the field value
4745      * @return {Boolean} True if the value is valid, else false
4746      */
4747     validate : function(){
4748         //if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){
4749         if(this.disabled || this.validateValue(this.getRawValue())){
4750             this.clearInvalid();
4751             return true;
4752         }
4753         return false;
4754     },
4755
4756
4757     /**
4758      * Validates a value according to the field's validation rules and marks the field as invalid
4759      * if the validation fails
4760      * @param {Mixed} value The value to validate
4761      * @return {Boolean} True if the value is valid, else false
4762      */
4763     validateValue : function(value){
4764         if(value.length < 1)  { // if it's blank
4765              if(this.allowBlank){
4766                 this.clearInvalid();
4767                 return true;
4768              }else{
4769                 this.markInvalid(this.blankText);
4770                 return false;
4771              }
4772         }
4773         if(value.length < this.minLength){
4774             this.markInvalid(String.format(this.minLengthText, this.minLength));
4775             return false;
4776         }
4777         if(value.length > this.maxLength){
4778             this.markInvalid(String.format(this.maxLengthText, this.maxLength));
4779             return false;
4780         }
4781         if(this.vtype){
4782             var vt = Roo.form.VTypes;
4783             if(!vt[this.vtype](value, this)){
4784                 this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
4785                 return false;
4786             }
4787         }
4788         if(typeof this.validator == "function"){
4789             var msg = this.validator(value);
4790             if(msg !== true){
4791                 this.markInvalid(msg);
4792                 return false;
4793             }
4794         }
4795         if(this.regex && !this.regex.test(value)){
4796             this.markInvalid(this.regexText);
4797             return false;
4798         }
4799         return true;
4800     },
4801
4802
4803
4804      // private
4805     fireKey : function(e){
4806         //Roo.log('field ' + e.getKey());
4807         if(e.isNavKeyPress()){
4808             this.fireEvent("specialkey", this, e);
4809         }
4810     },
4811     focus : function (selectText){
4812         if(this.rendered){
4813             this.inputEl().focus();
4814             if(selectText === true){
4815                 this.inputEl().dom.select();
4816             }
4817         }
4818         return this;
4819     } ,
4820
4821     onFocus : function(){
4822         if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
4823            // this.el.addClass(this.focusClass);
4824         }
4825         if(!this.hasFocus){
4826             this.hasFocus = true;
4827             this.startValue = this.getValue();
4828             this.fireEvent("focus", this);
4829         }
4830     },
4831
4832     beforeBlur : Roo.emptyFn,
4833
4834
4835     // private
4836     onBlur : function(){
4837         this.beforeBlur();
4838         if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
4839             //this.el.removeClass(this.focusClass);
4840         }
4841         this.hasFocus = false;
4842         if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
4843             this.validate();
4844         }
4845         var v = this.getValue();
4846         if(String(v) !== String(this.startValue)){
4847             this.fireEvent('change', this, v, this.startValue);
4848         }
4849         this.fireEvent("blur", this);
4850     },
4851
4852     /**
4853      * Resets the current field value to the originally loaded value and clears any validation messages
4854      */
4855     reset : function(){
4856         this.setValue(this.originalValue);
4857         this.clearInvalid();
4858     },
4859      /**
4860      * Returns the name of the field
4861      * @return {Mixed} name The name field
4862      */
4863     getName: function(){
4864         return this.name;
4865     },
4866      /**
4867      * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
4868      * @return {Mixed} value The field value
4869      */
4870     getValue : function(){
4871         return this.inputEl().getValue();
4872     },
4873     /**
4874      * Returns the raw data value which may or may not be a valid, defined value.  To return a normalized value see {@link #getValue}.
4875      * @return {Mixed} value The field value
4876      */
4877     getRawValue : function(){
4878         var v = this.inputEl().getValue();
4879
4880         return v;
4881     },
4882
4883     /**
4884      * Sets the underlying DOM field's value directly, bypassing validation.  To set the value with validation see {@link #setValue}.
4885      * @param {Mixed} value The value to set
4886      */
4887     setRawValue : function(v){
4888         return this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
4889     },
4890
4891     selectText : function(start, end){
4892         var v = this.getRawValue();
4893         if(v.length > 0){
4894             start = start === undefined ? 0 : start;
4895             end = end === undefined ? v.length : end;
4896             var d = this.inputEl().dom;
4897             if(d.setSelectionRange){
4898                 d.setSelectionRange(start, end);
4899             }else if(d.createTextRange){
4900                 var range = d.createTextRange();
4901                 range.moveStart("character", start);
4902                 range.moveEnd("character", v.length-end);
4903                 range.select();
4904             }
4905         }
4906     },
4907
4908     /**
4909      * Sets a data value into the field and validates it.  To set the value directly without validation see {@link #setRawValue}.
4910      * @param {Mixed} value The value to set
4911      */
4912     setValue : function(v){
4913         this.value = v;
4914         if(this.rendered){
4915             this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
4916             this.validate();
4917         }
4918     },
4919
4920     /*
4921     processValue : function(value){
4922         if(this.stripCharsRe){
4923             var newValue = value.replace(this.stripCharsRe, '');
4924             if(newValue !== value){
4925                 this.setRawValue(newValue);
4926                 return newValue;
4927             }
4928         }
4929         return value;
4930     },
4931   */
4932     preFocus : function(){
4933
4934         if(this.selectOnFocus){
4935             this.inputEl().dom.select();
4936         }
4937     },
4938     filterKeys : function(e){
4939         var k = e.getKey();
4940         if(!Roo.isIE && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
4941             return;
4942         }
4943         var c = e.getCharCode(), cc = String.fromCharCode(c);
4944         if(Roo.isIE && (e.isSpecialKey() || !cc)){
4945             return;
4946         }
4947         if(!this.maskRe.test(cc)){
4948             e.stopEvent();
4949         }
4950     },
4951      /**
4952      * Clear any invalid styles/messages for this field
4953      */
4954     clearInvalid : function(){
4955
4956         if(!this.el || this.preventMark){ // not rendered
4957             return;
4958         }
4959         this.el.removeClass(this.invalidClass);
4960         /*
4961         switch(this.msgTarget){
4962             case 'qtip':
4963                 this.el.dom.qtip = '';
4964                 break;
4965             case 'title':
4966                 this.el.dom.title = '';
4967                 break;
4968             case 'under':
4969                 if(this.errorEl){
4970                     Roo.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);
4971                 }
4972                 break;
4973             case 'side':
4974                 if(this.errorIcon){
4975                     this.errorIcon.dom.qtip = '';
4976                     this.errorIcon.hide();
4977                     this.un('resize', this.alignErrorIcon, this);
4978                 }
4979                 break;
4980             default:
4981                 var t = Roo.getDom(this.msgTarget);
4982                 t.innerHTML = '';
4983                 t.style.display = 'none';
4984                 break;
4985         }
4986         */
4987         this.fireEvent('valid', this);
4988     },
4989      /**
4990      * Mark this field as invalid
4991      * @param {String} msg The validation message
4992      */
4993     markInvalid : function(msg){
4994         if(!this.el  || this.preventMark){ // not rendered
4995             return;
4996         }
4997         this.el.addClass(this.invalidClass);
4998         /*
4999         msg = msg || this.invalidText;
5000         switch(this.msgTarget){
5001             case 'qtip':
5002                 this.el.dom.qtip = msg;
5003                 this.el.dom.qclass = 'x-form-invalid-tip';
5004                 if(Roo.QuickTips){ // fix for floating editors interacting with DND
5005                     Roo.QuickTips.enable();
5006                 }
5007                 break;
5008             case 'title':
5009                 this.el.dom.title = msg;
5010                 break;
5011             case 'under':
5012                 if(!this.errorEl){
5013                     var elp = this.el.findParent('.x-form-element', 5, true);
5014                     this.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
5015                     this.errorEl.setWidth(elp.getWidth(true)-20);
5016                 }
5017                 this.errorEl.update(msg);
5018                 Roo.form.Field.msgFx[this.msgFx].show(this.errorEl, this);
5019                 break;
5020             case 'side':
5021                 if(!this.errorIcon){
5022                     var elp = this.el.findParent('.x-form-element', 5, true);
5023                     this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
5024                 }
5025                 this.alignErrorIcon();
5026                 this.errorIcon.dom.qtip = msg;
5027                 this.errorIcon.dom.qclass = 'x-form-invalid-tip';
5028                 this.errorIcon.show();
5029                 this.on('resize', this.alignErrorIcon, this);
5030                 break;
5031             default:
5032                 var t = Roo.getDom(this.msgTarget);
5033                 t.innerHTML = msg;
5034                 t.style.display = this.msgDisplay;
5035                 break;
5036         }
5037         */
5038         this.fireEvent('invalid', this, msg);
5039     },
5040     // private
5041     SafariOnKeyDown : function(event)
5042     {
5043         // this is a workaround for a password hang bug on chrome/ webkit.
5044
5045         var isSelectAll = false;
5046
5047         if(this.inputEl().dom.selectionEnd > 0){
5048             isSelectAll = (this.inputEl().dom.selectionEnd - this.inputEl().dom.selectionStart - this.getValue().length == 0) ? true : false;
5049         }
5050         if(((event.getKey() == 8 || event.getKey() == 46) && this.getValue().length ==1)){ // backspace and delete key
5051             event.preventDefault();
5052             this.setValue('');
5053             return;
5054         }
5055
5056         if(isSelectAll){ // backspace and delete key
5057
5058             event.preventDefault();
5059             // this is very hacky as keydown always get's upper case.
5060             //
5061             var cc = String.fromCharCode(event.getCharCode());
5062             this.setValue( event.shiftKey ?  cc : cc.toLowerCase());
5063
5064         }
5065     },
5066     adjustWidth : function(tag, w){
5067         tag = tag.toLowerCase();
5068         if(typeof w == 'number' && Roo.isStrict && !Roo.isSafari){
5069             if(Roo.isIE && (tag == 'input' || tag == 'textarea')){
5070                 if(tag == 'input'){
5071                     return w + 2;
5072                 }
5073                 if(tag == 'textarea'){
5074                     return w-2;
5075                 }
5076             }else if(Roo.isOpera){
5077                 if(tag == 'input'){
5078                     return w + 2;
5079                 }
5080                 if(tag == 'textarea'){
5081                     return w-2;
5082                 }
5083             }
5084         }
5085         return w;
5086     }
5087
5088 });
5089
5090
5091 /*
5092  * - LGPL
5093  *
5094  * Input
5095  *
5096  */
5097
5098 /**
5099  * @class Roo.bootstrap.TextArea
5100  * @extends Roo.bootstrap.Input
5101  * Bootstrap TextArea class
5102  * @cfg {Number} cols Specifies the visible width of a text area
5103  * @cfg {Number} rows Specifies the visible number of lines in a text area
5104  * @cfg {string} wrap (soft|hard)Specifies how the text in a text area is to be wrapped when submitted in a form
5105  * @cfg {string} resize (none|both|horizontal|vertical|inherit|initial)
5106  * @cfg {string} html text
5107  *
5108  * @constructor
5109  * Create a new TextArea
5110  * @param {Object} config The config object
5111  */
5112
5113 Roo.bootstrap.TextArea = function(config){
5114     Roo.bootstrap.TextArea.superclass.constructor.call(this, config);
5115
5116 };
5117
5118 Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input,  {
5119
5120     cols : false,
5121     rows : 5,
5122     readOnly : false,
5123     warp : 'soft',
5124     resize : false,
5125     value: false,
5126     html: false,
5127
5128     getAutoCreate : function(){
5129
5130         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
5131
5132         var id = Roo.id();
5133
5134         var cfg = {};
5135
5136         var input =  {
5137             tag: 'textarea',
5138             id : id,
5139             warp : this.warp,
5140             rows : this.rows,
5141             value : this.value || '',
5142             html: this.html || '',
5143             cls : 'form-control',
5144             placeholder : this.placeholder || ''
5145
5146         };
5147
5148         if(this.maxLength && this.maxLength != Number.MAX_VALUE){
5149             input.maxLength = this.maxLength;
5150         }
5151
5152         if(this.resize){
5153             input.style = (typeof(input.style) == 'undefined') ? 'resize:' + this.resize : input.style + 'resize:' + this.resize;
5154         }
5155
5156         if(this.cols){
5157             input.cols = this.cols;
5158         }
5159
5160         if (this.readOnly) {
5161             input.readonly = true;
5162         }
5163
5164         if (this.name) {
5165             input.name = this.name;
5166         }
5167
5168         if (this.size) {
5169             input.cls = (typeof(input.cls) == 'undefined') ? 'input-' + this.size : input.cls + ' input-' + this.size;
5170         }
5171
5172         var settings=this;
5173         ['xs','sm','md','lg'].map(function(size){
5174             if (settings[size]) {
5175                 cfg.cls += ' col-' + size + '-' + settings[size];
5176             }
5177         });
5178
5179         var inputblock = input;
5180
5181         if (this.before || this.after) {
5182
5183             inputblock = {
5184                 cls : 'input-group',
5185                 cn :  []
5186             };
5187             if (this.before) {
5188                 inputblock.cn.push({
5189                     tag :'span',
5190                     cls : 'input-group-addon',
5191                     html : this.before
5192                 });
5193             }
5194             inputblock.cn.push(input);
5195             if (this.after) {
5196                 inputblock.cn.push({
5197                     tag :'span',
5198                     cls : 'input-group-addon',
5199                     html : this.after
5200                 });
5201             }
5202
5203         }
5204
5205         if (align ==='left' && this.fieldLabel.length) {
5206                 Roo.log("left and has label");
5207                 cfg.cn = [
5208
5209                     {
5210                         tag: 'label',
5211                         'for' :  id,
5212                         cls : 'control-label col-sm-' + this.labelWidth,
5213                         html : this.fieldLabel
5214
5215                     },
5216                     {
5217                         cls : "col-sm-" + (12 - this.labelWidth),
5218                         cn: [
5219                             inputblock
5220                         ]
5221                     }
5222
5223                 ];
5224         } else if ( this.fieldLabel.length) {
5225                 Roo.log(" label");
5226                  cfg.cn = [
5227
5228                     {
5229                         tag: 'label',
5230                         //cls : 'input-group-addon',
5231                         html : this.fieldLabel
5232
5233                     },
5234
5235                     inputblock
5236
5237                 ];
5238
5239         } else {
5240
5241                    Roo.log(" no label && no align");
5242                 cfg.cn = [
5243
5244                         inputblock
5245
5246                 ];
5247
5248
5249         }
5250
5251         if (this.disabled) {
5252             input.disabled=true;
5253         }
5254
5255         return cfg;
5256
5257     },
5258     /**
5259      * return the real textarea element.
5260      */
5261     inputEl: function ()
5262     {
5263         return this.el.select('textarea.form-control',true).first();
5264     }
5265 });
5266
5267
5268 /*
5269  * - LGPL
5270  *
5271  * trigger field - base class for combo..
5272  *
5273  */
5274
5275 /**
5276  * @class Roo.bootstrap.TriggerField
5277  * @extends Roo.bootstrap.Input
5278  * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
5279  * The trigger has no default action, so you must assign a function to implement the trigger click handler by
5280  * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
5281  * for which you can provide a custom implementation.  For example:
5282  * <pre><code>
5283 var trigger = new Roo.bootstrap.TriggerField();
5284 trigger.onTriggerClick = myTriggerFn;
5285 trigger.applyTo('my-field');
5286 </code></pre>
5287  *
5288  * However, in general you will most likely want to use TriggerField as the base class for a reusable component.
5289  * {@link Roo.bootstrap.DateField} and {@link Roo.bootstrap.ComboBox} are perfect examples of this.
5290  * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
5291  * class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
5292  * @constructor
5293  * Create a new TriggerField.
5294  * @param {Object} config Configuration options (valid {@Roo.bootstrap.Input} config options will also be applied
5295  * to the base TextField)
5296  */
5297 Roo.bootstrap.TriggerField = function(config){
5298     this.mimicing = false;
5299     Roo.bootstrap.TriggerField.superclass.constructor.call(this, config);
5300 };
5301
5302 Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
5303     /**
5304      * @cfg {String} triggerClass A CSS class to apply to the trigger
5305      */
5306      /**
5307      * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
5308      */
5309     hideTrigger:false,
5310
5311     /** @cfg {Boolean} grow @hide */
5312     /** @cfg {Number} growMin @hide */
5313     /** @cfg {Number} growMax @hide */
5314
5315     /**
5316      * @hide
5317      * @method
5318      */
5319     autoSize: Roo.emptyFn,
5320     // private
5321     monitorTab : true,
5322     // private
5323     deferHeight : true,
5324
5325
5326     actionMode : 'wrap',
5327
5328
5329
5330     getAutoCreate : function(){
5331
5332         var parent = this.parent();
5333
5334         var align = this.parentLabelAlign();
5335
5336         var id = Roo.id();
5337
5338         var cfg = {
5339             cls: 'form-group' //input-group
5340         };
5341
5342
5343         var input =  {
5344             tag: 'input',
5345             id : id,
5346             type : this.inputType,
5347             cls : 'form-control',
5348             autocomplete: 'off',
5349             placeholder : this.placeholder || ''
5350
5351         };
5352         if (this.name) {
5353             input.name = this.name;
5354         }
5355         if (this.size) {
5356             input.cls += ' input-' + this.size;
5357         }
5358
5359         if (this.disabled) {
5360             input.disabled=true;
5361         }
5362
5363         var inputblock = input;
5364
5365         if (this.before || this.after) {
5366
5367             inputblock = {
5368                 cls : 'input-group',
5369                 cn :  []
5370             };
5371             if (this.before) {
5372                 inputblock.cn.push({
5373                     tag :'span',
5374                     cls : 'input-group-addon',
5375                     html : this.before
5376                 });
5377             }
5378             inputblock.cn.push(input);
5379             if (this.after) {
5380                 inputblock.cn.push({
5381                     tag :'span',
5382                     cls : 'input-group-addon',
5383                     html : this.after
5384                 });
5385             }
5386
5387         };
5388
5389         var box = {
5390             tag: 'div',
5391             cn: [
5392                 {
5393                     tag: 'input',
5394                     type : 'hidden',
5395                     cls: 'form-hidden-field'
5396                 },
5397                 inputblock
5398             ]
5399
5400         };
5401
5402         if(this.multiple){
5403             Roo.log('multiple');
5404
5405             box = {
5406                 tag: 'div',
5407                 cn: [
5408                     {
5409                         tag: 'input',
5410                         type : 'hidden',
5411                         cls: 'form-hidden-field'
5412                     },
5413                     {
5414                         tag: 'ul',
5415                         cls: 'select2-choices',
5416                         cn:[
5417                             {
5418                                 tag: 'li',
5419                                 cls: 'select2-search-field',
5420                                 cn: [
5421
5422                                     inputblock
5423                                 ]
5424                             }
5425                         ]
5426                     }
5427                 ]
5428             }
5429         };
5430
5431         var combobox = {
5432             cls: 'select2-container input-group',
5433             cn: [
5434                 box,
5435                 {
5436                     tag: 'ul',
5437                     cls: 'typeahead typeahead-long dropdown-menu',
5438                     style: 'display:none'
5439                 }
5440             ]
5441         };
5442
5443         if(!this.multiple){
5444             combobox.cn.push({
5445                 tag :'span',
5446                 cls : 'input-group-addon btn dropdown-toggle',
5447                 cn : [
5448                     {
5449                         tag: 'span',
5450                         cls: 'caret'
5451                     },
5452                     {
5453                         tag: 'span',
5454                         cls: 'combobox-clear',
5455                         cn  : [
5456                             {
5457                                 tag : 'i',
5458                                 cls: 'icon-remove'
5459                             }
5460                         ]
5461                     }
5462                 ]
5463
5464             })
5465         }
5466
5467         if(this.multiple){
5468             combobox.cls += ' select2-container-multi';
5469         }
5470
5471         if (align ==='left' && this.fieldLabel.length) {
5472
5473                 Roo.log("left and has label");
5474                 cfg.cn = [
5475
5476                     {
5477                         tag: 'label',
5478                         'for' :  id,
5479                         cls : 'control-label col-sm-' + this.labelWidth,
5480                         html : this.fieldLabel
5481
5482                     },
5483                     {
5484                         cls : "col-sm-" + (12 - this.labelWidth),
5485                         cn: [
5486                             combobox
5487                         ]
5488                     }
5489
5490                 ];
5491         } else if ( this.fieldLabel.length) {
5492                 Roo.log(" label");
5493                  cfg.cn = [
5494
5495                     {
5496                         tag: 'label',
5497                         //cls : 'input-group-addon',
5498                         html : this.fieldLabel
5499
5500                     },
5501
5502                     combobox
5503
5504                 ];
5505
5506         } else {
5507
5508                 Roo.log(" no label && no align");
5509                 cfg = combobox
5510
5511
5512         }
5513
5514         var settings=this;
5515         ['xs','sm','md','lg'].map(function(size){
5516             if (settings[size]) {
5517                 cfg.cls += ' col-' + size + '-' + settings[size];
5518             }
5519         });
5520
5521         return cfg;
5522
5523     },
5524
5525
5526
5527     // private
5528     onResize : function(w, h){
5529 //        Roo.bootstrap.TriggerField.superclass.onResize.apply(this, arguments);
5530 //        if(typeof w == 'number'){
5531 //            var x = w - this.trigger.getWidth();
5532 //            this.inputEl().setWidth(this.adjustWidth('input', x));
5533 //            this.trigger.setStyle('left', x+'px');
5534 //        }
5535     },
5536
5537     // private
5538     adjustSize : Roo.BoxComponent.prototype.adjustSize,
5539
5540     // private
5541     getResizeEl : function(){
5542         return this.inputEl();
5543     },
5544
5545     // private
5546     getPositionEl : function(){
5547         return this.inputEl();
5548     },
5549
5550     // private
5551     alignErrorIcon : function(){
5552         this.errorIcon.alignTo(this.inputEl(), 'tl-tr', [2, 0]);
5553     },
5554
5555     // private
5556     initEvents : function(){
5557
5558         Roo.bootstrap.TriggerField.superclass.initEvents.call(this);
5559         //this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
5560         if(!this.multiple){
5561             this.trigger = this.el.select('span.dropdown-toggle',true).first();
5562             if(this.hideTrigger){
5563                 this.trigger.setDisplayed(false);
5564             }
5565             this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
5566         }
5567
5568         if(this.multiple){
5569             this.inputEl().on("click", this.onTriggerClick, this, {preventDefault:true});
5570         }
5571
5572         //this.trigger.addClassOnOver('x-form-trigger-over');
5573         //this.trigger.addClassOnClick('x-form-trigger-click');
5574
5575         //if(!this.width){
5576         //    this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
5577         //}
5578     },
5579
5580     // private
5581     initTrigger : function(){
5582
5583     },
5584
5585     // private
5586     onDestroy : function(){
5587         if(this.trigger){
5588             this.trigger.removeAllListeners();
5589           //  this.trigger.remove();
5590         }
5591         //if(this.wrap){
5592         //    this.wrap.remove();
5593         //}
5594         Roo.bootstrap.TriggerField.superclass.onDestroy.call(this);
5595     },
5596
5597     // private
5598     onFocus : function(){
5599         Roo.bootstrap.TriggerField.superclass.onFocus.call(this);
5600         /*
5601         if(!this.mimicing){
5602             this.wrap.addClass('x-trigger-wrap-focus');
5603             this.mimicing = true;
5604             Roo.get(Roo.isIE ? document.body : document).on("mousedown", this.mimicBlur, this);
5605             if(this.monitorTab){
5606                 this.el.on("keydown", this.checkTab, this);
5607             }
5608         }
5609         */
5610     },
5611
5612     // private
5613     checkTab : function(e){
5614         if(e.getKey() == e.TAB){
5615             this.triggerBlur();
5616         }
5617     },
5618
5619     // private
5620     onBlur : function(){
5621         // do nothing
5622     },
5623
5624     // private
5625     mimicBlur : function(e, t){
5626         /*
5627         if(!this.wrap.contains(t) && this.validateBlur()){
5628             this.triggerBlur();
5629         }
5630         */
5631     },
5632
5633     // private
5634     triggerBlur : function(){
5635         this.mimicing = false;
5636         Roo.get(Roo.isIE ? document.body : document).un("mousedown", this.mimicBlur);
5637         if(this.monitorTab){
5638             this.el.un("keydown", this.checkTab, this);
5639         }
5640         //this.wrap.removeClass('x-trigger-wrap-focus');
5641         Roo.bootstrap.TriggerField.superclass.onBlur.call(this);
5642     },
5643
5644     // private
5645     // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
5646     validateBlur : function(e, t){
5647         return true;
5648     },
5649
5650     // private
5651     onDisable : function(){
5652         Roo.bootstrap.TriggerField.superclass.onDisable.call(this);
5653         //if(this.wrap){
5654         //    this.wrap.addClass('x-item-disabled');
5655         //}
5656     },
5657
5658     // private
5659     onEnable : function(){
5660         Roo.bootstrap.TriggerField.superclass.onEnable.call(this);
5661         //if(this.wrap){
5662         //    this.el.removeClass('x-item-disabled');
5663         //}
5664     },
5665
5666     // private
5667     onShow : function(){
5668         var ae = this.getActionEl();
5669
5670         if(ae){
5671             ae.dom.style.display = '';
5672             ae.dom.style.visibility = 'visible';
5673         }
5674     },
5675
5676     // private
5677
5678     onHide : function(){
5679         var ae = this.getActionEl();
5680         ae.dom.style.display = 'none';
5681     },
5682
5683     /**
5684      * The function that should handle the trigger's click event.  This method does nothing by default until overridden
5685      * by an implementing function.
5686      * @method
5687      * @param {EventObject} e
5688      */
5689     onTriggerClick : Roo.emptyFn
5690 });
5691  /*
5692  * Based on:
5693  * Ext JS Library 1.1.1
5694  * Copyright(c) 2006-2007, Ext JS, LLC.
5695  *
5696  * Originally Released Under LGPL - original licence link has changed is not relivant.
5697  *
5698  * Fork - LGPL
5699  * <script type="text/javascript">
5700  */
5701
5702
5703 /**
5704  * @class Roo.data.SortTypes
5705  * @singleton
5706  * Defines the default sorting (casting?) comparison functions used when sorting data.
5707  */
5708 Roo.data.SortTypes = {
5709     /**
5710      * Default sort that does nothing
5711      * @param {Mixed} s The value being converted
5712      * @return {Mixed} The comparison value
5713      */
5714     none : function(s){
5715         return s;
5716     },
5717
5718     /**
5719      * The regular expression used to strip tags
5720      * @type {RegExp}
5721      * @property
5722      */
5723     stripTagsRE : /<\/?[^>]+>/gi,
5724
5725     /**
5726      * Strips all HTML tags to sort on text only
5727      * @param {Mixed} s The value being converted
5728      * @return {String} The comparison value
5729      */
5730     asText : function(s){
5731         return String(s).replace(this.stripTagsRE, "");
5732     },
5733
5734     /**
5735      * Strips all HTML tags to sort on text only - Case insensitive
5736      * @param {Mixed} s The value being converted
5737      * @return {String} The comparison value
5738      */
5739     asUCText : function(s){
5740         return String(s).toUpperCase().replace(this.stripTagsRE, "");
5741     },
5742
5743     /**
5744      * Case insensitive string
5745      * @param {Mixed} s The value being converted
5746      * @return {String} The comparison value
5747      */
5748     asUCString : function(s) {
5749         return String(s).toUpperCase();
5750     },
5751
5752     /**
5753      * Date sorting
5754      * @param {Mixed} s The value being converted
5755      * @return {Number} The comparison value
5756      */
5757     asDate : function(s) {
5758         if(!s){
5759             return 0;
5760         }
5761         if(s instanceof Date){
5762             return s.getTime();
5763         }
5764         return Date.parse(String(s));
5765     },
5766
5767     /**
5768      * Float sorting
5769      * @param {Mixed} s The value being converted
5770      * @return {Float} The comparison value
5771      */
5772     asFloat : function(s) {
5773         var val = parseFloat(String(s).replace(/,/g, ""));
5774         if(isNaN(val)) val = 0;
5775         return val;
5776     },
5777
5778     /**
5779      * Integer sorting
5780      * @param {Mixed} s The value being converted
5781      * @return {Number} The comparison value
5782      */
5783     asInt : function(s) {
5784         var val = parseInt(String(s).replace(/,/g, ""));
5785         if(isNaN(val)) val = 0;
5786         return val;
5787     }
5788 };/*
5789  * Based on:
5790  * Ext JS Library 1.1.1
5791  * Copyright(c) 2006-2007, Ext JS, LLC.
5792  *
5793  * Originally Released Under LGPL - original licence link has changed is not relivant.
5794  *
5795  * Fork - LGPL
5796  * <script type="text/javascript">
5797  */
5798
5799 /**
5800 * @class Roo.data.Record
5801  * Instances of this class encapsulate both record <em>definition</em> information, and record
5802  * <em>value</em> information for use in {@link Roo.data.Store} objects, or any code which needs
5803  * to access Records cached in an {@link Roo.data.Store} object.<br>
5804  * <p>
5805  * Constructors for this class are generated by passing an Array of field definition objects to {@link #create}.
5806  * Instances are usually only created by {@link Roo.data.Reader} implementations when processing unformatted data
5807  * objects.<br>
5808  * <p>
5809  * Record objects generated by this constructor inherit all the methods of Roo.data.Record listed below.
5810  * @constructor
5811  * This constructor should not be used to create Record objects. Instead, use the constructor generated by
5812  * {@link #create}. The parameters are the same.
5813  * @param {Array} data An associative Array of data values keyed by the field name.
5814  * @param {Object} id (Optional) The id of the record. This id should be unique, and is used by the
5815  * {@link Roo.data.Store} object which owns the Record to index its collection of Records. If
5816  * not specified an integer id is generated.
5817  */
5818 Roo.data.Record = function(data, id){
5819     this.id = (id || id === 0) ? id : ++Roo.data.Record.AUTO_ID;
5820     this.data = data;
5821 };
5822
5823 /**
5824  * Generate a constructor for a specific record layout.
5825  * @param {Array} o An Array of field definition objects which specify field names, and optionally,
5826  * data types, and a mapping for an {@link Roo.data.Reader} to extract the field's value from a data object.
5827  * Each field definition object may contain the following properties: <ul>
5828  * <li><b>name</b> : String<p style="margin-left:1em">The name by which the field is referenced within the Record. This is referenced by,
5829  * for example the <em>dataIndex</em> property in column definition objects passed to {@link Roo.grid.ColumnModel}</p></li>
5830  * <li><b>mapping</b> : String<p style="margin-left:1em">(Optional) A path specification for use by the {@link Roo.data.Reader} implementation
5831  * that is creating the Record to access the data value from the data object. If an {@link Roo.data.JsonReader}
5832  * is being used, then this is a string containing the javascript expression to reference the data relative to
5833  * the record item's root. If an {@link Roo.data.XmlReader} is being used, this is an {@link Roo.DomQuery} path
5834  * to the data item relative to the record element. If the mapping expression is the same as the field name,
5835  * this may be omitted.</p></li>
5836  * <li><b>type</b> : String<p style="margin-left:1em">(Optional) The data type for conversion to displayable value. Possible values are
5837  * <ul><li>auto (Default, implies no conversion)</li>
5838  * <li>string</li>
5839  * <li>int</li>
5840  * <li>float</li>
5841  * <li>boolean</li>
5842  * <li>date</li></ul></p></li>
5843  * <li><b>sortType</b> : Mixed<p style="margin-left:1em">(Optional) A member of {@link Roo.data.SortTypes}.</p></li>
5844  * <li><b>sortDir</b> : String<p style="margin-left:1em">(Optional) Initial direction to sort. "ASC" or "DESC"</p></li>
5845  * <li><b>convert</b> : Function<p style="margin-left:1em">(Optional) A function which converts the value provided
5846  * by the Reader into an object that will be stored in the Record. It is passed the
5847  * following parameters:<ul>
5848  * <li><b>v</b> : Mixed<p style="margin-left:1em">The data value as read by the Reader.</p></li>
5849  * </ul></p></li>
5850  * <li><b>dateFormat</b> : String<p style="margin-left:1em">(Optional) A format String for the Date.parseDate function.</p></li>
5851  * </ul>
5852  * <br>usage:<br><pre><code>
5853 var TopicRecord = Roo.data.Record.create(
5854     {name: 'title', mapping: 'topic_title'},
5855     {name: 'author', mapping: 'username'},
5856     {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
5857     {name: 'lastPost', mapping: 'post_time', type: 'date'},
5858     {name: 'lastPoster', mapping: 'user2'},
5859     {name: 'excerpt', mapping: 'post_text'}
5860 );
5861
5862 var myNewRecord = new TopicRecord({
5863     title: 'Do my job please',
5864     author: 'noobie',
5865     totalPosts: 1,
5866     lastPost: new Date(),
5867     lastPoster: 'Animal',
5868     excerpt: 'No way dude!'
5869 });
5870 myStore.add(myNewRecord);
5871 </code></pre>
5872  * @method create
5873  * @static
5874  */
5875 Roo.data.Record.create = function(o){
5876     var f = function(){
5877         f.superclass.constructor.apply(this, arguments);
5878     };
5879     Roo.extend(f, Roo.data.Record);
5880     var p = f.prototype;
5881     p.fields = new Roo.util.MixedCollection(false, function(field){
5882         return field.name;
5883     });
5884     for(var i = 0, len = o.length; i < len; i++){
5885         p.fields.add(new Roo.data.Field(o[i]));
5886     }
5887     f.getField = function(name){
5888         return p.fields.get(name);
5889     };
5890     return f;
5891 };
5892
5893 Roo.data.Record.AUTO_ID = 1000;
5894 Roo.data.Record.EDIT = 'edit';
5895 Roo.data.Record.REJECT = 'reject';
5896 Roo.data.Record.COMMIT = 'commit';
5897
5898 Roo.data.Record.prototype = {
5899     /**
5900      * Readonly flag - true if this record has been modified.
5901      * @type Boolean
5902      */
5903     dirty : false,
5904     editing : false,
5905     error: null,
5906     modified: null,
5907
5908     // private
5909     join : function(store){
5910         this.store = store;
5911     },
5912
5913     /**
5914      * Set the named field to the specified value.
5915      * @param {String} name The name of the field to set.
5916      * @param {Object} value The value to set the field to.
5917      */
5918     set : function(name, value){
5919         if(this.data[name] == value){
5920             return;
5921         }
5922         this.dirty = true;
5923         if(!this.modified){
5924             this.modified = {};
5925         }
5926         if(typeof this.modified[name] == 'undefined'){
5927             this.modified[name] = this.data[name];
5928         }
5929         this.data[name] = value;
5930         if(!this.editing && this.store){
5931             this.store.afterEdit(this);
5932         }
5933     },
5934
5935     /**
5936      * Get the value of the named field.
5937      * @param {String} name The name of the field to get the value of.
5938      * @return {Object} The value of the field.
5939      */
5940     get : function(name){
5941         return this.data[name];
5942     },
5943
5944     // private
5945     beginEdit : function(){
5946         this.editing = true;
5947         this.modified = {};
5948     },
5949
5950     // private
5951     cancelEdit : function(){
5952         this.editing = false;
5953         delete this.modified;
5954     },
5955
5956     // private
5957     endEdit : function(){
5958         this.editing = false;
5959         if(this.dirty && this.store){
5960             this.store.afterEdit(this);
5961         }
5962     },
5963
5964     /**
5965      * Usually called by the {@link Roo.data.Store} which owns the Record.
5966      * Rejects all changes made to the Record since either creation, or the last commit operation.
5967      * Modified fields are reverted to their original values.
5968      * <p>
5969      * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
5970      * of reject operations.
5971      */
5972     reject : function(){
5973         var m = this.modified;
5974         for(var n in m){
5975             if(typeof m[n] != "function"){
5976                 this.data[n] = m[n];
5977             }
5978         }
5979         this.dirty = false;
5980         delete this.modified;
5981         this.editing = false;
5982         if(this.store){
5983             this.store.afterReject(this);
5984         }
5985     },
5986
5987     /**
5988      * Usually called by the {@link Roo.data.Store} which owns the Record.
5989      * Commits all changes made to the Record since either creation, or the last commit operation.
5990      * <p>
5991      * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
5992      * of commit operations.
5993      */
5994     commit : function(){
5995         this.dirty = false;
5996         delete this.modified;
5997         this.editing = false;
5998         if(this.store){
5999             this.store.afterCommit(this);
6000         }
6001     },
6002
6003     // private
6004     hasError : function(){
6005         return this.error != null;
6006     },
6007
6008     // private
6009     clearError : function(){
6010         this.error = null;
6011     },
6012
6013     /**
6014      * Creates a copy of this record.
6015      * @param {String} id (optional) A new record id if you don't want to use this record's id
6016      * @return {Record}
6017      */
6018     copy : function(newId) {
6019         return new this.constructor(Roo.apply({}, this.data), newId || this.id);
6020     }
6021 };/*
6022  * Based on:
6023  * Ext JS Library 1.1.1
6024  * Copyright(c) 2006-2007, Ext JS, LLC.
6025  *
6026  * Originally Released Under LGPL - original licence link has changed is not relivant.
6027  *
6028  * Fork - LGPL
6029  * <script type="text/javascript">
6030  */
6031
6032
6033
6034 /**
6035  * @class Roo.data.Store
6036  * @extends Roo.util.Observable
6037  * The Store class encapsulates a client side cache of {@link Roo.data.Record} objects which provide input data
6038  * for widgets such as the Roo.grid.Grid, or the Roo.form.ComboBox.<br>
6039  * <p>
6040  * A Store object uses an implementation of {@link Roo.data.DataProxy} to access a data object unless you call loadData() directly and pass in your data. The Store object
6041  * has no knowledge of the format of the data returned by the Proxy.<br>
6042  * <p>
6043  * A Store object uses its configured implementation of {@link Roo.data.DataReader} to create {@link Roo.data.Record}
6044  * instances from the data object. These records are cached and made available through accessor functions.
6045  * @constructor
6046  * Creates a new Store.
6047  * @param {Object} config A config object containing the objects needed for the Store to access data,
6048  * and read the data into Records.
6049  */
6050 Roo.data.Store = function(config){
6051     this.data = new Roo.util.MixedCollection(false);
6052     this.data.getKey = function(o){
6053         return o.id;
6054     };
6055     this.baseParams = {};
6056     // private
6057     this.paramNames = {
6058         "start" : "start",
6059         "limit" : "limit",
6060         "sort" : "sort",
6061         "dir" : "dir",
6062         "multisort" : "_multisort"
6063     };
6064
6065     if(config && config.data){
6066         this.inlineData = config.data;
6067         delete config.data;
6068     }
6069
6070     Roo.apply(this, config);
6071
6072     if(this.reader){ // reader passed
6073         this.reader = Roo.factory(this.reader, Roo.data);
6074         this.reader.xmodule = this.xmodule || false;
6075         if(!this.recordType){
6076             this.recordType = this.reader.recordType;
6077         }
6078         if(this.reader.onMetaChange){
6079             this.reader.onMetaChange = this.onMetaChange.createDelegate(this);
6080         }
6081     }
6082
6083     if(this.recordType){
6084         this.fields = this.recordType.prototype.fields;
6085     }
6086     this.modified = [];
6087
6088     this.addEvents({
6089         /**
6090          * @event datachanged
6091          * Fires when the data cache has changed, and a widget which is using this Store
6092          * as a Record cache should refresh its view.
6093          * @param {Store} this
6094          */
6095         datachanged : true,
6096         /**
6097          * @event metachange
6098          * Fires when this store's reader provides new metadata (fields). This is currently only support for JsonReaders.
6099          * @param {Store} this
6100          * @param {Object} meta The JSON metadata
6101          */
6102         metachange : true,
6103         /**
6104          * @event add
6105          * Fires when Records have been added to the Store
6106          * @param {Store} this
6107          * @param {Roo.data.Record[]} records The array of Records added
6108          * @param {Number} index The index at which the record(s) were added
6109          */
6110         add : true,
6111         /**
6112          * @event remove
6113          * Fires when a Record has been removed from the Store
6114          * @param {Store} this
6115          * @param {Roo.data.Record} record The Record that was removed
6116          * @param {Number} index The index at which the record was removed
6117          */
6118         remove : true,
6119         /**
6120          * @event update
6121          * Fires when a Record has been updated
6122          * @param {Store} this
6123          * @param {Roo.data.Record} record The Record that was updated
6124          * @param {String} operation The update operation being performed.  Value may be one of:
6125          * <pre><code>
6126  Roo.data.Record.EDIT
6127  Roo.data.Record.REJECT
6128  Roo.data.Record.COMMIT
6129          * </code></pre>
6130          */
6131         update : true,
6132         /**
6133          * @event clear
6134          * Fires when the data cache has been cleared.
6135          * @param {Store} this
6136          */
6137         clear : true,
6138         /**
6139          * @event beforeload
6140          * Fires before a request is made for a new data object.  If the beforeload handler returns false
6141          * the load action will be canceled.
6142          * @param {Store} this
6143          * @param {Object} options The loading options that were specified (see {@link #load} for details)
6144          */
6145         beforeload : true,
6146         /**
6147          * @event beforeloadadd
6148          * Fires after a new set of Records has been loaded.
6149          * @param {Store} this
6150          * @param {Roo.data.Record[]} records The Records that were loaded
6151          * @param {Object} options The loading options that were specified (see {@link #load} for details)
6152          */
6153         beforeloadadd : true,
6154         /**
6155          * @event load
6156          * Fires after a new set of Records has been loaded, before they are added to the store.
6157          * @param {Store} this
6158          * @param {Roo.data.Record[]} records The Records that were loaded
6159          * @param {Object} options The loading options that were specified (see {@link #load} for details)
6160          * @params {Object} return from reader
6161          */
6162         load : true,
6163         /**
6164          * @event loadexception
6165          * Fires if an exception occurs in the Proxy during loading.
6166          * Called with the signature of the Proxy's "loadexception" event.
6167          * If you return Json { data: [] , success: false, .... } then this will be thrown with the following args
6168          *
6169          * @param {Proxy}
6170          * @param {Object} return from JsonData.reader() - success, totalRecords, records
6171          * @param {Object} load options
6172          * @param {Object} jsonData from your request (normally this contains the Exception)
6173          */
6174         loadexception : true
6175     });
6176
6177     if(this.proxy){
6178         this.proxy = Roo.factory(this.proxy, Roo.data);
6179         this.proxy.xmodule = this.xmodule || false;
6180         this.relayEvents(this.proxy,  ["loadexception"]);
6181     }
6182     this.sortToggle = {};
6183     this.sortOrder = []; // array of order of sorting - updated by grid if multisort is enabled.
6184
6185     Roo.data.Store.superclass.constructor.call(this);
6186
6187     if(this.inlineData){
6188         this.loadData(this.inlineData);
6189         delete this.inlineData;
6190     }
6191 };
6192
6193 Roo.extend(Roo.data.Store, Roo.util.Observable, {
6194      /**
6195     * @cfg {boolean} isLocal   flag if data is locally available (and can be always looked up
6196     * without a remote query - used by combo/forms at present.
6197     */
6198
6199     /**
6200     * @cfg {Roo.data.DataProxy} proxy The Proxy object which provides access to a data object.
6201     */
6202     /**
6203     * @cfg {Array} data Inline data to be loaded when the store is initialized.
6204     */
6205     /**
6206     * @cfg {Roo.data.Reader} reader The Reader object which processes the data object and returns
6207     * an Array of Roo.data.record objects which are cached keyed by their <em>id</em> property.
6208     */
6209     /**
6210     * @cfg {Object} baseParams An object containing properties which are to be sent as parameters
6211     * on any HTTP request
6212     */
6213     /**
6214     * @cfg {Object} sortInfo A config object in the format: {field: "fieldName", direction: "ASC|DESC"}
6215     */
6216     /**
6217     * @cfg {Boolean} multiSort enable multi column sorting (sort is based on the order of columns, remote only at present)
6218     */
6219     multiSort: false,
6220     /**
6221     * @cfg {boolean} remoteSort True if sorting is to be handled by requesting the Proxy to provide a refreshed
6222     * version of the data object in sorted order, as opposed to sorting the Record cache in place (defaults to false).
6223     */
6224     remoteSort : false,
6225
6226     /**
6227     * @cfg {boolean} pruneModifiedRecords True to clear all modified record information each time the store is
6228      * loaded or when a record is removed. (defaults to false).
6229     */
6230     pruneModifiedRecords : false,
6231
6232     // private
6233     lastOptions : null,
6234
6235     /**
6236      * Add Records to the Store and fires the add event.
6237      * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
6238      */
6239     add : function(records){
6240         records = [].concat(records);
6241         for(var i = 0, len = records.length; i < len; i++){
6242             records[i].join(this);
6243         }
6244         var index = this.data.length;
6245         this.data.addAll(records);
6246         this.fireEvent("add", this, records, index);
6247     },
6248
6249     /**
6250      * Remove a Record from the Store and fires the remove event.
6251      * @param {Ext.data.Record} record The Roo.data.Record object to remove from the cache.
6252      */
6253     remove : function(record){
6254         var index = this.data.indexOf(record);
6255         this.data.removeAt(index);
6256         if(this.pruneModifiedRecords){
6257             this.modified.remove(record);
6258         }
6259         this.fireEvent("remove", this, record, index);
6260     },
6261
6262     /**
6263      * Remove all Records from the Store and fires the clear event.
6264      */
6265     removeAll : function(){
6266         this.data.clear();
6267         if(this.pruneModifiedRecords){
6268             this.modified = [];
6269         }
6270         this.fireEvent("clear", this);
6271     },
6272
6273     /**
6274      * Inserts Records to the Store at the given index and fires the add event.
6275      * @param {Number} index The start index at which to insert the passed Records.
6276      * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
6277      */
6278     insert : function(index, records){
6279         records = [].concat(records);
6280         for(var i = 0, len = records.length; i < len; i++){
6281             this.data.insert(index, records[i]);
6282             records[i].join(this);
6283         }
6284         this.fireEvent("add", this, records, index);
6285     },
6286
6287     /**
6288      * Get the index within the cache of the passed Record.
6289      * @param {Roo.data.Record} record The Roo.data.Record object to to find.
6290      * @return {Number} The index of the passed Record. Returns -1 if not found.
6291      */
6292     indexOf : function(record){
6293         return this.data.indexOf(record);
6294     },
6295
6296     /**
6297      * Get the index within the cache of the Record with the passed id.
6298      * @param {String} id The id of the Record to find.
6299      * @return {Number} The index of the Record. Returns -1 if not found.
6300      */
6301     indexOfId : function(id){
6302         return this.data.indexOfKey(id);
6303     },
6304
6305     /**
6306      * Get the Record with the specified id.
6307      * @param {String} id The id of the Record to find.
6308      * @return {Roo.data.Record} The Record with the passed id. Returns undefined if not found.
6309      */
6310     getById : function(id){
6311         return this.data.key(id);
6312     },
6313
6314     /**
6315      * Get the Record at the specified index.
6316      * @param {Number} index The index of the Record to find.
6317      * @return {Roo.data.Record} The Record at the passed index. Returns undefined if not found.
6318      */
6319     getAt : function(index){
6320         return this.data.itemAt(index);
6321     },
6322
6323     /**
6324      * Returns a range of Records between specified indices.
6325      * @param {Number} startIndex (optional) The starting index (defaults to 0)
6326      * @param {Number} endIndex (optional) The ending index (defaults to the last Record in the Store)
6327      * @return {Roo.data.Record[]} An array of Records
6328      */
6329     getRange : function(start, end){
6330         return this.data.getRange(start, end);
6331     },
6332
6333     // private
6334     storeOptions : function(o){
6335         o = Roo.apply({}, o);
6336         delete o.callback;
6337         delete o.scope;
6338         this.lastOptions = o;
6339     },
6340
6341     /**
6342      * Loads the Record cache from the configured Proxy using the configured Reader.
6343      * <p>
6344      * If using remote paging, then the first load call must specify the <em>start</em>
6345      * and <em>limit</em> properties in the options.params property to establish the initial
6346      * position within the dataset, and the number of Records to cache on each read from the Proxy.
6347      * <p>
6348      * <strong>It is important to note that for remote data sources, loading is asynchronous,
6349      * and this call will return before the new data has been loaded. Perform any post-processing
6350      * in a callback function, or in a "load" event handler.</strong>
6351      * <p>
6352      * @param {Object} options An object containing properties which control loading options:<ul>
6353      * <li>params {Object} An object containing properties to pass as HTTP parameters to a remote data source.</li>
6354      * <li>callback {Function} A function to be called after the Records have been loaded. The callback is
6355      * passed the following arguments:<ul>
6356      * <li>r : Roo.data.Record[]</li>
6357      * <li>options: Options object from the load call</li>
6358      * <li>success: Boolean success indicator</li></ul></li>
6359      * <li>scope {Object} Scope with which to call the callback (defaults to the Store object)</li>
6360      * <li>add {Boolean} indicator to append loaded records rather than replace the current cache.</li>
6361      * </ul>
6362      */
6363     load : function(options){
6364         options = options || {};
6365         if(this.fireEvent("beforeload", this, options) !== false){
6366             this.storeOptions(options);
6367             var p = Roo.apply(options.params || {}, this.baseParams);
6368             // if meta was not loaded from remote source.. try requesting it.
6369             if (!this.reader.metaFromRemote) {
6370                 p._requestMeta = 1;
6371             }
6372             if(this.sortInfo && this.remoteSort){
6373                 var pn = this.paramNames;
6374                 p[pn["sort"]] = this.sortInfo.field;
6375                 p[pn["dir"]] = this.sortInfo.direction;
6376             }
6377             if (this.multiSort) {
6378                 var pn = this.paramNames;
6379                 p[pn["multisort"]] = Roo.encode( { sort : this.sortToggle, order: this.sortOrder });
6380             }
6381
6382             this.proxy.load(p, this.reader, this.loadRecords, this, options);
6383         }
6384     },
6385
6386     /**
6387      * Reloads the Record cache from the configured Proxy using the configured Reader and
6388      * the options from the last load operation performed.
6389      * @param {Object} options (optional) An object containing properties which may override the options
6390      * used in the last load operation. See {@link #load} for details (defaults to null, in which case
6391      * the most recently used options are reused).
6392      */
6393     reload : function(options){
6394         this.load(Roo.applyIf(options||{}, this.lastOptions));
6395     },
6396
6397     // private
6398     // Called as a callback by the Reader during a load operation.
6399     loadRecords : function(o, options, success){
6400         if(!o || success === false){
6401             if(success !== false){
6402                 this.fireEvent("load", this, [], options, o);
6403             }
6404             if(options.callback){
6405                 options.callback.call(options.scope || this, [], options, false);
6406             }
6407             return;
6408         }
6409         // if data returned failure - throw an exception.
6410         if (o.success === false) {
6411             // show a message if no listener is registered.
6412             if (!this.hasListener('loadexception') && typeof(o.raw.errorMsg) != 'undefined') {
6413                     Roo.MessageBox.alert("Error loading",o.raw.errorMsg);
6414             }
6415             // loadmask wil be hooked into this..
6416             this.fireEvent("loadexception", this, o, options, o.raw.errorMsg);
6417             return;
6418         }
6419         var r = o.records, t = o.totalRecords || r.length;
6420
6421         this.fireEvent("beforeloadadd", this, r, options, o);
6422
6423         if(!options || options.add !== true){
6424             if(this.pruneModifiedRecords){
6425                 this.modified = [];
6426             }
6427             for(var i = 0, len = r.length; i < len; i++){
6428                 r[i].join(this);
6429             }
6430             if(this.snapshot){
6431                 this.data = this.snapshot;
6432                 delete this.snapshot;
6433             }
6434             this.data.clear();
6435             this.data.addAll(r);
6436             this.totalLength = t;
6437             this.applySort();
6438             this.fireEvent("datachanged", this);
6439         }else{
6440             this.totalLength = Math.max(t, this.data.length+r.length);
6441             this.add(r);
6442         }
6443         this.fireEvent("load", this, r, options, o);
6444         if(options.callback){
6445             options.callback.call(options.scope || this, r, options, true);
6446         }
6447     },
6448
6449
6450     /**
6451      * Loads data from a passed data block. A Reader which understands the format of the data
6452      * must have been configured in the constructor.
6453      * @param {Object} data The data block from which to read the Records.  The format of the data expected
6454      * is dependent on the type of Reader that is configured and should correspond to that Reader's readRecords parameter.
6455      * @param {Boolean} append (Optional) True to append the new Records rather than replace the existing cache.
6456      */
6457     loadData : function(o, append){
6458         var r = this.reader.readRecords(o);
6459         this.loadRecords(r, {add: append}, true);
6460     },
6461
6462     /**
6463      * Gets the number of cached records.
6464      * <p>
6465      * <em>If using paging, this may not be the total size of the dataset. If the data object
6466      * used by the Reader contains the dataset size, then the getTotalCount() function returns
6467      * the data set size</em>
6468      */
6469     getCount : function(){
6470         return this.data.length || 0;
6471     },
6472
6473     /**
6474      * Gets the total number of records in the dataset as returned by the server.
6475      * <p>
6476      * <em>If using paging, for this to be accurate, the data object used by the Reader must contain
6477      * the dataset size</em>
6478      */
6479     getTotalCount : function(){
6480         return this.totalLength || 0;
6481     },
6482
6483     /**
6484      * Returns the sort state of the Store as an object with two properties:
6485      * <pre><code>
6486  field {String} The name of the field by which the Records are sorted
6487  direction {String} The sort order, "ASC" or "DESC"
6488      * </code></pre>
6489      */
6490     getSortState : function(){
6491         return this.sortInfo;
6492     },
6493
6494     // private
6495     applySort : function(){
6496         if(this.sortInfo && !this.remoteSort){
6497             var s = this.sortInfo, f = s.field;
6498             var st = this.fields.get(f).sortType;
6499             var fn = function(r1, r2){
6500                 var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
6501                 return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
6502             };
6503             this.data.sort(s.direction, fn);
6504             if(this.snapshot && this.snapshot != this.data){
6505                 this.snapshot.sort(s.direction, fn);
6506             }
6507         }
6508     },
6509
6510     /**
6511      * Sets the default sort column and order to be used by the next load operation.
6512      * @param {String} fieldName The name of the field to sort by.
6513      * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
6514      */
6515     setDefaultSort : function(field, dir){
6516         this.sortInfo = {field: field, direction: dir ? dir.toUpperCase() : "ASC"};
6517     },
6518
6519     /**
6520      * Sort the Records.
6521      * If remote sorting is used, the sort is performed on the server, and the cache is
6522      * reloaded. If local sorting is used, the cache is sorted internally.
6523      * @param {String} fieldName The name of the field to sort by.
6524      * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
6525      */
6526     sort : function(fieldName, dir){
6527         var f = this.fields.get(fieldName);
6528         if(!dir){
6529             this.sortToggle[f.name] = this.sortToggle[f.name] || f.sortDir;
6530
6531             if(this.multiSort || (this.sortInfo && this.sortInfo.field == f.name) ){ // toggle sort dir
6532                 dir = (this.sortToggle[f.name] || "ASC").toggle("ASC", "DESC");
6533             }else{
6534                 dir = f.sortDir;
6535             }
6536         }
6537         this.sortToggle[f.name] = dir;
6538         this.sortInfo = {field: f.name, direction: dir};
6539         if(!this.remoteSort){
6540             this.applySort();
6541             this.fireEvent("datachanged", this);
6542         }else{
6543             this.load(this.lastOptions);
6544         }
6545     },
6546
6547     /**
6548      * Calls the specified function for each of the Records in the cache.
6549      * @param {Function} fn The function to call. The Record is passed as the first parameter.
6550      * Returning <em>false</em> aborts and exits the iteration.
6551      * @param {Object} scope (optional) The scope in which to call the function (defaults to the Record).
6552      */
6553     each : function(fn, scope){
6554         this.data.each(fn, scope);
6555     },
6556
6557     /**
6558      * Gets all records modified since the last commit.  Modified records are persisted across load operations
6559      * (e.g., during paging).
6560      * @return {Roo.data.Record[]} An array of Records containing outstanding modifications.
6561      */
6562     getModifiedRecords : function(){
6563         return this.modified;
6564     },
6565
6566     // private
6567     createFilterFn : function(property, value, anyMatch){
6568         if(!value.exec){ // not a regex
6569             value = String(value);
6570             if(value.length == 0){
6571                 return false;
6572             }
6573             value = new RegExp((anyMatch === true ? '' : '^') + Roo.escapeRe(value), "i");
6574         }
6575         return function(r){
6576             return value.test(r.data[property]);
6577         };
6578     },
6579
6580     /**
6581      * Sums the value of <i>property</i> for each record between start and end and returns the result.
6582      * @param {String} property A field on your records
6583      * @param {Number} start The record index to start at (defaults to 0)
6584      * @param {Number} end The last record index to include (defaults to length - 1)
6585      * @return {Number} The sum
6586      */
6587     sum : function(property, start, end){
6588         var rs = this.data.items, v = 0;
6589         start = start || 0;
6590         end = (end || end === 0) ? end : rs.length-1;
6591
6592         for(var i = start; i <= end; i++){
6593             v += (rs[i].data[property] || 0);
6594         }
6595         return v;
6596     },
6597
6598     /**
6599      * Filter the records by a specified property.
6600      * @param {String} field A field on your records
6601      * @param {String/RegExp} value Either a string that the field
6602      * should start with or a RegExp to test against the field
6603      * @param {Boolean} anyMatch True to match any part not just the beginning
6604      */
6605     filter : function(property, value, anyMatch){
6606         var fn = this.createFilterFn(property, value, anyMatch);
6607         return fn ? this.filterBy(fn) : this.clearFilter();
6608     },
6609
6610     /**
6611      * Filter by a function. The specified function will be called with each
6612      * record in this data source. If the function returns true the record is included,
6613      * otherwise it is filtered.
6614      * @param {Function} fn The function to be called, it will receive 2 args (record, id)
6615      * @param {Object} scope (optional) The scope of the function (defaults to this)
6616      */
6617     filterBy : function(fn, scope){
6618         this.snapshot = this.snapshot || this.data;
6619         this.data = this.queryBy(fn, scope||this);
6620         this.fireEvent("datachanged", this);
6621     },
6622
6623     /**
6624      * Query the records by a specified property.
6625      * @param {String} field A field on your records
6626      * @param {String/RegExp} value Either a string that the field
6627      * should start with or a RegExp to test against the field
6628      * @param {Boolean} anyMatch True to match any part not just the beginning
6629      * @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
6630      */
6631     query : function(property, value, anyMatch){
6632         var fn = this.createFilterFn(property, value, anyMatch);
6633         return fn ? this.queryBy(fn) : this.data.clone();
6634     },
6635
6636     /**
6637      * Query by a function. The specified function will be called with each
6638      * record in this data source. If the function returns true the record is included
6639      * in the results.
6640      * @param {Function} fn The function to be called, it will receive 2 args (record, id)
6641      * @param {Object} scope (optional) The scope of the function (defaults to this)
6642       @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
6643      **/
6644     queryBy : function(fn, scope){
6645         var data = this.snapshot || this.data;
6646         return data.filterBy(fn, scope||this);
6647     },
6648
6649     /**
6650      * Collects unique values for a particular dataIndex from this store.
6651      * @param {String} dataIndex The property to collect
6652      * @param {Boolean} allowNull (optional) Pass true to allow null, undefined or empty string values
6653      * @param {Boolean} bypassFilter (optional) Pass true to collect from all records, even ones which are filtered
6654      * @return {Array} An array of the unique values
6655      **/
6656     collect : function(dataIndex, allowNull, bypassFilter){
6657         var d = (bypassFilter === true && this.snapshot) ?
6658                 this.snapshot.items : this.data.items;
6659         var v, sv, r = [], l = {};
6660         for(var i = 0, len = d.length; i < len; i++){
6661             v = d[i].data[dataIndex];
6662             sv = String(v);
6663             if((allowNull || !Roo.isEmpty(v)) && !l[sv]){
6664                 l[sv] = true;
6665                 r[r.length] = v;
6666             }
6667         }
6668         return r;
6669     },
6670
6671     /**
6672      * Revert to a view of the Record cache with no filtering applied.
6673      * @param {Boolean} suppressEvent If true the filter is cleared silently without notifying listeners
6674      */
6675     clearFilter : function(suppressEvent){
6676         if(this.snapshot && this.snapshot != this.data){
6677             this.data = this.snapshot;
6678             delete this.snapshot;
6679             if(suppressEvent !== true){
6680                 this.fireEvent("datachanged", this);
6681             }
6682         }
6683     },
6684
6685     // private
6686     afterEdit : function(record){
6687         if(this.modified.indexOf(record) == -1){
6688             this.modified.push(record);
6689         }
6690         this.fireEvent("update", this, record, Roo.data.Record.EDIT);
6691     },
6692
6693     // private
6694     afterReject : function(record){
6695         this.modified.remove(record);
6696         this.fireEvent("update", this, record, Roo.data.Record.REJECT);
6697     },
6698
6699     // private
6700     afterCommit : function(record){
6701         this.modified.remove(record);
6702         this.fireEvent("update", this, record, Roo.data.Record.COMMIT);
6703     },
6704
6705     /**
6706      * Commit all Records with outstanding changes. To handle updates for changes, subscribe to the
6707      * Store's "update" event, and perform updating when the third parameter is Roo.data.Record.COMMIT.
6708      */
6709     commitChanges : function(){
6710         var m = this.modified.slice(0);
6711         this.modified = [];
6712         for(var i = 0, len = m.length; i < len; i++){
6713             m[i].commit();
6714         }
6715     },
6716
6717     /**
6718      * Cancel outstanding changes on all changed records.
6719      */
6720     rejectChanges : function(){
6721         var m = this.modified.slice(0);
6722         this.modified = [];
6723         for(var i = 0, len = m.length; i < len; i++){
6724             m[i].reject();
6725         }
6726     },
6727
6728     onMetaChange : function(meta, rtype, o){
6729         this.recordType = rtype;
6730         this.fields = rtype.prototype.fields;
6731         delete this.snapshot;
6732         this.sortInfo = meta.sortInfo || this.sortInfo;
6733         this.modified = [];
6734         this.fireEvent('metachange', this, this.reader.meta);
6735     },
6736
6737     moveIndex : function(data, type)
6738     {
6739         var index = this.indexOf(data);
6740
6741         var newIndex = index + type;
6742
6743         this.remove(data);
6744
6745         this.insert(newIndex, data);
6746
6747     }
6748 });/*
6749  * Based on:
6750  * Ext JS Library 1.1.1
6751  * Copyright(c) 2006-2007, Ext JS, LLC.
6752  *
6753  * Originally Released Under LGPL - original licence link has changed is not relivant.
6754  *
6755  * Fork - LGPL
6756  * <script type="text/javascript">
6757  */
6758
6759 /**
6760  * @class Roo.data.SimpleStore
6761  * @extends Roo.data.Store
6762  * Small helper class to make creating Stores from Array data easier.
6763  * @cfg {Number} id The array index of the record id. Leave blank to auto generate ids.
6764  * @cfg {Array} fields An array of field definition objects, or field name strings.
6765  * @cfg {Array} data The multi-dimensional array of data
6766  * @constructor
6767  * @param {Object} config
6768  */
6769 Roo.data.SimpleStore = function(config){
6770     Roo.data.SimpleStore.superclass.constructor.call(this, {
6771         isLocal : true,
6772         reader: new Roo.data.ArrayReader({
6773                 id: config.id
6774             },
6775             Roo.data.Record.create(config.fields)
6776         ),
6777         proxy : new Roo.data.MemoryProxy(config.data)
6778     });
6779     this.load();
6780 };
6781 Roo.extend(Roo.data.SimpleStore, Roo.data.Store);/*
6782  * Based on:
6783  * Ext JS Library 1.1.1
6784  * Copyright(c) 2006-2007, Ext JS, LLC.
6785  *
6786  * Originally Released Under LGPL - original licence link has changed is not relivant.
6787  *
6788  * Fork - LGPL
6789  * <script type="text/javascript">
6790  */
6791
6792 /**
6793 /**
6794  * @extends Roo.data.Store
6795  * @class Roo.data.JsonStore
6796  * Small helper class to make creating Stores for JSON data easier. <br/>
6797 <pre><code>
6798 var store = new Roo.data.JsonStore({
6799     url: 'get-images.php',
6800     root: 'images',
6801     fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
6802 });
6803 </code></pre>
6804  * <b>Note: Although they are not listed, this class inherits all of the config options of Store,
6805  * JsonReader and HttpProxy (unless inline data is provided).</b>
6806  * @cfg {Array} fields An array of field definition objects, or field name strings.
6807  * @constructor
6808  * @param {Object} config
6809  */
6810 Roo.data.JsonStore = function(c){
6811     Roo.data.JsonStore.superclass.constructor.call(this, Roo.apply(c, {
6812         proxy: !c.data ? new Roo.data.HttpProxy({url: c.url}) : undefined,
6813         reader: new Roo.data.JsonReader(c, c.fields)
6814     }));
6815 };
6816 Roo.extend(Roo.data.JsonStore, Roo.data.Store);/*
6817  * Based on:
6818  * Ext JS Library 1.1.1
6819  * Copyright(c) 2006-2007, Ext JS, LLC.
6820  *
6821  * Originally Released Under LGPL - original licence link has changed is not relivant.
6822  *
6823  * Fork - LGPL
6824  * <script type="text/javascript">
6825  */
6826
6827
6828 Roo.data.Field = function(config){
6829     if(typeof config == "string"){
6830         config = {name: config};
6831     }
6832     Roo.apply(this, config);
6833
6834     if(!this.type){
6835         this.type = "auto";
6836     }
6837
6838     var st = Roo.data.SortTypes;
6839     // named sortTypes are supported, here we look them up
6840     if(typeof this.sortType == "string"){
6841         this.sortType = st[this.sortType];
6842     }
6843
6844     // set default sortType for strings and dates
6845     if(!this.sortType){
6846         switch(this.type){
6847             case "string":
6848                 this.sortType = st.asUCString;
6849                 break;
6850             case "date":
6851                 this.sortType = st.asDate;
6852                 break;
6853             default:
6854                 this.sortType = st.none;
6855         }
6856     }
6857
6858     // define once
6859     var stripRe = /[\$,%]/g;
6860
6861     // prebuilt conversion function for this field, instead of
6862     // switching every time we're reading a value
6863     if(!this.convert){
6864         var cv, dateFormat = this.dateFormat;
6865         switch(this.type){
6866             case "":
6867             case "auto":
6868             case undefined:
6869                 cv = function(v){ return v; };
6870                 break;
6871             case "string":
6872                 cv = function(v){ return (v === undefined || v === null) ? '' : String(v); };
6873                 break;
6874             case "int":
6875                 cv = function(v){
6876                     return v !== undefined && v !== null && v !== '' ?
6877                            parseInt(String(v).replace(stripRe, ""), 10) : '';
6878                     };
6879                 break;
6880             case "float":
6881                 cv = function(v){
6882                     return v !== undefined && v !== null && v !== '' ?
6883                            parseFloat(String(v).replace(stripRe, ""), 10) : '';
6884                     };
6885                 break;
6886             case "bool":
6887             case "boolean":
6888                 cv = function(v){ return v === true || v === "true" || v == 1; };
6889                 break;
6890             case "date":
6891                 cv = function(v){
6892                     if(!v){
6893                         return '';
6894                     }
6895                     if(v instanceof Date){
6896                         return v;
6897                     }
6898                     if(dateFormat){
6899                         if(dateFormat == "timestamp"){
6900                             return new Date(v*1000);
6901                         }
6902                         return Date.parseDate(v, dateFormat);
6903                     }
6904                     var parsed = Date.parse(v);
6905                     return parsed ? new Date(parsed) : null;
6906                 };
6907              break;
6908
6909         }
6910         this.convert = cv;
6911     }
6912 };
6913
6914 Roo.data.Field.prototype = {
6915     dateFormat: null,
6916     defaultValue: "",
6917     mapping: null,
6918     sortType : null,
6919     sortDir : "ASC"
6920 };/*
6921  * Based on:
6922  * Ext JS Library 1.1.1
6923  * Copyright(c) 2006-2007, Ext JS, LLC.
6924  *
6925  * Originally Released Under LGPL - original licence link has changed is not relivant.
6926  *
6927  * Fork - LGPL
6928  * <script type="text/javascript">
6929  */
6930
6931 // Base class for reading structured data from a data source.  This class is intended to be
6932 // extended (see ArrayReader, JsonReader and XmlReader) and should not be created directly.
6933
6934 /**
6935  * @class Roo.data.DataReader
6936  * Base class for reading structured data from a data source.  This class is intended to be
6937  * extended (see {Roo.data.ArrayReader}, {Roo.data.JsonReader} and {Roo.data.XmlReader}) and should not be created directly.
6938  */
6939
6940 Roo.data.DataReader = function(meta, recordType){
6941
6942     this.meta = meta;
6943
6944     this.recordType = recordType instanceof Array ?
6945         Roo.data.Record.create(recordType) : recordType;
6946 };
6947
6948 Roo.data.DataReader.prototype = {
6949      /**
6950      * Create an empty record
6951      * @param {Object} data (optional) - overlay some values
6952      * @return {Roo.data.Record} record created.
6953      */
6954     newRow :  function(d) {
6955         var da =  {};
6956         this.recordType.prototype.fields.each(function(c) {
6957             switch( c.type) {
6958                 case 'int' : da[c.name] = 0; break;
6959                 case 'date' : da[c.name] = new Date(); break;
6960                 case 'float' : da[c.name] = 0.0; break;
6961                 case 'boolean' : da[c.name] = false; break;
6962                 default : da[c.name] = ""; break;
6963             }
6964
6965         });
6966         return new this.recordType(Roo.apply(da, d));
6967     }
6968
6969 };/*
6970  * Based on:
6971  * Ext JS Library 1.1.1
6972  * Copyright(c) 2006-2007, Ext JS, LLC.
6973  *
6974  * Originally Released Under LGPL - original licence link has changed is not relivant.
6975  *
6976  * Fork - LGPL
6977  * <script type="text/javascript">
6978  */
6979
6980 /**
6981  * @class Roo.data.DataProxy
6982  * @extends Roo.data.Observable
6983  * This class is an abstract base class for implementations which provide retrieval of
6984  * unformatted data objects.<br>
6985  * <p>
6986  * DataProxy implementations are usually used in conjunction with an implementation of Roo.data.DataReader
6987  * (of the appropriate type which knows how to parse the data object) to provide a block of
6988  * {@link Roo.data.Records} to an {@link Roo.data.Store}.<br>
6989  * <p>
6990  * Custom implementations must implement the load method as described in
6991  * {@link Roo.data.HttpProxy#load}.
6992  */
6993 Roo.data.DataProxy = function(){
6994     this.addEvents({
6995         /**
6996          * @event beforeload
6997          * Fires before a network request is made to retrieve a data object.
6998          * @param {Object} This DataProxy object.
6999          * @param {Object} params The params parameter to the load function.
7000          */
7001         beforeload : true,
7002         /**
7003          * @event load
7004          * Fires before the load method's callback is called.
7005          * @param {Object} This DataProxy object.
7006          * @param {Object} o The data object.
7007          * @param {Object} arg The callback argument object passed to the load function.
7008          */
7009         load : true,
7010         /**
7011          * @event loadexception
7012          * Fires if an Exception occurs during data retrieval.
7013          * @param {Object} This DataProxy object.
7014          * @param {Object} o The data object.
7015          * @param {Object} arg The callback argument object passed to the load function.
7016          * @param {Object} e The Exception.
7017          */
7018         loadexception : true
7019     });
7020     Roo.data.DataProxy.superclass.constructor.call(this);
7021 };
7022
7023 Roo.extend(Roo.data.DataProxy, Roo.util.Observable);
7024
7025     /**
7026      * @cfg {void} listeners (Not available) Constructor blocks listeners from being set
7027      */
7028 /*
7029  * Based on:
7030  * Ext JS Library 1.1.1
7031  * Copyright(c) 2006-2007, Ext JS, LLC.
7032  *
7033  * Originally Released Under LGPL - original licence link has changed is not relivant.
7034  *
7035  * Fork - LGPL
7036  * <script type="text/javascript">
7037  */
7038 /**
7039  * @class Roo.data.MemoryProxy
7040  * An implementation of Roo.data.DataProxy that simply passes the data specified in its constructor
7041  * to the Reader when its load method is called.
7042  * @constructor
7043  * @param {Object} data The data object which the Reader uses to construct a block of Roo.data.Records.
7044  */
7045 Roo.data.MemoryProxy = function(data){
7046     if (data.data) {
7047         data = data.data;
7048     }
7049     Roo.data.MemoryProxy.superclass.constructor.call(this);
7050     this.data = data;
7051 };
7052
7053 Roo.extend(Roo.data.MemoryProxy, Roo.data.DataProxy, {
7054     /**
7055      * Load data from the requested source (in this case an in-memory
7056      * data object passed to the constructor), read the data object into
7057      * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
7058      * process that block using the passed callback.
7059      * @param {Object} params This parameter is not used by the MemoryProxy class.
7060      * @param {Roo.data.DataReader} reader The Reader object which converts the data
7061      * object into a block of Roo.data.Records.
7062      * @param {Function} callback The function into which to pass the block of Roo.data.records.
7063      * The function must be passed <ul>
7064      * <li>The Record block object</li>
7065      * <li>The "arg" argument from the load function</li>
7066      * <li>A boolean success indicator</li>
7067      * </ul>
7068      * @param {Object} scope The scope in which to call the callback
7069      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
7070      */
7071     load : function(params, reader, callback, scope, arg){
7072         params = params || {};
7073         var result;
7074         try {
7075             result = reader.readRecords(this.data);
7076         }catch(e){
7077             this.fireEvent("loadexception", this, arg, null, e);
7078             callback.call(scope, null, arg, false);
7079             return;
7080         }
7081         callback.call(scope, result, arg, true);
7082     },
7083
7084     // private
7085     update : function(params, records){
7086
7087     }
7088 });/*
7089  * Based on:
7090  * Ext JS Library 1.1.1
7091  * Copyright(c) 2006-2007, Ext JS, LLC.
7092  *
7093  * Originally Released Under LGPL - original licence link has changed is not relivant.
7094  *
7095  * Fork - LGPL
7096  * <script type="text/javascript">
7097  */
7098 /**
7099  * @class Roo.data.HttpProxy
7100  * @extends Roo.data.DataProxy
7101  * An implementation of {@link Roo.data.DataProxy} that reads a data object from an {@link Roo.data.Connection} object
7102  * configured to reference a certain URL.<br><br>
7103  * <p>
7104  * <em>Note that this class cannot be used to retrieve data from a domain other than the domain
7105  * from which the running page was served.<br><br>
7106  * <p>
7107  * For cross-domain access to remote data, use an {@link Roo.data.ScriptTagProxy}.</em><br><br>
7108  * <p>
7109  * Be aware that to enable the browser to parse an XML document, the server must set
7110  * the Content-Type header in the HTTP response to "text/xml".
7111  * @constructor
7112  * @param {Object} conn Connection config options to add to each request (e.g. {url: 'foo.php'} or
7113  * an {@link Roo.data.Connection} object.  If a Connection config is passed, the singleton {@link Roo.Ajax} object
7114  * will be used to make the request.
7115  */
7116 Roo.data.HttpProxy = function(conn){
7117     Roo.data.HttpProxy.superclass.constructor.call(this);
7118     // is conn a conn config or a real conn?
7119     this.conn = conn;
7120     this.useAjax = !conn || !conn.events;
7121
7122 };
7123
7124 Roo.extend(Roo.data.HttpProxy, Roo.data.DataProxy, {
7125     // thse are take from connection...
7126
7127     /**
7128      * @cfg {String} url (Optional) The default URL to be used for requests to the server. (defaults to undefined)
7129      */
7130     /**
7131      * @cfg {Object} extraParams (Optional) An object containing properties which are used as
7132      * extra parameters to each request made by this object. (defaults to undefined)
7133      */
7134     /**
7135      * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
7136      *  to each request made by this object. (defaults to undefined)
7137      */
7138     /**
7139      * @cfg {String} method (Optional) The default HTTP method to be used for requests. (defaults to undefined; if not set but parms are present will use POST, otherwise GET)
7140      */
7141     /**
7142      * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
7143      */
7144      /**
7145      * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
7146      * @type Boolean
7147      */
7148
7149
7150     /**
7151      * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
7152      * @type Boolean
7153      */
7154     /**
7155      * Return the {@link Roo.data.Connection} object being used by this Proxy.
7156      * @return {Connection} The Connection object. This object may be used to subscribe to events on
7157      * a finer-grained basis than the DataProxy events.
7158      */
7159     getConnection : function(){
7160         return this.useAjax ? Roo.Ajax : this.conn;
7161     },
7162
7163     /**
7164      * Load data from the configured {@link Roo.data.Connection}, read the data object into
7165      * a block of Roo.data.Records using the passed {@link Roo.data.DataReader} implementation, and
7166      * process that block using the passed callback.
7167      * @param {Object} params An object containing properties which are to be used as HTTP parameters
7168      * for the request to the remote server.
7169      * @param {Roo.data.DataReader} reader The Reader object which converts the data
7170      * object into a block of Roo.data.Records.
7171      * @param {Function} callback The function into which to pass the block of Roo.data.Records.
7172      * The function must be passed <ul>
7173      * <li>The Record block object</li>
7174      * <li>The "arg" argument from the load function</li>
7175      * <li>A boolean success indicator</li>
7176      * </ul>
7177      * @param {Object} scope The scope in which to call the callback
7178      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
7179      */
7180     load : function(params, reader, callback, scope, arg){
7181         if(this.fireEvent("beforeload", this, params) !== false){
7182             var  o = {
7183                 params : params || {},
7184                 request: {
7185                     callback : callback,
7186                     scope : scope,
7187                     arg : arg
7188                 },
7189                 reader: reader,
7190                 callback : this.loadResponse,
7191                 scope: this
7192             };
7193             if(this.useAjax){
7194                 Roo.applyIf(o, this.conn);
7195                 if(this.activeRequest){
7196                     Roo.Ajax.abort(this.activeRequest);
7197                 }
7198                 this.activeRequest = Roo.Ajax.request(o);
7199             }else{
7200                 this.conn.request(o);
7201             }
7202         }else{
7203             callback.call(scope||this, null, arg, false);
7204         }
7205     },
7206
7207     // private
7208     loadResponse : function(o, success, response){
7209         delete this.activeRequest;
7210         if(!success){
7211             this.fireEvent("loadexception", this, o, response);
7212             o.request.callback.call(o.request.scope, null, o.request.arg, false);
7213             return;
7214         }
7215         var result;
7216         try {
7217             result = o.reader.read(response);
7218         }catch(e){
7219             this.fireEvent("loadexception", this, o, response, e);
7220             o.request.callback.call(o.request.scope, null, o.request.arg, false);
7221             return;
7222         }
7223
7224         this.fireEvent("load", this, o, o.request.arg);
7225         o.request.callback.call(o.request.scope, result, o.request.arg, true);
7226     },
7227
7228     // private
7229     update : function(dataSet){
7230
7231     },
7232
7233     // private
7234     updateResponse : function(dataSet){
7235
7236     }
7237 });/*
7238  * Based on:
7239  * Ext JS Library 1.1.1
7240  * Copyright(c) 2006-2007, Ext JS, LLC.
7241  *
7242  * Originally Released Under LGPL - original licence link has changed is not relivant.
7243  *
7244  * Fork - LGPL
7245  * <script type="text/javascript">
7246  */
7247
7248 /**
7249  * @class Roo.data.ScriptTagProxy
7250  * An implementation of Roo.data.DataProxy that reads a data object from a URL which may be in a domain
7251  * other than the originating domain of the running page.<br><br>
7252  * <p>
7253  * <em>Note that if you are retrieving data from a page that is in a domain that is NOT the same as the originating domain
7254  * of the running page, you must use this class, rather than DataProxy.</em><br><br>
7255  * <p>
7256  * The content passed back from a server resource requested by a ScriptTagProxy is executable JavaScript
7257  * source code that is used as the source inside a &lt;script> tag.<br><br>
7258  * <p>
7259  * In order for the browser to process the returned data, the server must wrap the data object
7260  * with a call to a callback function, the name of which is passed as a parameter by the ScriptTagProxy.
7261  * Below is a Java example for a servlet which returns data for either a ScriptTagProxy, or an HttpProxy
7262  * depending on whether the callback name was passed:
7263  * <p>
7264  * <pre><code>
7265 boolean scriptTag = false;
7266 String cb = request.getParameter("callback");
7267 if (cb != null) {
7268     scriptTag = true;
7269     response.setContentType("text/javascript");
7270 } else {
7271     response.setContentType("application/x-json");
7272 }
7273 Writer out = response.getWriter();
7274 if (scriptTag) {
7275     out.write(cb + "(");
7276 }
7277 out.print(dataBlock.toJsonString());
7278 if (scriptTag) {
7279     out.write(");");
7280 }
7281 </pre></code>
7282  *
7283  * @constructor
7284  * @param {Object} config A configuration object.
7285  */
7286 Roo.data.ScriptTagProxy = function(config){
7287     Roo.data.ScriptTagProxy.superclass.constructor.call(this);
7288     Roo.apply(this, config);
7289     this.head = document.getElementsByTagName("head")[0];
7290 };
7291
7292 Roo.data.ScriptTagProxy.TRANS_ID = 1000;
7293
7294 Roo.extend(Roo.data.ScriptTagProxy, Roo.data.DataProxy, {
7295     /**
7296      * @cfg {String} url The URL from which to request the data object.
7297      */
7298     /**
7299      * @cfg {Number} timeout (Optional) The number of milliseconds to wait for a response. Defaults to 30 seconds.
7300      */
7301     timeout : 30000,
7302     /**
7303      * @cfg {String} callbackParam (Optional) The name of the parameter to pass to the server which tells
7304      * the server the name of the callback function set up by the load call to process the returned data object.
7305      * Defaults to "callback".<p>The server-side processing must read this parameter value, and generate
7306      * javascript output which calls this named function passing the data object as its only parameter.
7307      */
7308     callbackParam : "callback",
7309     /**
7310      *  @cfg {Boolean} nocache (Optional) Defaults to true. Disable cacheing by adding a unique parameter
7311      * name to the request.
7312      */
7313     nocache : true,
7314
7315     /**
7316      * Load data from the configured URL, read the data object into
7317      * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
7318      * process that block using the passed callback.
7319      * @param {Object} params An object containing properties which are to be used as HTTP parameters
7320      * for the request to the remote server.
7321      * @param {Roo.data.DataReader} reader The Reader object which converts the data
7322      * object into a block of Roo.data.Records.
7323      * @param {Function} callback The function into which to pass the block of Roo.data.Records.
7324      * The function must be passed <ul>
7325      * <li>The Record block object</li>
7326      * <li>The "arg" argument from the load function</li>
7327      * <li>A boolean success indicator</li>
7328      * </ul>
7329      * @param {Object} scope The scope in which to call the callback
7330      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
7331      */
7332     load : function(params, reader, callback, scope, arg){
7333         if(this.fireEvent("beforeload", this, params) !== false){
7334
7335             var p = Roo.urlEncode(Roo.apply(params, this.extraParams));
7336
7337             var url = this.url;
7338             url += (url.indexOf("?") != -1 ? "&" : "?") + p;
7339             if(this.nocache){
7340                 url += "&_dc=" + (new Date().getTime());
7341             }
7342             var transId = ++Roo.data.ScriptTagProxy.TRANS_ID;
7343             var trans = {
7344                 id : transId,
7345                 cb : "stcCallback"+transId,
7346                 scriptId : "stcScript"+transId,
7347                 params : params,
7348                 arg : arg,
7349                 url : url,
7350                 callback : callback,
7351                 scope : scope,
7352                 reader : reader
7353             };
7354             var conn = this;
7355
7356             window[trans.cb] = function(o){
7357                 conn.handleResponse(o, trans);
7358             };
7359
7360             url += String.format("&{0}={1}", this.callbackParam, trans.cb);
7361
7362             if(this.autoAbort !== false){
7363                 this.abort();
7364             }
7365
7366             trans.timeoutId = this.handleFailure.defer(this.timeout, this, [trans]);
7367
7368             var script = document.createElement("script");
7369             script.setAttribute("src", url);
7370             script.setAttribute("type", "text/javascript");
7371             script.setAttribute("id", trans.scriptId);
7372             this.head.appendChild(script);
7373
7374             this.trans = trans;
7375         }else{
7376             callback.call(scope||this, null, arg, false);
7377         }
7378     },
7379
7380     // private
7381     isLoading : function(){
7382         return this.trans ? true : false;
7383     },
7384
7385     /**
7386      * Abort the current server request.
7387      */
7388     abort : function(){
7389         if(this.isLoading()){
7390             this.destroyTrans(this.trans);
7391         }
7392     },
7393
7394     // private
7395     destroyTrans : function(trans, isLoaded){
7396         this.head.removeChild(document.getElementById(trans.scriptId));
7397         clearTimeout(trans.timeoutId);
7398         if(isLoaded){
7399             window[trans.cb] = undefined;
7400             try{
7401                 delete window[trans.cb];
7402             }catch(e){}
7403         }else{
7404             // if hasn't been loaded, wait for load to remove it to prevent script error
7405             window[trans.cb] = function(){
7406                 window[trans.cb] = undefined;
7407                 try{
7408                     delete window[trans.cb];
7409                 }catch(e){}
7410             };
7411         }
7412     },
7413
7414     // private
7415     handleResponse : function(o, trans){
7416         this.trans = false;
7417         this.destroyTrans(trans, true);
7418         var result;
7419         try {
7420             result = trans.reader.readRecords(o);
7421         }catch(e){
7422             this.fireEvent("loadexception", this, o, trans.arg, e);
7423             trans.callback.call(trans.scope||window, null, trans.arg, false);
7424             return;
7425         }
7426         this.fireEvent("load", this, o, trans.arg);
7427         trans.callback.call(trans.scope||window, result, trans.arg, true);
7428     },
7429
7430     // private
7431     handleFailure : function(trans){
7432         this.trans = false;
7433         this.destroyTrans(trans, false);
7434         this.fireEvent("loadexception", this, null, trans.arg);
7435         trans.callback.call(trans.scope||window, null, trans.arg, false);
7436     }
7437 });/*
7438  * Based on:
7439  * Ext JS Library 1.1.1
7440  * Copyright(c) 2006-2007, Ext JS, LLC.
7441  *
7442  * Originally Released Under LGPL - original licence link has changed is not relivant.
7443  *
7444  * Fork - LGPL
7445  * <script type="text/javascript">
7446  */
7447
7448 /**
7449  * @class Roo.data.JsonReader
7450  * @extends Roo.data.DataReader
7451  * Data reader class to create an Array of Roo.data.Record objects from a JSON response
7452  * based on mappings in a provided Roo.data.Record constructor.
7453  *
7454  * The default behaviour of a store is to send ?_requestMeta=1, unless the class has recieved 'metaData' property
7455  * in the reply previously.
7456  *
7457  * <p>
7458  * Example code:
7459  * <pre><code>
7460 var RecordDef = Roo.data.Record.create([
7461     {name: 'name', mapping: 'name'},     // "mapping" property not needed if it's the same as "name"
7462     {name: 'occupation'}                 // This field will use "occupation" as the mapping.
7463 ]);
7464 var myReader = new Roo.data.JsonReader({
7465     totalProperty: "results",    // The property which contains the total dataset size (optional)
7466     root: "rows",                // The property which contains an Array of row objects
7467     id: "id"                     // The property within each row object that provides an ID for the record (optional)
7468 }, RecordDef);
7469 </code></pre>
7470  * <p>
7471  * This would consume a JSON file like this:
7472  * <pre><code>
7473 { 'results': 2, 'rows': [
7474     { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
7475     { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
7476 }
7477 </code></pre>
7478  * @cfg {String} totalProperty Name of the property from which to retrieve the total number of records
7479  * in the dataset. This is only needed if the whole dataset is not passed in one go, but is being
7480  * paged from the remote server.
7481  * @cfg {String} successProperty Name of the property from which to retrieve the success attribute used by forms.
7482  * @cfg {String} root name of the property which contains the Array of row objects.
7483  * @cfg {String} id Name of the property within a row object that contains a record identifier value.
7484  * @constructor
7485  * Create a new JsonReader
7486  * @param {Object} meta Metadata configuration options
7487  * @param {Object} recordType Either an Array of field definition objects,
7488  * or an {@link Roo.data.Record} object created using {@link Roo.data.Record#create}.
7489  */
7490 Roo.data.JsonReader = function(meta, recordType){
7491
7492     meta = meta || {};
7493     // set some defaults:
7494     Roo.applyIf(meta, {
7495         totalProperty: 'total',
7496         successProperty : 'success',
7497         root : 'data',
7498         id : 'id'
7499     });
7500
7501     Roo.data.JsonReader.superclass.constructor.call(this, meta, recordType||meta.fields);
7502 };
7503 Roo.extend(Roo.data.JsonReader, Roo.data.DataReader, {
7504
7505     /**
7506      * @prop {Boolean} metaFromRemote  - if the meta data was loaded from the remote source.
7507      * Used by Store query builder to append _requestMeta to params.
7508      *
7509      */
7510     metaFromRemote : false,
7511     /**
7512      * This method is only used by a DataProxy which has retrieved data from a remote server.
7513      * @param {Object} response The XHR object which contains the JSON data in its responseText.
7514      * @return {Object} data A data block which is used by an Roo.data.Store object as
7515      * a cache of Roo.data.Records.
7516      */
7517     read : function(response){
7518         var json = response.responseText;
7519
7520         var o = /* eval:var:o */ eval("("+json+")");
7521         if(!o) {
7522             throw {message: "JsonReader.read: Json object not found"};
7523         }
7524
7525         if(o.metaData){
7526
7527             delete this.ef;
7528             this.metaFromRemote = true;
7529             this.meta = o.metaData;
7530             this.recordType = Roo.data.Record.create(o.metaData.fields);
7531             this.onMetaChange(this.meta, this.recordType, o);
7532         }
7533         return this.readRecords(o);
7534     },
7535
7536     // private function a store will implement
7537     onMetaChange : function(meta, recordType, o){
7538
7539     },
7540
7541     /**
7542          * @ignore
7543          */
7544     simpleAccess: function(obj, subsc) {
7545         return obj[subsc];
7546     },
7547
7548         /**
7549          * @ignore
7550          */
7551     getJsonAccessor: function(){
7552         var re = /[\[\.]/;
7553         return function(expr) {
7554             try {
7555                 return(re.test(expr))
7556                     ? new Function("obj", "return obj." + expr)
7557                     : function(obj){
7558                         return obj[expr];
7559                     };
7560             } catch(e){}
7561             return Roo.emptyFn;
7562         };
7563     }(),
7564
7565     /**
7566      * Create a data block containing Roo.data.Records from an XML document.
7567      * @param {Object} o An object which contains an Array of row objects in the property specified
7568      * in the config as 'root, and optionally a property, specified in the config as 'totalProperty'
7569      * which contains the total size of the dataset.
7570      * @return {Object} data A data block which is used by an Roo.data.Store object as
7571      * a cache of Roo.data.Records.
7572      */
7573     readRecords : function(o){
7574         /**
7575          * After any data loads, the raw JSON data is available for further custom processing.
7576          * @type Object
7577          */
7578         this.o = o;
7579         var s = this.meta, Record = this.recordType,
7580             f = Record.prototype.fields, fi = f.items, fl = f.length;
7581
7582 //      Generate extraction functions for the totalProperty, the root, the id, and for each field
7583         if (!this.ef) {
7584             if(s.totalProperty) {
7585                     this.getTotal = this.getJsonAccessor(s.totalProperty);
7586                 }
7587                 if(s.successProperty) {
7588                     this.getSuccess = this.getJsonAccessor(s.successProperty);
7589                 }
7590                 this.getRoot = s.root ? this.getJsonAccessor(s.root) : function(p){return p;};
7591                 if (s.id) {
7592                         var g = this.getJsonAccessor(s.id);
7593                         this.getId = function(rec) {
7594                                 var r = g(rec);
7595                                 return (r === undefined || r === "") ? null : r;
7596                         };
7597                 } else {
7598                         this.getId = function(){return null;};
7599                 }
7600             this.ef = [];
7601             for(var jj = 0; jj < fl; jj++){
7602                 f = fi[jj];
7603                 var map = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : f.name;
7604                 this.ef[jj] = this.getJsonAccessor(map);
7605             }
7606         }
7607
7608         var root = this.getRoot(o), c = root.length, totalRecords = c, success = true;
7609         if(s.totalProperty){
7610             var vt = parseInt(this.getTotal(o), 10);
7611             if(!isNaN(vt)){
7612                 totalRecords = vt;
7613             }
7614         }
7615         if(s.successProperty){
7616             var vs = this.getSuccess(o);
7617             if(vs === false || vs === 'false'){
7618                 success = false;
7619             }
7620         }
7621         var records = [];
7622             for(var i = 0; i < c; i++){
7623                     var n = root[i];
7624                 var values = {};
7625                 var id = this.getId(n);
7626                 for(var j = 0; j < fl; j++){
7627                     f = fi[j];
7628                 var v = this.ef[j](n);
7629                 if (!f.convert) {
7630                     Roo.log('missing convert for ' + f.name);
7631                     Roo.log(f);
7632                     continue;
7633                 }
7634                 values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue);
7635                 }
7636                 var record = new Record(values, id);
7637                 record.json = n;
7638                 records[i] = record;
7639             }
7640             return {
7641             raw : o,
7642                 success : success,
7643                 records : records,
7644                 totalRecords : totalRecords
7645             };
7646     }
7647 });/*
7648  * Based on:
7649  * Ext JS Library 1.1.1
7650  * Copyright(c) 2006-2007, Ext JS, LLC.
7651  *
7652  * Originally Released Under LGPL - original licence link has changed is not relivant.
7653  *
7654  * Fork - LGPL
7655  * <script type="text/javascript">
7656  */
7657
7658 /**
7659  * @class Roo.data.ArrayReader
7660  * @extends Roo.data.DataReader
7661  * Data reader class to create an Array of Roo.data.Record objects from an Array.
7662  * Each element of that Array represents a row of data fields. The
7663  * fields are pulled into a Record object using as a subscript, the <em>mapping</em> property
7664  * of the field definition if it exists, or the field's ordinal position in the definition.<br>
7665  * <p>
7666  * Example code:.
7667  * <pre><code>
7668 var RecordDef = Roo.data.Record.create([
7669     {name: 'name', mapping: 1},         // "mapping" only needed if an "id" field is present which
7670     {name: 'occupation', mapping: 2}    // precludes using the ordinal position as the index.
7671 ]);
7672 var myReader = new Roo.data.ArrayReader({
7673     id: 0                     // The subscript within row Array that provides an ID for the Record (optional)
7674 }, RecordDef);
7675 </code></pre>
7676  * <p>
7677  * This would consume an Array like this:
7678  * <pre><code>
7679 [ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]
7680   </code></pre>
7681  * @cfg {String} id (optional) The subscript within row Array that provides an ID for the Record
7682  * @constructor
7683  * Create a new JsonReader
7684  * @param {Object} meta Metadata configuration options.
7685  * @param {Object} recordType Either an Array of field definition objects
7686  * as specified to {@link Roo.data.Record#create},
7687  * or an {@link Roo.data.Record} object
7688  * created using {@link Roo.data.Record#create}.
7689  */
7690 Roo.data.ArrayReader = function(meta, recordType){
7691     Roo.data.ArrayReader.superclass.constructor.call(this, meta, recordType);
7692 };
7693
7694 Roo.extend(Roo.data.ArrayReader, Roo.data.JsonReader, {
7695     /**
7696      * Create a data block containing Roo.data.Records from an XML document.
7697      * @param {Object} o An Array of row objects which represents the dataset.
7698      * @return {Object} data A data block which is used by an Roo.data.Store object as
7699      * a cache of Roo.data.Records.
7700      */
7701     readRecords : function(o){
7702         var sid = this.meta ? this.meta.id : null;
7703         var recordType = this.recordType, fields = recordType.prototype.fields;
7704         var records = [];
7705         var root = o;
7706             for(var i = 0; i < root.length; i++){
7707                     var n = root[i];
7708                 var values = {};
7709                 var id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
7710                 for(var j = 0, jlen = fields.length; j < jlen; j++){
7711                 var f = fields.items[j];
7712                 var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j;
7713                 var v = n[k] !== undefined ? n[k] : f.defaultValue;
7714                 v = f.convert(v);
7715                 values[f.name] = v;
7716             }
7717                 var record = new recordType(values, id);
7718                 record.json = n;
7719                 records[records.length] = record;
7720             }
7721             return {
7722                 records : records,
7723                 totalRecords : records.length
7724             };
7725     }
7726 });/*
7727  * - LGPL
7728  * *
7729  */
7730
7731 /**
7732  * @class Roo.bootstrap.ComboBox
7733  * @extends Roo.bootstrap.TriggerField
7734  * A combobox control with support for autocomplete, remote-loading, paging and many other features.
7735  * @cfg {Boolean} append (true|false) default false
7736  * @constructor
7737  * Create a new ComboBox.
7738  * @param {Object} config Configuration options
7739  */
7740 Roo.bootstrap.ComboBox = function(config){
7741     Roo.bootstrap.ComboBox.superclass.constructor.call(this, config);
7742     this.addEvents({
7743         /**
7744          * @event expand
7745          * Fires when the dropdown list is expanded
7746              * @param {Roo.bootstrap.ComboBox} combo This combo box
7747              */
7748         'expand' : true,
7749         /**
7750          * @event collapse
7751          * Fires when the dropdown list is collapsed
7752              * @param {Roo.bootstrap.ComboBox} combo This combo box
7753              */
7754         'collapse' : true,
7755         /**
7756          * @event beforeselect
7757          * Fires before a list item is selected. Return false to cancel the selection.
7758              * @param {Roo.bootstrap.ComboBox} combo This combo box
7759              * @param {Roo.data.Record} record The data record returned from the underlying store
7760              * @param {Number} index The index of the selected item in the dropdown list
7761              */
7762         'beforeselect' : true,
7763         /**
7764          * @event select
7765          * Fires when a list item is selected
7766              * @param {Roo.bootstrap.ComboBox} combo This combo box
7767              * @param {Roo.data.Record} record The data record returned from the underlying store (or false on clear)
7768              * @param {Number} index The index of the selected item in the dropdown list
7769              */
7770         'select' : true,
7771         /**
7772          * @event beforequery
7773          * Fires before all queries are processed. Return false to cancel the query or set cancel to true.
7774          * The event object passed has these properties:
7775              * @param {Roo.bootstrap.ComboBox} combo This combo box
7776              * @param {String} query The query
7777              * @param {Boolean} forceAll true to force "all" query
7778              * @param {Boolean} cancel true to cancel the query
7779              * @param {Object} e The query event object
7780              */
7781         'beforequery': true,
7782          /**
7783          * @event add
7784          * Fires when the 'add' icon is pressed (add a listener to enable add button)
7785              * @param {Roo.bootstrap.ComboBox} combo This combo box
7786              */
7787         'add' : true,
7788         /**
7789          * @event edit
7790          * Fires when the 'edit' icon is pressed (add a listener to enable add button)
7791              * @param {Roo.bootstrap.ComboBox} combo This combo box
7792              * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
7793              */
7794         'edit' : true,
7795         /**
7796          * @event remove
7797          * Fires when the remove value from the combobox array
7798              * @param {Roo.bootstrap.ComboBox} combo This combo box
7799              */
7800         'remove' : true
7801
7802     });
7803
7804
7805     this.selectedIndex = -1;
7806     if(this.mode == 'local'){
7807         if(config.queryDelay === undefined){
7808             this.queryDelay = 10;
7809         }
7810         if(config.minChars === undefined){
7811             this.minChars = 0;
7812         }
7813     }
7814 };
7815
7816 Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
7817
7818     /**
7819      * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
7820      * rendering into an Roo.Editor, defaults to false)
7821      */
7822     /**
7823      * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
7824      * {tag: "input", type: "text", size: "24", autocomplete: "off"})
7825      */
7826     /**
7827      * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
7828      */
7829     /**
7830      * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
7831      * the dropdown list (defaults to undefined, with no header element)
7832      */
7833
7834      /**
7835      * @cfg {String/Roo.Template} tpl The template to use to render the output
7836      */
7837
7838      /**
7839      * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
7840      */
7841     listWidth: undefined,
7842     /**
7843      * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
7844      * mode = 'remote' or 'text' if mode = 'local')
7845      */
7846     displayField: undefined,
7847     /**
7848      * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
7849      * mode = 'remote' or 'value' if mode = 'local').
7850      * Note: use of a valueField requires the user make a selection
7851      * in order for a value to be mapped.
7852      */
7853     valueField: undefined,
7854
7855
7856     /**
7857      * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
7858      * field's data value (defaults to the underlying DOM element's name)
7859      */
7860     hiddenName: undefined,
7861     /**
7862      * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
7863      */
7864     listClass: '',
7865     /**
7866      * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
7867      */
7868     selectedClass: 'active',
7869
7870     /**
7871      * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
7872      */
7873     shadow:'sides',
7874     /**
7875      * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
7876      * anchor positions (defaults to 'tl-bl')
7877      */
7878     listAlign: 'tl-bl?',
7879     /**
7880      * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
7881      */
7882     maxHeight: 300,
7883     /**
7884      * @cfg {String} triggerAction The action to execute when the trigger field is activated.  Use 'all' to run the
7885      * query specified by the allQuery config option (defaults to 'query')
7886      */
7887     triggerAction: 'query',
7888     /**
7889      * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
7890      * (defaults to 4, does not apply if editable = false)
7891      */
7892     minChars : 4,
7893     /**
7894      * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
7895      * delay (typeAheadDelay) if it matches a known value (defaults to false)
7896      */
7897     typeAhead: false,
7898     /**
7899      * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
7900      * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
7901      */
7902     queryDelay: 500,
7903     /**
7904      * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
7905      * filter queries will execute with page start and limit parameters.  Only applies when mode = 'remote' (defaults to 0)
7906      */
7907     pageSize: 0,
7908     /**
7909      * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus.  Only applies
7910      * when editable = true (defaults to false)
7911      */
7912     selectOnFocus:false,
7913     /**
7914      * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
7915      */
7916     queryParam: 'query',
7917     /**
7918      * @cfg {String} loadingText The text to display in the dropdown list while data is loading.  Only applies
7919      * when mode = 'remote' (defaults to 'Loading...')
7920      */
7921     loadingText: 'Loading...',
7922     /**
7923      * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
7924      */
7925     resizable: false,
7926     /**
7927      * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
7928      */
7929     handleHeight : 8,
7930     /**
7931      * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
7932      * traditional select (defaults to true)
7933      */
7934     editable: true,
7935     /**
7936      * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
7937      */
7938     allQuery: '',
7939     /**
7940      * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
7941      */
7942     mode: 'remote',
7943     /**
7944      * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
7945      * listWidth has a higher value)
7946      */
7947     minListWidth : 70,
7948     /**
7949      * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
7950      * allow the user to set arbitrary text into the field (defaults to false)
7951      */
7952     forceSelection:false,
7953     /**
7954      * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
7955      * if typeAhead = true (defaults to 250)
7956      */
7957     typeAheadDelay : 250,
7958     /**
7959      * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
7960      * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
7961      */
7962     valueNotFoundText : undefined,
7963     /**
7964      * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
7965      */
7966     blockFocus : false,
7967
7968     /**
7969      * @cfg {Boolean} disableClear Disable showing of clear button.
7970      */
7971     disableClear : false,
7972     /**
7973      * @cfg {Boolean} alwaysQuery  Disable caching of results, and always send query
7974      */
7975     alwaysQuery : false,
7976
7977     /**
7978      * @cfg {Boolean} multiple  (true|false) ComboBobArray, default false
7979      */
7980     multiple : false,
7981
7982     //private
7983     addicon : false,
7984     editicon: false,
7985
7986     page: 0,
7987     hasQuery: false,
7988     append: false,
7989     loadNext: false,
7990     item: [],
7991
7992     // element that contains real text value.. (when hidden is used..)
7993
7994     // private
7995     initEvents: function(){
7996
7997         if (!this.store) {
7998             throw "can not find store for combo";
7999         }
8000         this.store = Roo.factory(this.store, Roo.data);
8001
8002
8003
8004         Roo.bootstrap.ComboBox.superclass.initEvents.call(this);
8005
8006
8007         if(this.hiddenName){
8008
8009             this.hiddenField = this.el.select('input.form-hidden-field',true).first();
8010
8011             this.hiddenField.dom.value =
8012                 this.hiddenValue !== undefined ? this.hiddenValue :
8013                 this.value !== undefined ? this.value : '';
8014
8015             // prevent input submission
8016             this.el.dom.removeAttribute('name');
8017             this.hiddenField.dom.setAttribute('name', this.hiddenName);
8018
8019
8020         }
8021         //if(Roo.isGecko){
8022         //    this.el.dom.setAttribute('autocomplete', 'off');
8023         //}
8024
8025         var cls = 'x-combo-list';
8026         this.list = this.el.select('ul.dropdown-menu',true).first();
8027
8028         //this.list = new Roo.Layer({
8029         //    shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
8030         //});
8031
8032         var lw = this.listWidth || Math.max(this.inputEl().getWidth(), this.minListWidth);
8033         this.list.setWidth(lw);
8034
8035         this.list.on('mouseover', this.onViewOver, this);
8036         this.list.on('mousemove', this.onViewMove, this);
8037
8038         this.list.on('scroll', this.onViewScroll, this);
8039
8040         /*
8041         this.list.swallowEvent('mousewheel');
8042         this.assetHeight = 0;
8043
8044         if(this.title){
8045             this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
8046             this.assetHeight += this.header.getHeight();
8047         }
8048
8049         this.innerList = this.list.createChild({cls:cls+'-inner'});
8050         this.innerList.on('mouseover', this.onViewOver, this);
8051         this.innerList.on('mousemove', this.onViewMove, this);
8052         this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
8053
8054         if(this.allowBlank && !this.pageSize && !this.disableClear){
8055             this.footer = this.list.createChild({cls:cls+'-ft'});
8056             this.pageTb = new Roo.Toolbar(this.footer);
8057
8058         }
8059         if(this.pageSize){
8060             this.footer = this.list.createChild({cls:cls+'-ft'});
8061             this.pageTb = new Roo.PagingToolbar(this.footer, this.store,
8062                     {pageSize: this.pageSize});
8063
8064         }
8065
8066         if (this.pageTb && this.allowBlank && !this.disableClear) {
8067             var _this = this;
8068             this.pageTb.add(new Roo.Toolbar.Fill(), {
8069                 cls: 'x-btn-icon x-btn-clear',
8070                 text: '&#160;',
8071                 handler: function()
8072                 {
8073                     _this.collapse();
8074                     _this.clearValue();
8075                     _this.onSelect(false, -1);
8076                 }
8077             });
8078         }
8079         if (this.footer) {
8080             this.assetHeight += this.footer.getHeight();
8081         }
8082         */
8083
8084         if(!this.tpl){
8085             this.tpl = '<li><a href="#">{' + this.displayField + '}</a></li>';
8086         }
8087
8088         this.view = new Roo.View(this.el.select('ul.dropdown-menu',true).first(), this.tpl, {
8089             singleSelect:true, store: this.store, selectedClass: this.selectedClass
8090         });
8091         //this.view.wrapEl.setDisplayed(false);
8092         this.view.on('click', this.onViewClick, this);
8093
8094
8095
8096         this.store.on('beforeload', this.onBeforeLoad, this);
8097         this.store.on('load', this.onLoad, this);
8098         this.store.on('loadexception', this.onLoadException, this);
8099         /*
8100         if(this.resizable){
8101             this.resizer = new Roo.Resizable(this.list,  {
8102                pinned:true, handles:'se'
8103             });
8104             this.resizer.on('resize', function(r, w, h){
8105                 this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
8106                 this.listWidth = w;
8107                 this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
8108                 this.restrictHeight();
8109             }, this);
8110             this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
8111         }
8112         */
8113         if(!this.editable){
8114             this.editable = true;
8115             this.setEditable(false);
8116         }
8117
8118         /*
8119
8120         if (typeof(this.events.add.listeners) != 'undefined') {
8121
8122             this.addicon = this.wrap.createChild(
8123                 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-add' });
8124
8125             this.addicon.on('click', function(e) {
8126                 this.fireEvent('add', this);
8127             }, this);
8128         }
8129         if (typeof(this.events.edit.listeners) != 'undefined') {
8130
8131             this.editicon = this.wrap.createChild(
8132                 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-edit' });
8133             if (this.addicon) {
8134                 this.editicon.setStyle('margin-left', '40px');
8135             }
8136             this.editicon.on('click', function(e) {
8137
8138                 // we fire even  if inothing is selected..
8139                 this.fireEvent('edit', this, this.lastData );
8140
8141             }, this);
8142         }
8143         */
8144
8145         this.keyNav = new Roo.KeyNav(this.inputEl(), {
8146             "up" : function(e){
8147                 this.inKeyMode = true;
8148                 this.selectPrev();
8149             },
8150
8151             "down" : function(e){
8152                 if(!this.isExpanded()){
8153                     this.onTriggerClick();
8154                 }else{
8155                     this.inKeyMode = true;
8156                     this.selectNext();
8157                 }
8158             },
8159
8160             "enter" : function(e){
8161                 this.onViewClick();
8162                 //return true;
8163             },
8164
8165             "esc" : function(e){
8166                 this.collapse();
8167             },
8168
8169             "tab" : function(e){
8170                 this.collapse();
8171
8172                 if(this.fireEvent("specialkey", this, e)){
8173                     this.onViewClick(false);
8174                 }
8175
8176                 return true;
8177             },
8178
8179             scope : this,
8180
8181             doRelay : function(foo, bar, hname){
8182                 if(hname == 'down' || this.scope.isExpanded()){
8183                    return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
8184                 }
8185                 return true;
8186             },
8187
8188             forceKeyDown: true
8189         });
8190
8191
8192         this.queryDelay = Math.max(this.queryDelay || 10,
8193                 this.mode == 'local' ? 10 : 250);
8194
8195
8196         this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
8197
8198         if(this.typeAhead){
8199             this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
8200         }
8201         if(this.editable !== false){
8202             this.inputEl().on("keyup", this.onKeyUp, this);
8203         }
8204         if(this.forceSelection){
8205             this.on('blur', this.doForce, this);
8206         }
8207
8208         if(this.multiple){
8209             this.choices = this.el.select('ul.select2-choices', true).first();
8210             this.searchField = this.el.select('ul li.select2-search-field', true).first();
8211         }
8212     },
8213
8214     onDestroy : function(){
8215         if(this.view){
8216             this.view.setStore(null);
8217             this.view.el.removeAllListeners();
8218             this.view.el.remove();
8219             this.view.purgeListeners();
8220         }
8221         if(this.list){
8222             this.list.dom.innerHTML  = '';
8223         }
8224         if(this.store){
8225             this.store.un('beforeload', this.onBeforeLoad, this);
8226             this.store.un('load', this.onLoad, this);
8227             this.store.un('loadexception', this.onLoadException, this);
8228         }
8229         Roo.bootstrap.ComboBox.superclass.onDestroy.call(this);
8230     },
8231
8232     // private
8233     fireKey : function(e){
8234         if(e.isNavKeyPress() && !this.list.isVisible()){
8235             this.fireEvent("specialkey", this, e);
8236         }
8237     },
8238
8239     // private
8240     onResize: function(w, h){
8241 //        Roo.bootstrap.ComboBox.superclass.onResize.apply(this, arguments);
8242 //
8243 //        if(typeof w != 'number'){
8244 //            // we do not handle it!?!?
8245 //            return;
8246 //        }
8247 //        var tw = this.trigger.getWidth();
8248 //       // tw += this.addicon ? this.addicon.getWidth() : 0;
8249 //       // tw += this.editicon ? this.editicon.getWidth() : 0;
8250 //        var x = w - tw;
8251 //        this.inputEl().setWidth( this.adjustWidth('input', x));
8252 //
8253 //        //this.trigger.setStyle('left', x+'px');
8254 //
8255 //        if(this.list && this.listWidth === undefined){
8256 //            var lw = Math.max(x + this.trigger.getWidth(), this.minListWidth);
8257 //            this.list.setWidth(lw);
8258 //            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
8259 //        }
8260
8261
8262
8263     },
8264
8265     /**
8266      * Allow or prevent the user from directly editing the field text.  If false is passed,
8267      * the user will only be able to select from the items defined in the dropdown list.  This method
8268      * is the runtime equivalent of setting the 'editable' config option at config time.
8269      * @param {Boolean} value True to allow the user to directly edit the field text
8270      */
8271     setEditable : function(value){
8272         if(value == this.editable){
8273             return;
8274         }
8275         this.editable = value;
8276         if(!value){
8277             this.inputEl().dom.setAttribute('readOnly', true);
8278             this.inputEl().on('mousedown', this.onTriggerClick,  this);
8279             this.inputEl().addClass('x-combo-noedit');
8280         }else{
8281             this.inputEl().dom.setAttribute('readOnly', false);
8282             this.inputEl().un('mousedown', this.onTriggerClick,  this);
8283             this.inputEl().removeClass('x-combo-noedit');
8284         }
8285     },
8286
8287     // private
8288
8289     onBeforeLoad : function(combo,opts){
8290         if(!this.hasFocus){
8291             return;
8292         }
8293          if (!opts.add) {
8294             this.list.dom.innerHTML = '<li class="loading-indicator">'+(this.loadingText||'loading')+'</li>' ;
8295          }
8296         this.restrictHeight();
8297         this.selectedIndex = -1;
8298     },
8299
8300     // private
8301     onLoad : function(){
8302
8303         this.hasQuery = false;
8304
8305         if(!this.hasFocus){
8306             return;
8307         }
8308
8309         if(typeof(this.loading) !== 'undefined' && this.loading !== null){
8310             this.loading.hide();
8311         }
8312
8313         if(this.store.getCount() > 0){
8314             this.expand();
8315             this.restrictHeight();
8316             if(this.lastQuery == this.allQuery){
8317                 if(this.editable){
8318                     this.inputEl().dom.select();
8319                 }
8320                 if(!this.selectByValue(this.value, true)){
8321                     this.select(0, true);
8322                 }
8323             }else{
8324                 this.selectNext();
8325                 if(this.typeAhead && this.lastKey != Roo.EventObject.BACKSPACE && this.lastKey != Roo.EventObject.DELETE){
8326                     this.taTask.delay(this.typeAheadDelay);
8327                 }
8328             }
8329         }else{
8330             this.onEmptyResults();
8331         }
8332
8333         //this.el.focus();
8334     },
8335     // private
8336     onLoadException : function()
8337     {
8338         this.hasQuery = false;
8339
8340         if(typeof(this.loading) !== 'undefined' && this.loading !== null){
8341             this.loading.hide();
8342         }
8343
8344         this.collapse();
8345         Roo.log(this.store.reader.jsonData);
8346         if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
8347             // fixme
8348             //Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
8349         }
8350
8351
8352     },
8353     // private
8354     onTypeAhead : function(){
8355         if(this.store.getCount() > 0){
8356             var r = this.store.getAt(0);
8357             var newValue = r.data[this.displayField];
8358             var len = newValue.length;
8359             var selStart = this.getRawValue().length;
8360
8361             if(selStart != len){
8362                 this.setRawValue(newValue);
8363                 this.selectText(selStart, newValue.length);
8364             }
8365         }
8366     },
8367
8368     // private
8369     onSelect : function(record, index){
8370
8371         if(this.fireEvent('beforeselect', this, record, index) !== false){
8372
8373             this.setFromData(index > -1 ? record.data : false);
8374
8375             this.collapse();
8376             this.fireEvent('select', this, record, index);
8377         }
8378     },
8379
8380     /**
8381      * Returns the currently selected field value or empty string if no value is set.
8382      * @return {String} value The selected value
8383      */
8384     getValue : function(){
8385
8386         if(this.multiple){
8387             return (this.hiddenField) ? this.hiddenField.dom.value : this.value;
8388         }
8389
8390         if(this.valueField){
8391             return typeof this.value != 'undefined' ? this.value : '';
8392         }else{
8393             return Roo.bootstrap.ComboBox.superclass.getValue.call(this);
8394         }
8395     },
8396
8397     /**
8398      * Clears any text/value currently set in the field
8399      */
8400     clearValue : function(){
8401         if(this.hiddenField){
8402             this.hiddenField.dom.value = '';
8403         }
8404         this.value = '';
8405         this.setRawValue('');
8406         this.lastSelectionText = '';
8407
8408     },
8409
8410     /**
8411      * Sets the specified value into the field.  If the value finds a match, the corresponding record text
8412      * will be displayed in the field.  If the value does not match the data value of an existing item,
8413      * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
8414      * Otherwise the field will be blank (although the value will still be set).
8415      * @param {String} value The value to match
8416      */
8417     setValue : function(v){
8418         if(this.multiple){
8419             this.syncValue();
8420             return;
8421         }
8422
8423         var text = v;
8424         if(this.valueField){
8425             var r = this.findRecord(this.valueField, v);
8426             if(r){
8427                 text = r.data[this.displayField];
8428             }else if(this.valueNotFoundText !== undefined){
8429                 text = this.valueNotFoundText;
8430             }
8431         }
8432         this.lastSelectionText = text;
8433         if(this.hiddenField){
8434             this.hiddenField.dom.value = v;
8435         }
8436         Roo.bootstrap.ComboBox.superclass.setValue.call(this, text);
8437         this.value = v;
8438     },
8439     /**
8440      * @property {Object} the last set data for the element
8441      */
8442
8443     lastData : false,
8444     /**
8445      * Sets the value of the field based on a object which is related to the record format for the store.
8446      * @param {Object} value the value to set as. or false on reset?
8447      */
8448     setFromData : function(o){
8449
8450         if(this.multiple){
8451             this.addItem(o);
8452             return;
8453         }
8454
8455         var dv = ''; // display value
8456         var vv = ''; // value value..
8457         this.lastData = o;
8458         if (this.displayField) {
8459             dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
8460         } else {
8461             // this is an error condition!!!
8462             Roo.log('no  displayField value set for '+ (this.name ? this.name : this.id));
8463         }
8464
8465         if(this.valueField){
8466             vv = !o || typeof(o[this.valueField]) == 'undefined' ? dv : o[this.valueField];
8467         }
8468
8469         if(this.hiddenField){
8470             this.hiddenField.dom.value = vv;
8471
8472             this.lastSelectionText = dv;
8473             Roo.bootstrap.ComboBox.superclass.setValue.call(this, dv);
8474             this.value = vv;
8475             return;
8476         }
8477         // no hidden field.. - we store the value in 'value', but still display
8478         // display field!!!!
8479         this.lastSelectionText = dv;
8480         Roo.bootstrap.ComboBox.superclass.setValue.call(this, dv);
8481         this.value = vv;
8482
8483
8484     },
8485     // private
8486     reset : function(){
8487         // overridden so that last data is reset..
8488         this.setValue(this.originalValue);
8489         this.clearInvalid();
8490         this.lastData = false;
8491         if (this.view) {
8492             this.view.clearSelections();
8493         }
8494     },
8495     // private
8496     findRecord : function(prop, value){
8497         var record;
8498         if(this.store.getCount() > 0){
8499             this.store.each(function(r){
8500                 if(r.data[prop] == value){
8501                     record = r;
8502                     return false;
8503                 }
8504                 return true;
8505             });
8506         }
8507         return record;
8508     },
8509
8510     getName: function()
8511     {
8512         // returns hidden if it's set..
8513         if (!this.rendered) {return ''};
8514         return !this.hiddenName && this.inputEl().dom.name  ? this.inputEl().dom.name : (this.hiddenName || '');
8515
8516     },
8517     // private
8518     onViewMove : function(e, t){
8519         this.inKeyMode = false;
8520     },
8521
8522     // private
8523     onViewOver : function(e, t){
8524         if(this.inKeyMode){ // prevent key nav and mouse over conflicts
8525             return;
8526         }
8527         var item = this.view.findItemFromChild(t);
8528         if(item){
8529             var index = this.view.indexOf(item);
8530             this.select(index, false);
8531         }
8532     },
8533
8534     // private
8535     onViewClick : function(doFocus)
8536     {
8537         var index = this.view.getSelectedIndexes()[0];
8538         var r = this.store.getAt(index);
8539         if(r){
8540             this.onSelect(r, index);
8541         }
8542         if(doFocus !== false && !this.blockFocus){
8543             this.inputEl().focus();
8544         }
8545     },
8546
8547     // private
8548     restrictHeight : function(){
8549         //this.innerList.dom.style.height = '';
8550         //var inner = this.innerList.dom;
8551         //var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
8552         //this.innerList.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
8553         //this.list.beginUpdate();
8554         //this.list.setHeight(this.innerList.getHeight()+this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight);
8555         this.list.alignTo(this.inputEl(), this.listAlign);
8556         //this.list.endUpdate();
8557     },
8558
8559     // private
8560     onEmptyResults : function(){
8561         this.collapse();
8562     },
8563
8564     /**
8565      * Returns true if the dropdown list is expanded, else false.
8566      */
8567     isExpanded : function(){
8568         return this.list.isVisible();
8569     },
8570
8571     /**
8572      * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
8573      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
8574      * @param {String} value The data value of the item to select
8575      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
8576      * selected item if it is not currently in view (defaults to true)
8577      * @return {Boolean} True if the value matched an item in the list, else false
8578      */
8579     selectByValue : function(v, scrollIntoView){
8580         if(v !== undefined && v !== null){
8581             var r = this.findRecord(this.valueField || this.displayField, v);
8582             if(r){
8583                 this.select(this.store.indexOf(r), scrollIntoView);
8584                 return true;
8585             }
8586         }
8587         return false;
8588     },
8589
8590     /**
8591      * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
8592      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
8593      * @param {Number} index The zero-based index of the list item to select
8594      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
8595      * selected item if it is not currently in view (defaults to true)
8596      */
8597     select : function(index, scrollIntoView){
8598         this.selectedIndex = index;
8599         this.view.select(index);
8600         if(scrollIntoView !== false){
8601             var el = this.view.getNode(index);
8602             if(el){
8603                 //this.innerList.scrollChildIntoView(el, false);
8604
8605             }
8606         }
8607     },
8608
8609     // private
8610     selectNext : function(){
8611         var ct = this.store.getCount();
8612         if(ct > 0){
8613             if(this.selectedIndex == -1){
8614                 this.select(0);
8615             }else if(this.selectedIndex < ct-1){
8616                 this.select(this.selectedIndex+1);
8617             }
8618         }
8619     },
8620
8621     // private
8622     selectPrev : function(){
8623         var ct = this.store.getCount();
8624         if(ct > 0){
8625             if(this.selectedIndex == -1){
8626                 this.select(0);
8627             }else if(this.selectedIndex != 0){
8628                 this.select(this.selectedIndex-1);
8629             }
8630         }
8631     },
8632
8633     // private
8634     onKeyUp : function(e){
8635         if(this.editable !== false && !e.isSpecialKey()){
8636             this.lastKey = e.getKey();
8637             this.dqTask.delay(this.queryDelay);
8638         }
8639     },
8640
8641     // private
8642     validateBlur : function(){
8643         return !this.list || !this.list.isVisible();
8644     },
8645
8646     // private
8647     initQuery : function(){
8648         this.doQuery(this.getRawValue());
8649     },
8650
8651     // private
8652     doForce : function(){
8653         if(this.el.dom.value.length > 0){
8654             this.el.dom.value =
8655                 this.lastSelectionText === undefined ? '' : this.lastSelectionText;
8656
8657         }
8658     },
8659
8660     /**
8661      * Execute a query to filter the dropdown list.  Fires the beforequery event prior to performing the
8662      * query allowing the query action to be canceled if needed.
8663      * @param {String} query The SQL query to execute
8664      * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
8665      * in the field than the minimum specified by the minChars config option.  It also clears any filter previously
8666      * saved in the current store (defaults to false)
8667      */
8668     doQuery : function(q, forceAll){
8669
8670         if(q === undefined || q === null){
8671             q = '';
8672         }
8673         var qe = {
8674             query: q,
8675             forceAll: forceAll,
8676             combo: this,
8677             cancel:false
8678         };
8679         if(this.fireEvent('beforequery', qe)===false || qe.cancel){
8680             return false;
8681         }
8682         q = qe.query;
8683
8684         forceAll = qe.forceAll;
8685         if(forceAll === true || (q.length >= this.minChars)){
8686
8687             this.hasQuery = true;
8688
8689             if(this.lastQuery != q || this.alwaysQuery){
8690                 this.lastQuery = q;
8691                 if(this.mode == 'local'){
8692                     this.selectedIndex = -1;
8693                     if(forceAll){
8694                         this.store.clearFilter();
8695                     }else{
8696                         this.store.filter(this.displayField, q);
8697                     }
8698                     this.onLoad();
8699                 }else{
8700                     this.store.baseParams[this.queryParam] = q;
8701
8702                     var options = {params : this.getParams(q)};
8703
8704                     if(this.loadNext){
8705                         options.add = true;
8706                         options.params.start = this.page * this.pageSize;
8707                     }
8708
8709                     this.store.load(options);
8710                     this.expand();
8711                 }
8712             }else{
8713                 this.selectedIndex = -1;
8714                 this.onLoad();
8715             }
8716         }
8717
8718         this.loadNext = false;
8719     },
8720
8721     // private
8722     getParams : function(q){
8723         var p = {};
8724         //p[this.queryParam] = q;
8725
8726         if(this.pageSize){
8727             p.start = 0;
8728             p.limit = this.pageSize;
8729         }
8730         return p;
8731     },
8732
8733     /**
8734      * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
8735      */
8736     collapse : function(){
8737         if(!this.isExpanded()){
8738             return;
8739         }
8740
8741         this.list.hide();
8742         Roo.get(document).un('mousedown', this.collapseIf, this);
8743         Roo.get(document).un('mousewheel', this.collapseIf, this);
8744         if (!this.editable) {
8745             Roo.get(document).un('keydown', this.listKeyPress, this);
8746         }
8747         this.fireEvent('collapse', this);
8748     },
8749
8750     // private
8751     collapseIf : function(e){
8752         var in_combo  = e.within(this.el);
8753         var in_list =  e.within(this.list);
8754
8755         if (in_combo || in_list) {
8756             //e.stopPropagation();
8757             return;
8758         }
8759
8760         this.collapse();
8761
8762     },
8763
8764     /**
8765      * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
8766      */
8767     expand : function(){
8768
8769         if(this.isExpanded() || !this.hasFocus){
8770             return;
8771         }
8772          Roo.log('expand');
8773         this.list.alignTo(this.inputEl(), this.listAlign);
8774         this.list.show();
8775         Roo.get(document).on('mousedown', this.collapseIf, this);
8776         Roo.get(document).on('mousewheel', this.collapseIf, this);
8777         if (!this.editable) {
8778             Roo.get(document).on('keydown', this.listKeyPress, this);
8779         }
8780
8781         this.fireEvent('expand', this);
8782     },
8783
8784     // private
8785     // Implements the default empty TriggerField.onTriggerClick function
8786     onTriggerClick : function()
8787     {
8788         Roo.log('trigger click');
8789
8790         if(this.disabled){
8791             return;
8792         }
8793
8794         this.page = 0;
8795         this.loadNext = false;
8796
8797         if(this.isExpanded()){
8798             this.collapse();
8799             if (!this.blockFocus) {
8800                 this.inputEl().focus();
8801             }
8802
8803         }else {
8804             this.hasFocus = true;
8805             if(this.triggerAction == 'all') {
8806                 this.doQuery(this.allQuery, true);
8807             } else {
8808                 this.doQuery(this.getRawValue());
8809             }
8810             if (!this.blockFocus) {
8811                 this.inputEl().focus();
8812             }
8813         }
8814     },
8815     listKeyPress : function(e)
8816     {
8817         //Roo.log('listkeypress');
8818         // scroll to first matching element based on key pres..
8819         if (e.isSpecialKey()) {
8820             return false;
8821         }
8822         var k = String.fromCharCode(e.getKey()).toUpperCase();
8823         //Roo.log(k);
8824         var match  = false;
8825         var csel = this.view.getSelectedNodes();
8826         var cselitem = false;
8827         if (csel.length) {
8828             var ix = this.view.indexOf(csel[0]);
8829             cselitem  = this.store.getAt(ix);
8830             if (!cselitem.get(this.displayField) || cselitem.get(this.displayField).substring(0,1).toUpperCase() != k) {
8831                 cselitem = false;
8832             }
8833
8834         }
8835
8836         this.store.each(function(v) {
8837             if (cselitem) {
8838                 // start at existing selection.
8839                 if (cselitem.id == v.id) {
8840                     cselitem = false;
8841                 }
8842                 return true;
8843             }
8844
8845             if (v.get(this.displayField) && v.get(this.displayField).substring(0,1).toUpperCase() == k) {
8846                 match = this.store.indexOf(v);
8847                 return false;
8848             }
8849             return true;
8850         }, this);
8851
8852         if (match === false) {
8853             return true; // no more action?
8854         }
8855         // scroll to?
8856         this.view.select(match);
8857         var sn = Roo.get(this.view.getSelectedNodes()[0])
8858         //sn.scrollIntoView(sn.dom.parentNode, false);
8859     },
8860
8861     onViewScroll : function(e, t){
8862
8863         if(this.view.el.getScroll().top < this.view.el.dom.scrollHeight - this.view.el.dom.clientHeight || !this.hasFocus || !this.append || this.hasQuery){
8864             return;
8865         }
8866
8867         this.hasQuery = true;
8868
8869         this.loading = this.list.select('.loading', true).first();
8870
8871         if(this.loading === null){
8872             this.list.createChild({
8873                 tag: 'div',
8874                 cls: 'loading select2-more-results select2-active',
8875                 html: 'Loading more results...'
8876             })
8877
8878             this.loading = this.list.select('.loading', true).first();
8879
8880             this.loading.setVisibilityMode(Roo.Element.DISPLAY);
8881
8882             this.loading.hide();
8883         }
8884
8885         this.loading.show();
8886
8887         var _combo = this;
8888
8889         this.page++;
8890         this.loadNext = true;
8891
8892         (function() { _combo.doQuery(_combo.allQuery, true); }).defer(500);
8893
8894         return;
8895     },
8896
8897     addItem : function(o)
8898     {
8899         var dv = ''; // display value
8900
8901         if (this.displayField) {
8902             dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
8903         } else {
8904             // this is an error condition!!!
8905             Roo.log('no  displayField value set for '+ (this.name ? this.name : this.id));
8906         }
8907
8908         if(!dv.length){
8909             return;
8910         }
8911
8912         var choice = this.choices.createChild({
8913             tag: 'li',
8914             cls: 'select2-search-choice',
8915             cn: [
8916                 {
8917                     tag: 'div',
8918                     html: dv
8919                 },
8920                 {
8921                     tag: 'a',
8922                     href: '#',
8923                     cls: 'select2-search-choice-close',
8924                     tabindex: '-1'
8925                 }
8926             ]
8927
8928         }, this.searchField);
8929
8930         var close = choice.select('a.select2-search-choice-close', true).first()
8931
8932         close.on('click', this.onRemoveItem, this, { item : choice, data : o} );
8933
8934         this.item.push(o);
8935         this.lastData = o;
8936
8937         this.syncValue();
8938
8939         this.inputEl().dom.value = '';
8940
8941     },
8942
8943     onRemoveItem : function(e, _self, o)
8944     {
8945         Roo.log('remove item');
8946         var index = this.item.indexOf(o.data) * 1;
8947
8948         if( index < 0){
8949             Roo.log('not this item?!');
8950             return;
8951         }
8952
8953         this.item.splice(index, 1);
8954         o.item.remove();
8955
8956         this.syncValue();
8957
8958         this.fireEvent('remove', this);
8959
8960     },
8961
8962     syncValue : function()
8963     {
8964         if(!this.item.length){
8965             this.clearValue();
8966             return;
8967         }
8968
8969         var value = [];
8970         var _this = this;
8971         Roo.each(this.item, function(i){
8972             if(_this.valueField){
8973                 value.push(i[_this.valueField]);
8974                 return;
8975             }
8976
8977             value.push(i);
8978         });
8979
8980         this.value = value.join(',');
8981
8982         if(this.hiddenField){
8983             this.hiddenField.dom.value = this.value;
8984         }
8985     },
8986
8987     clearItem : function()
8988     {
8989         if(!this.multiple){
8990             return;
8991         }
8992
8993         this.item = [];
8994
8995         Roo.each(this.choices.select('>li.select2-search-choice', true).elements, function(c){
8996            c.remove();
8997         });
8998
8999         this.syncValue();
9000     }
9001
9002
9003
9004     /**
9005     * @cfg {Boolean} grow
9006     * @hide
9007     */
9008     /**
9009     * @cfg {Number} growMin
9010     * @hide
9011     */
9012     /**
9013     * @cfg {Number} growMax
9014     * @hide
9015     */
9016     /**
9017      * @hide
9018      * @method autoSize
9019      */
9020 });
9021 /*
9022  * Based on:
9023  * Ext JS Library 1.1.1
9024  * Copyright(c) 2006-2007, Ext JS, LLC.
9025  *
9026  * Originally Released Under LGPL - original licence link has changed is not relivant.
9027  *
9028  * Fork - LGPL
9029  * <script type="text/javascript">
9030  */
9031
9032 /**
9033  * @class Roo.View
9034  * @extends Roo.util.Observable
9035  * Create a "View" for an element based on a data model or UpdateManager and the supplied DomHelper template.
9036  * This class also supports single and multi selection modes. <br>
9037  * Create a data model bound view:
9038  <pre><code>
9039  var store = new Roo.data.Store(...);
9040
9041  var view = new Roo.View({
9042     el : "my-element",
9043     tpl : '&lt;div id="{0}"&gt;{2} - {1}&lt;/div&gt;', // auto create template
9044
9045     singleSelect: true,
9046     selectedClass: "ydataview-selected",
9047     store: store
9048  });
9049
9050  // listen for node click?
9051  view.on("click", function(vw, index, node, e){
9052  alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
9053  });
9054
9055  // load XML data
9056  dataModel.load("foobar.xml");
9057  </code></pre>
9058  For an example of creating a JSON/UpdateManager view, see {@link Roo.JsonView}.
9059  * <br><br>
9060  * <b>Note: The root of your template must be a single node. Table/row implementations may work but are not supported due to
9061  * IE"s limited insertion support with tables and Opera"s faulty event bubbling.</b>
9062  *
9063  * Note: old style constructor is still suported (container, template, config)
9064  *
9065  * @constructor
9066  * Create a new View
9067  * @param {Object} config The config object
9068  *
9069  */
9070 Roo.View = function(config, depreciated_tpl, depreciated_config){
9071
9072     if (typeof(depreciated_tpl) == 'undefined') {
9073         // new way.. - universal constructor.
9074         Roo.apply(this, config);
9075         this.el  = Roo.get(this.el);
9076     } else {
9077         // old format..
9078         this.el  = Roo.get(config);
9079         this.tpl = depreciated_tpl;
9080         Roo.apply(this, depreciated_config);
9081     }
9082     this.wrapEl  = this.el.wrap().wrap();
9083     ///this.el = this.wrapEla.appendChild(document.createElement("div"));
9084
9085
9086     if(typeof(this.tpl) == "string"){
9087         this.tpl = new Roo.Template(this.tpl);
9088     } else {
9089         // support xtype ctors..
9090         this.tpl = new Roo.factory(this.tpl, Roo);
9091     }
9092
9093
9094     this.tpl.compile();
9095
9096
9097
9098
9099     /** @private */
9100     this.addEvents({
9101         /**
9102          * @event beforeclick
9103          * Fires before a click is processed. Returns false to cancel the default action.
9104          * @param {Roo.View} this
9105          * @param {Number} index The index of the target node
9106          * @param {HTMLElement} node The target node
9107          * @param {Roo.EventObject} e The raw event object
9108          */
9109             "beforeclick" : true,
9110         /**
9111          * @event click
9112          * Fires when a template node is clicked.
9113          * @param {Roo.View} this
9114          * @param {Number} index The index of the target node
9115          * @param {HTMLElement} node The target node
9116          * @param {Roo.EventObject} e The raw event object
9117          */
9118             "click" : true,
9119         /**
9120          * @event dblclick
9121          * Fires when a template node is double clicked.
9122          * @param {Roo.View} this
9123          * @param {Number} index The index of the target node
9124          * @param {HTMLElement} node The target node
9125          * @param {Roo.EventObject} e The raw event object
9126          */
9127             "dblclick" : true,
9128         /**
9129          * @event contextmenu
9130          * Fires when a template node is right clicked.
9131          * @param {Roo.View} this
9132          * @param {Number} index The index of the target node
9133          * @param {HTMLElement} node The target node
9134          * @param {Roo.EventObject} e The raw event object
9135          */
9136             "contextmenu" : true,
9137         /**
9138          * @event selectionchange
9139          * Fires when the selected nodes change.
9140          * @param {Roo.View} this
9141          * @param {Array} selections Array of the selected nodes
9142          */
9143             "selectionchange" : true,
9144
9145         /**
9146          * @event beforeselect
9147          * Fires before a selection is made. If any handlers return false, the selection is cancelled.
9148          * @param {Roo.View} this
9149          * @param {HTMLElement} node The node to be selected
9150          * @param {Array} selections Array of currently selected nodes
9151          */
9152             "beforeselect" : true,
9153         /**
9154          * @event preparedata
9155          * Fires on every row to render, to allow you to change the data.
9156          * @param {Roo.View} this
9157          * @param {Object} data to be rendered (change this)
9158          */
9159           "preparedata" : true
9160
9161
9162         });
9163
9164
9165
9166     this.el.on({
9167         "click": this.onClick,
9168         "dblclick": this.onDblClick,
9169         "contextmenu": this.onContextMenu,
9170         scope:this
9171     });
9172
9173     this.selections = [];
9174     this.nodes = [];
9175     this.cmp = new Roo.CompositeElementLite([]);
9176     if(this.store){
9177         this.store = Roo.factory(this.store, Roo.data);
9178         this.setStore(this.store, true);
9179     }
9180
9181     if ( this.footer && this.footer.xtype) {
9182
9183          var fctr = this.wrapEl.appendChild(document.createElement("div"));
9184
9185         this.footer.dataSource = this.store
9186         this.footer.container = fctr;
9187         this.footer = Roo.factory(this.footer, Roo);
9188         fctr.insertFirst(this.el);
9189
9190         // this is a bit insane - as the paging toolbar seems to detach the el..
9191 //        dom.parentNode.parentNode.parentNode
9192          // they get detached?
9193     }
9194
9195
9196     Roo.View.superclass.constructor.call(this);
9197
9198
9199 };
9200
9201 Roo.extend(Roo.View, Roo.util.Observable, {
9202
9203      /**
9204      * @cfg {Roo.data.Store} store Data store to load data from.
9205      */
9206     store : false,
9207
9208     /**
9209      * @cfg {String|Roo.Element} el The container element.
9210      */
9211     el : '',
9212
9213     /**
9214      * @cfg {String|Roo.Template} tpl The template used by this View
9215      */
9216     tpl : false,
9217     /**
9218      * @cfg {String} dataName the named area of the template to use as the data area
9219      *                          Works with domtemplates roo-name="name"
9220      */
9221     dataName: false,
9222     /**
9223      * @cfg {String} selectedClass The css class to add to selected nodes
9224      */
9225     selectedClass : "x-view-selected",
9226      /**
9227      * @cfg {String} emptyText The empty text to show when nothing is loaded.
9228      */
9229     emptyText : "",
9230
9231     /**
9232      * @cfg {String} text to display on mask (default Loading)
9233      */
9234     mask : false,
9235     /**
9236      * @cfg {Boolean} multiSelect Allow multiple selection
9237      */
9238     multiSelect : false,
9239     /**
9240      * @cfg {Boolean} singleSelect Allow single selection
9241      */
9242     singleSelect:  false,
9243
9244     /**
9245      * @cfg {Boolean} toggleSelect - selecting
9246      */
9247     toggleSelect : false,
9248
9249     /**
9250      * Returns the element this view is bound to.
9251      * @return {Roo.Element}
9252      */
9253     getEl : function(){
9254         return this.wrapEl;
9255     },
9256
9257
9258
9259     /**
9260      * Refreshes the view. - called by datachanged on the store. - do not call directly.
9261      */
9262     refresh : function(){
9263         Roo.log('refresh');
9264         var t = this.tpl;
9265
9266         // if we are using something like 'domtemplate', then
9267         // the what gets used is:
9268         // t.applySubtemplate(NAME, data, wrapping data..)
9269         // the outer template then get' applied with
9270         //     the store 'extra data'
9271         // and the body get's added to the
9272         //      roo-name="data" node?
9273         //      <span class='roo-tpl-{name}'></span> ?????
9274
9275
9276
9277         this.clearSelections();
9278         this.el.update("");
9279         var html = [];
9280         var records = this.store.getRange();
9281         if(records.length < 1) {
9282
9283             // is this valid??  = should it render a template??
9284
9285             this.el.update(this.emptyText);
9286             return;
9287         }
9288         var el = this.el;
9289         if (this.dataName) {
9290             this.el.update(t.apply(this.store.meta)); //????
9291             el = this.el.child('.roo-tpl-' + this.dataName);
9292         }
9293
9294         for(var i = 0, len = records.length; i < len; i++){
9295             var data = this.prepareData(records[i].data, i, records[i]);
9296             this.fireEvent("preparedata", this, data, i, records[i]);
9297             html[html.length] = Roo.util.Format.trim(
9298                 this.dataName ?
9299                     t.applySubtemplate(this.dataName, data, this.store.meta) :
9300                     t.apply(data)
9301             );
9302         }
9303
9304
9305
9306         el.update(html.join(""));
9307         this.nodes = el.dom.childNodes;
9308         this.updateIndexes(0);
9309     },
9310
9311
9312     /**
9313      * Function to override to reformat the data that is sent to
9314      * the template for each node.
9315      * DEPRICATED - use the preparedata event handler.
9316      * @param {Array/Object} data The raw data (array of colData for a data model bound view or
9317      * a JSON object for an UpdateManager bound view).
9318      */
9319     prepareData : function(data, index, record)
9320     {
9321         this.fireEvent("preparedata", this, data, index, record);
9322         return data;
9323     },
9324
9325     onUpdate : function(ds, record){
9326          Roo.log('on update');
9327         this.clearSelections();
9328         var index = this.store.indexOf(record);
9329         var n = this.nodes[index];
9330         this.tpl.insertBefore(n, this.prepareData(record.data, index, record));
9331         n.parentNode.removeChild(n);
9332         this.updateIndexes(index, index);
9333     },
9334
9335
9336
9337 // --------- FIXME
9338     onAdd : function(ds, records, index)
9339     {
9340         Roo.log(['on Add', ds, records, index] );
9341         this.clearSelections();
9342         if(this.nodes.length == 0){
9343             this.refresh();
9344             return;
9345         }
9346         var n = this.nodes[index];
9347         for(var i = 0, len = records.length; i < len; i++){
9348             var d = this.prepareData(records[i].data, i, records[i]);
9349             if(n){
9350                 this.tpl.insertBefore(n, d);
9351             }else{
9352
9353                 this.tpl.append(this.el, d);
9354             }
9355         }
9356         this.updateIndexes(index);
9357     },
9358
9359     onRemove : function(ds, record, index){
9360         Roo.log('onRemove');
9361         this.clearSelections();
9362         var el = this.dataName  ?
9363             this.el.child('.roo-tpl-' + this.dataName) :
9364             this.el;
9365
9366         el.dom.removeChild(this.nodes[index]);
9367         this.updateIndexes(index);
9368     },
9369
9370     /**
9371      * Refresh an individual node.
9372      * @param {Number} index
9373      */
9374     refreshNode : function(index){
9375         this.onUpdate(this.store, this.store.getAt(index));
9376     },
9377
9378     updateIndexes : function(startIndex, endIndex){
9379         var ns = this.nodes;
9380         startIndex = startIndex || 0;
9381         endIndex = endIndex || ns.length - 1;
9382         for(var i = startIndex; i <= endIndex; i++){
9383             ns[i].nodeIndex = i;
9384         }
9385     },
9386
9387     /**
9388      * Changes the data store this view uses and refresh the view.
9389      * @param {Store} store
9390      */
9391     setStore : function(store, initial){
9392         if(!initial && this.store){
9393             this.store.un("datachanged", this.refresh);
9394             this.store.un("add", this.onAdd);
9395             this.store.un("remove", this.onRemove);
9396             this.store.un("update", this.onUpdate);
9397             this.store.un("clear", this.refresh);
9398             this.store.un("beforeload", this.onBeforeLoad);
9399             this.store.un("load", this.onLoad);
9400             this.store.un("loadexception", this.onLoad);
9401         }
9402         if(store){
9403
9404             store.on("datachanged", this.refresh, this);
9405             store.on("add", this.onAdd, this);
9406             store.on("remove", this.onRemove, this);
9407             store.on("update", this.onUpdate, this);
9408             store.on("clear", this.refresh, this);
9409             store.on("beforeload", this.onBeforeLoad, this);
9410             store.on("load", this.onLoad, this);
9411             store.on("loadexception", this.onLoad, this);
9412         }
9413
9414         if(store){
9415             this.refresh();
9416         }
9417     },
9418     /**
9419      * onbeforeLoad - masks the loading area.
9420      *
9421      */
9422     onBeforeLoad : function(store,opts)
9423     {
9424          Roo.log('onBeforeLoad');
9425         if (!opts.add) {
9426             this.el.update("");
9427         }
9428         this.el.mask(this.mask ? this.mask : "Loading" );
9429     },
9430     onLoad : function ()
9431     {
9432         this.el.unmask();
9433     },
9434
9435
9436     /**
9437      * Returns the template node the passed child belongs to or null if it doesn't belong to one.
9438      * @param {HTMLElement} node
9439      * @return {HTMLElement} The template node
9440      */
9441     findItemFromChild : function(node){
9442         var el = this.dataName  ?
9443             this.el.child('.roo-tpl-' + this.dataName,true) :
9444             this.el.dom;
9445
9446         if(!node || node.parentNode == el){
9447                     return node;
9448             }
9449             var p = node.parentNode;
9450             while(p && p != el){
9451             if(p.parentNode == el){
9452                 return p;
9453             }
9454             p = p.parentNode;
9455         }
9456             return null;
9457     },
9458
9459     /** @ignore */
9460     onClick : function(e){
9461         var item = this.findItemFromChild(e.getTarget());
9462         if(item){
9463             var index = this.indexOf(item);
9464             if(this.onItemClick(item, index, e) !== false){
9465                 this.fireEvent("click", this, index, item, e);
9466             }
9467         }else{
9468             this.clearSelections();
9469         }
9470     },
9471
9472     /** @ignore */
9473     onContextMenu : function(e){
9474         var item = this.findItemFromChild(e.getTarget());
9475         if(item){
9476             this.fireEvent("contextmenu", this, this.indexOf(item), item, e);
9477         }
9478     },
9479
9480     /** @ignore */
9481     onDblClick : function(e){
9482         var item = this.findItemFromChild(e.getTarget());
9483         if(item){
9484             this.fireEvent("dblclick", this, this.indexOf(item), item, e);
9485         }
9486     },
9487
9488     onItemClick : function(item, index, e)
9489     {
9490         if(this.fireEvent("beforeclick", this, index, item, e) === false){
9491             return false;
9492         }
9493         if (this.toggleSelect) {
9494             var m = this.isSelected(item) ? 'unselect' : 'select';
9495             Roo.log(m);
9496             var _t = this;
9497             _t[m](item, true, false);
9498             return true;
9499         }
9500         if(this.multiSelect || this.singleSelect){
9501             if(this.multiSelect && e.shiftKey && this.lastSelection){
9502                 this.select(this.getNodes(this.indexOf(this.lastSelection), index), false);
9503             }else{
9504                 this.select(item, this.multiSelect && e.ctrlKey);
9505                 this.lastSelection = item;
9506             }
9507             e.preventDefault();
9508         }
9509         return true;
9510     },
9511
9512     /**
9513      * Get the number of selected nodes.
9514      * @return {Number}
9515      */
9516     getSelectionCount : function(){
9517         return this.selections.length;
9518     },
9519
9520     /**
9521      * Get the currently selected nodes.
9522      * @return {Array} An array of HTMLElements
9523      */
9524     getSelectedNodes : function(){
9525         return this.selections;
9526     },
9527
9528     /**
9529      * Get the indexes of the selected nodes.
9530      * @return {Array}
9531      */
9532     getSelectedIndexes : function(){
9533         var indexes = [], s = this.selections;
9534         for(var i = 0, len = s.length; i < len; i++){
9535             indexes.push(s[i].nodeIndex);
9536         }
9537         return indexes;
9538     },
9539
9540     /**
9541      * Clear all selections
9542      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange event
9543      */
9544     clearSelections : function(suppressEvent){
9545         if(this.nodes && (this.multiSelect || this.singleSelect) && this.selections.length > 0){
9546             this.cmp.elements = this.selections;
9547             this.cmp.removeClass(this.selectedClass);
9548             this.selections = [];
9549             if(!suppressEvent){
9550                 this.fireEvent("selectionchange", this, this.selections);
9551             }
9552         }
9553     },
9554
9555     /**
9556      * Returns true if the passed node is selected
9557      * @param {HTMLElement/Number} node The node or node index
9558      * @return {Boolean}
9559      */
9560     isSelected : function(node){
9561         var s = this.selections;
9562         if(s.length < 1){
9563             return false;
9564         }
9565         node = this.getNode(node);
9566         return s.indexOf(node) !== -1;
9567     },
9568
9569     /**
9570      * Selects nodes.
9571      * @param {Array/HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node, id of a template node or an array of any of those to select
9572      * @param {Boolean} keepExisting (optional) true to keep existing selections
9573      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
9574      */
9575     select : function(nodeInfo, keepExisting, suppressEvent){
9576         if(nodeInfo instanceof Array){
9577             if(!keepExisting){
9578                 this.clearSelections(true);
9579             }
9580             for(var i = 0, len = nodeInfo.length; i < len; i++){
9581                 this.select(nodeInfo[i], true, true);
9582             }
9583             return;
9584         }
9585         var node = this.getNode(nodeInfo);
9586         if(!node || this.isSelected(node)){
9587             return; // already selected.
9588         }
9589         if(!keepExisting){
9590             this.clearSelections(true);
9591         }
9592         if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
9593             Roo.fly(node).addClass(this.selectedClass);
9594             this.selections.push(node);
9595             if(!suppressEvent){
9596                 this.fireEvent("selectionchange", this, this.selections);
9597             }
9598         }
9599
9600
9601     },
9602       /**
9603      * Unselects nodes.
9604      * @param {Array/HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node, id of a template node or an array of any of those to select
9605      * @param {Boolean} keepExisting (optional) true IGNORED (for campatibility with select)
9606      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
9607      */
9608     unselect : function(nodeInfo, keepExisting, suppressEvent)
9609     {
9610         if(nodeInfo instanceof Array){
9611             Roo.each(this.selections, function(s) {
9612                 this.unselect(s, nodeInfo);
9613             }, this);
9614             return;
9615         }
9616         var node = this.getNode(nodeInfo);
9617         if(!node || !this.isSelected(node)){
9618             Roo.log("not selected");
9619             return; // not selected.
9620         }
9621         // fireevent???
9622         var ns = [];
9623         Roo.each(this.selections, function(s) {
9624             if (s == node ) {
9625                 Roo.fly(node).removeClass(this.selectedClass);
9626
9627                 return;
9628             }
9629             ns.push(s);
9630         },this);
9631
9632         this.selections= ns;
9633         this.fireEvent("selectionchange", this, this.selections);
9634     },
9635
9636     /**
9637      * Gets a template node.
9638      * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
9639      * @return {HTMLElement} The node or null if it wasn't found
9640      */
9641     getNode : function(nodeInfo){
9642         if(typeof nodeInfo == "string"){
9643             return document.getElementById(nodeInfo);
9644         }else if(typeof nodeInfo == "number"){
9645             return this.nodes[nodeInfo];
9646         }
9647         return nodeInfo;
9648     },
9649
9650     /**
9651      * Gets a range template nodes.
9652      * @param {Number} startIndex
9653      * @param {Number} endIndex
9654      * @return {Array} An array of nodes
9655      */
9656     getNodes : function(start, end){
9657         var ns = this.nodes;
9658         start = start || 0;
9659         end = typeof end == "undefined" ? ns.length - 1 : end;
9660         var nodes = [];
9661         if(start <= end){
9662             for(var i = start; i <= end; i++){
9663                 nodes.push(ns[i]);
9664             }
9665         } else{
9666             for(var i = start; i >= end; i--){
9667                 nodes.push(ns[i]);
9668             }
9669         }
9670         return nodes;
9671     },
9672
9673     /**
9674      * Finds the index of the passed node
9675      * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
9676      * @return {Number} The index of the node or -1
9677      */
9678     indexOf : function(node){
9679         node = this.getNode(node);
9680         if(typeof node.nodeIndex == "number"){
9681             return node.nodeIndex;
9682         }
9683         var ns = this.nodes;
9684         for(var i = 0, len = ns.length; i < len; i++){
9685             if(ns[i] == node){
9686                 return i;
9687             }
9688         }
9689         return -1;
9690     }
9691 });
9692 /*
9693  * - LGPL
9694  *
9695  * based on jquery fullcalendar
9696  *
9697  */
9698
9699 Roo.bootstrap = Roo.bootstrap || {};
9700 /**
9701  * @class Roo.bootstrap.Calendar
9702  * @extends Roo.bootstrap.Component
9703  * Bootstrap Calendar class
9704  * @cfg {Boolean} loadMask (true|false) default false
9705
9706  * @constructor
9707  * Create a new Container
9708  * @param {Object} config The config object
9709  */
9710
9711
9712
9713 Roo.bootstrap.Calendar = function(config){
9714     Roo.bootstrap.Calendar.superclass.constructor.call(this, config);
9715      this.addEvents({
9716         /**
9717              * @event select
9718              * Fires when a date is selected
9719              * @param {DatePicker} this
9720              * @param {Date} date The selected date
9721              */
9722         'select': true,
9723         /**
9724              * @event monthchange
9725              * Fires when the displayed month changes
9726              * @param {DatePicker} this
9727              * @param {Date} date The selected month
9728              */
9729         'monthchange': true,
9730         /**
9731              * @event evententer
9732              * Fires when mouse over an event
9733              * @param {Calendar} this
9734              * @param {event} Event
9735              */
9736         'evententer': true,
9737         /**
9738              * @event eventleave
9739              * Fires when the mouse leaves an
9740              * @param {Calendar} this
9741              * @param {event}
9742              */
9743         'eventleave': true,
9744         /**
9745              * @event eventclick
9746              * Fires when the mouse click an
9747              * @param {Calendar} this
9748              * @param {event}
9749              */
9750         'eventclick': true
9751
9752     });
9753
9754 };
9755
9756 Roo.extend(Roo.bootstrap.Calendar, Roo.bootstrap.Component,  {
9757
9758      /**
9759      * @cfg {Number} startDay
9760      * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
9761      */
9762     startDay : 0,
9763
9764     loadMask : false,
9765
9766     getAutoCreate : function(){
9767
9768
9769         var fc_button = function(name, corner, style, content ) {
9770             return Roo.apply({},{
9771                 tag : 'span',
9772                 cls : 'fc-button fc-button-'+name+' fc-state-default ' +
9773                          (corner.length ?
9774                             'fc-corner-' + corner.split(' ').join(' fc-corner-') :
9775                             ''
9776                         ),
9777                 html : '<SPAN class="fc-text-'+style+ '">'+content +'</SPAN>',
9778                 unselectable: 'on'
9779             });
9780         };
9781
9782         var header = {
9783             tag : 'table',
9784             cls : 'fc-header',
9785             style : 'width:100%',
9786             cn : [
9787                 {
9788                     tag: 'tr',
9789                     cn : [
9790                         {
9791                             tag : 'td',
9792                             cls : 'fc-header-left',
9793                             cn : [
9794                                 fc_button('prev', 'left', 'arrow', '&#8249;' ),
9795                                 fc_button('next', 'right', 'arrow', '&#8250;' ),
9796                                 { tag: 'span', cls: 'fc-header-space' },
9797                                 fc_button('today', 'left right', '', 'today' )  // neds state disabled..
9798
9799
9800                             ]
9801                         },
9802
9803                         {
9804                             tag : 'td',
9805                             cls : 'fc-header-center',
9806                             cn : [
9807                                 {
9808                                     tag: 'span',
9809                                     cls: 'fc-header-title',
9810                                     cn : {
9811                                         tag: 'H2',
9812                                         html : 'month / year'
9813                                     }
9814                                 }
9815
9816                             ]
9817                         },
9818                         {
9819                             tag : 'td',
9820                             cls : 'fc-header-right',
9821                             cn : [
9822                           /*      fc_button('month', 'left', '', 'month' ),
9823                                 fc_button('week', '', '', 'week' ),
9824                                 fc_button('day', 'right', '', 'day' )
9825                             */
9826
9827                             ]
9828                         }
9829
9830                     ]
9831                 }
9832             ]
9833         };
9834
9835
9836         var cal_heads = function() {
9837             var ret = [];
9838             // fixme - handle this.
9839
9840             for (var i =0; i < Date.dayNames.length; i++) {
9841                 var d = Date.dayNames[i];
9842                 ret.push({
9843                     tag: 'th',
9844                     cls : 'fc-day-header fc-' + d.substring(0,3).toLowerCase() + ' fc-widget-header',
9845                     html : d.substring(0,3)
9846                 });
9847
9848             }
9849             ret[0].cls += ' fc-first';
9850             ret[6].cls += ' fc-last';
9851             return ret;
9852         };
9853         var cal_cell = function(n) {
9854             return  {
9855                 tag: 'td',
9856                 cls : 'fc-day fc-'+n + ' fc-widget-content', ///fc-other-month fc-past
9857                 cn : [
9858                     {
9859                         cn : [
9860                             {
9861                                 cls: 'fc-day-number',
9862                                 html: 'D'
9863                             },
9864                             {
9865                                 cls: 'fc-day-content',
9866
9867                                 cn : [
9868                                      {
9869                                         style: 'position: relative;' // height: 17px;
9870                                     }
9871                                 ]
9872                             }
9873
9874
9875                         ]
9876                     }
9877                 ]
9878
9879             }
9880         };
9881         var cal_rows = function() {
9882
9883             var ret = []
9884             for (var r = 0; r < 6; r++) {
9885                 var row= {
9886                     tag : 'tr',
9887                     cls : 'fc-week',
9888                     cn : []
9889                 };
9890
9891                 for (var i =0; i < Date.dayNames.length; i++) {
9892                     var d = Date.dayNames[i];
9893                     row.cn.push(cal_cell(d.substring(0,3).toLowerCase()));
9894
9895                 }
9896                 row.cn[0].cls+=' fc-first';
9897                 row.cn[0].cn[0].style = 'min-height:90px';
9898                 row.cn[6].cls+=' fc-last';
9899                 ret.push(row);
9900
9901             }
9902             ret[0].cls += ' fc-first';
9903             ret[4].cls += ' fc-prev-last';
9904             ret[5].cls += ' fc-last';
9905             return ret;
9906
9907         };
9908
9909         var cal_table = {
9910             tag: 'table',
9911             cls: 'fc-border-separate',
9912             style : 'width:100%',
9913             cellspacing  : 0,
9914             cn : [
9915                 {
9916                     tag: 'thead',
9917                     cn : [
9918                         {
9919                             tag: 'tr',
9920                             cls : 'fc-first fc-last',
9921                             cn : cal_heads()
9922                         }
9923                     ]
9924                 },
9925                 {
9926                     tag: 'tbody',
9927                     cn : cal_rows()
9928                 }
9929
9930             ]
9931         };
9932
9933          var cfg = {
9934             cls : 'fc fc-ltr',
9935             cn : [
9936                 header,
9937                 {
9938                     cls : 'fc-content',
9939                     style : "position: relative;",
9940                     cn : [
9941                         {
9942                             cls : 'fc-view fc-view-month fc-grid',
9943                             style : 'position: relative',
9944                             unselectable : 'on',
9945                             cn : [
9946                                 {
9947                                     cls : 'fc-event-container',
9948                                     style : 'position:absolute;z-index:8;top:0;left:0;'
9949                                 },
9950                                 cal_table
9951                             ]
9952                         }
9953                     ]
9954
9955                 }
9956            ]
9957
9958         };
9959
9960
9961
9962         return cfg;
9963     },
9964
9965
9966     initEvents : function()
9967     {
9968         if(!this.store){
9969             throw "can not find store for calendar";
9970         }
9971
9972         var mark = {
9973             tag: "div",
9974             cls:"x-dlg-mask",
9975             style: "text-align:center",
9976             cn: [
9977                 {
9978                     tag: "div",
9979                     style: "background-color:white;width:50%;margin:250 auto",
9980                     cn: [
9981                         {
9982                             tag: "img",
9983                             src: rootURL + '/roojs1/images/ux/lightbox/loading.gif'
9984                         },
9985                         {
9986                             tag: "span",
9987                             html: "Loading"
9988                         }
9989
9990                     ]
9991                 }
9992             ]
9993         }
9994         this.maskEl = Roo.DomHelper.append(this.el.select('.fc-content', true).first(), mark, true);
9995
9996         var size = this.el.select('.fc-content', true).first().getSize();
9997         this.maskEl.setSize(size.width, size.height);
9998         this.maskEl.enableDisplayMode("block");
9999         if(!this.loadMask){
10000             this.maskEl.hide();
10001         }
10002
10003         this.store = Roo.factory(this.store, Roo.data);
10004         this.store.on('load', this.onLoad, this);
10005         this.store.on('beforeload', this.onBeforeLoad, this);
10006
10007         this.resize();
10008
10009         this.cells = this.el.select('.fc-day',true);
10010         //Roo.log(this.cells);
10011         this.textNodes = this.el.query('.fc-day-number');
10012         this.cells.addClassOnOver('fc-state-hover');
10013
10014         this.el.select('.fc-button-prev',true).on('click', this.showPrevMonth, this);
10015         this.el.select('.fc-button-next',true).on('click', this.showNextMonth, this);
10016         this.el.select('.fc-button-today',true).on('click', this.showToday, this);
10017         this.el.select('.fc-button',true).addClassOnOver('fc-state-hover');
10018
10019         this.on('monthchange', this.onMonthChange, this);
10020
10021         this.update(new Date().clearTime());
10022     },
10023
10024     resize : function() {
10025         var sz  = this.el.getSize();
10026
10027         this.el.select('.fc-day-header',true).setWidth(sz.width / 7);
10028         this.el.select('.fc-day-content div',true).setHeight(34);
10029     },
10030
10031
10032     // private
10033     showPrevMonth : function(e){
10034         this.update(this.activeDate.add("mo", -1));
10035     },
10036     showToday : function(e){
10037         this.update(new Date().clearTime());
10038     },
10039     // private
10040     showNextMonth : function(e){
10041         this.update(this.activeDate.add("mo", 1));
10042     },
10043
10044     // private
10045     showPrevYear : function(){
10046         this.update(this.activeDate.add("y", -1));
10047     },
10048
10049     // private
10050     showNextYear : function(){
10051         this.update(this.activeDate.add("y", 1));
10052     },
10053
10054
10055    // private
10056     update : function(date)
10057     {
10058         var vd = this.activeDate;
10059         this.activeDate = date;
10060 //        if(vd && this.el){
10061 //            var t = date.getTime();
10062 //            if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
10063 //                Roo.log('using add remove');
10064 //
10065 //                this.fireEvent('monthchange', this, date);
10066 //
10067 //                this.cells.removeClass("fc-state-highlight");
10068 //                this.cells.each(function(c){
10069 //                   if(c.dateValue == t){
10070 //                       c.addClass("fc-state-highlight");
10071 //                       setTimeout(function(){
10072 //                            try{c.dom.firstChild.focus();}catch(e){}
10073 //                       }, 50);
10074 //                       return false;
10075 //                   }
10076 //                   return true;
10077 //                });
10078 //                return;
10079 //            }
10080 //        }
10081
10082         var days = date.getDaysInMonth();
10083
10084         var firstOfMonth = date.getFirstDateOfMonth();
10085         var startingPos = firstOfMonth.getDay()-this.startDay;
10086
10087         if(startingPos < this.startDay){
10088             startingPos += 7;
10089         }
10090
10091         var pm = date.add(Date.MONTH, -1);
10092         var prevStart = pm.getDaysInMonth()-startingPos;
10093 //
10094         this.cells = this.el.select('.fc-day',true);
10095         this.textNodes = this.el.query('.fc-day-number');
10096         this.cells.addClassOnOver('fc-state-hover');
10097
10098         var cells = this.cells.elements;
10099         var textEls = this.textNodes;
10100
10101         Roo.each(cells, function(cell){
10102             cell.removeClass([ 'fc-past', 'fc-other-month', 'fc-future', 'fc-state-highlight', 'fc-state-disabled']);
10103         });
10104
10105         days += startingPos;
10106
10107         // convert everything to numbers so it's fast
10108         var day = 86400000;
10109         var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
10110         //Roo.log(d);
10111         //Roo.log(pm);
10112         //Roo.log(prevStart);
10113
10114         var today = new Date().clearTime().getTime();
10115         var sel = date.clearTime().getTime();
10116         var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
10117         var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
10118         var ddMatch = this.disabledDatesRE;
10119         var ddText = this.disabledDatesText;
10120         var ddays = this.disabledDays ? this.disabledDays.join("") : false;
10121         var ddaysText = this.disabledDaysText;
10122         var format = this.format;
10123
10124         var setCellClass = function(cal, cell){
10125
10126             //Roo.log('set Cell Class');
10127             cell.title = "";
10128             var t = d.getTime();
10129
10130             //Roo.log(d);
10131
10132             cell.dateValue = t;
10133             if(t == today){
10134                 cell.className += " fc-today";
10135                 cell.className += " fc-state-highlight";
10136                 cell.title = cal.todayText;
10137             }
10138             if(t == sel){
10139                 // disable highlight in other month..
10140                 //cell.className += " fc-state-highlight";
10141
10142             }
10143             // disabling
10144             if(t < min) {
10145                 cell.className = " fc-state-disabled";
10146                 cell.title = cal.minText;
10147                 return;
10148             }
10149             if(t > max) {
10150                 cell.className = " fc-state-disabled";
10151                 cell.title = cal.maxText;
10152                 return;
10153             }
10154             if(ddays){
10155                 if(ddays.indexOf(d.getDay()) != -1){
10156                     cell.title = ddaysText;
10157                     cell.className = " fc-state-disabled";
10158                 }
10159             }
10160             if(ddMatch && format){
10161                 var fvalue = d.dateFormat(format);
10162                 if(ddMatch.test(fvalue)){
10163                     cell.title = ddText.replace("%0", fvalue);
10164                     cell.className = " fc-state-disabled";
10165                 }
10166             }
10167
10168             if (!cell.initialClassName) {
10169                 cell.initialClassName = cell.dom.className;
10170             }
10171
10172             cell.dom.className = cell.initialClassName  + ' ' +  cell.className;
10173         };
10174
10175         var i = 0;
10176
10177         for(; i < startingPos; i++) {
10178             textEls[i].innerHTML = (++prevStart);
10179             d.setDate(d.getDate()+1);
10180
10181             cells[i].className = "fc-past fc-other-month";
10182             setCellClass(this, cells[i]);
10183         }
10184
10185         var intDay = 0;
10186
10187         for(; i < days; i++){
10188             intDay = i - startingPos + 1;
10189             textEls[i].innerHTML = (intDay);
10190             d.setDate(d.getDate()+1);
10191
10192             cells[i].className = ''; // "x-date-active";
10193             setCellClass(this, cells[i]);
10194         }
10195         var extraDays = 0;
10196
10197         for(; i < 42; i++) {
10198             textEls[i].innerHTML = (++extraDays);
10199             d.setDate(d.getDate()+1);
10200
10201             cells[i].className = "fc-future fc-other-month";
10202             setCellClass(this, cells[i]);
10203         }
10204
10205         this.el.select('.fc-header-title h2',true).update(Date.monthNames[date.getMonth()] + " " + date.getFullYear());
10206
10207         var totalRows = Math.ceil((date.getDaysInMonth() + date.getFirstDateOfMonth().getDay()) / 7);
10208
10209         this.el.select('tr.fc-week.fc-prev-last',true).removeClass('fc-last');
10210         this.el.select('tr.fc-week.fc-next-last',true).addClass('fc-last').show();
10211
10212         if(totalRows != 6){
10213             this.el.select('tr.fc-week.fc-last',true).removeClass('fc-last').addClass('fc-next-last').hide();
10214             this.el.select('tr.fc-week.fc-prev-last',true).addClass('fc-last');
10215         }
10216
10217         this.fireEvent('monthchange', this, date);
10218
10219
10220         /*
10221         if(!this.internalRender){
10222             var main = this.el.dom.firstChild;
10223             var w = main.offsetWidth;
10224             this.el.setWidth(w + this.el.getBorderWidth("lr"));
10225             Roo.fly(main).setWidth(w);
10226             this.internalRender = true;
10227             // opera does not respect the auto grow header center column
10228             // then, after it gets a width opera refuses to recalculate
10229             // without a second pass
10230             if(Roo.isOpera && !this.secondPass){
10231                 main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
10232                 this.secondPass = true;
10233                 this.update.defer(10, this, [date]);
10234             }
10235         }
10236         */
10237
10238     },
10239
10240     findCell : function(dt) {
10241         dt = dt.clearTime().getTime();
10242         var ret = false;
10243         this.cells.each(function(c){
10244             //Roo.log("check " +c.dateValue + '?=' + dt);
10245             if(c.dateValue == dt){
10246                 ret = c;
10247                 return false;
10248             }
10249             return true;
10250         });
10251
10252         return ret;
10253     },
10254
10255     findCells : function(ev) {
10256         var s = ev.start.clone().clearTime().getTime();
10257        // Roo.log(s);
10258         var e= ev.end.clone().clearTime().getTime();
10259        // Roo.log(e);
10260         var ret = [];
10261         this.cells.each(function(c){
10262              ////Roo.log("check " +c.dateValue + '<' + e + ' > ' + s);
10263
10264             if(c.dateValue > e){
10265                 return ;
10266             }
10267             if(c.dateValue < s){
10268                 return ;
10269             }
10270             ret.push(c);
10271         });
10272
10273         return ret;
10274     },
10275
10276     findBestRow: function(cells)
10277     {
10278         var ret = 0;
10279
10280         for (var i =0 ; i < cells.length;i++) {
10281             ret  = Math.max(cells[i].rows || 0,ret);
10282         }
10283         return ret;
10284
10285     },
10286
10287
10288     addItem : function(ev)
10289     {
10290         // look for vertical location slot in
10291         var cells = this.findCells(ev);
10292
10293         ev.row = this.findBestRow(cells);
10294
10295         // work out the location.
10296
10297         var crow = false;
10298         var rows = [];
10299         for(var i =0; i < cells.length; i++) {
10300             if (!crow) {
10301                 crow = {
10302                     start : cells[i],
10303                     end :  cells[i]
10304                 };
10305                 continue;
10306             }
10307             if (crow.start.getY() == cells[i].getY()) {
10308                 // on same row.
10309                 crow.end = cells[i];
10310                 continue;
10311             }
10312             // different row.
10313             rows.push(crow);
10314             crow = {
10315                 start: cells[i],
10316                 end : cells[i]
10317             };
10318
10319         }
10320
10321         rows.push(crow);
10322         ev.els = [];
10323         ev.rows = rows;
10324         ev.cells = cells;
10325         for (var i = 0; i < cells.length;i++) {
10326             cells[i].rows = Math.max(cells[i].rows || 0 , ev.row + 1 );
10327
10328         }
10329
10330         this.calevents.push(ev);
10331     },
10332
10333     clearEvents: function() {
10334
10335         if(!this.calevents){
10336             return;
10337         }
10338
10339         Roo.each(this.cells.elements, function(c){
10340             c.rows = 0;
10341         });
10342
10343         Roo.each(this.calevents, function(e) {
10344             Roo.each(e.els, function(el) {
10345                 el.un('mouseenter' ,this.onEventEnter, this);
10346                 el.un('mouseleave' ,this.onEventLeave, this);
10347                 el.remove();
10348             },this);
10349         },this);
10350
10351     },
10352
10353     renderEvents: function()
10354     {
10355         // first make sure there is enough space..
10356
10357         this.cells.each(function(c) {
10358
10359             c.select('.fc-day-content div',true).first().setHeight(Math.max(34, c.rows * 20));
10360         });
10361
10362         for (var e = 0; e < this.calevents.length; e++) {
10363             var ev = this.calevents[e];
10364             var cells = ev.cells;
10365             var rows = ev.rows;
10366
10367             for(var i =0; i < rows.length; i++) {
10368
10369
10370                 // how many rows should it span..
10371
10372                 var  cfg = {
10373                     cls : 'roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable',
10374                     style : 'position: absolute', // left: 387px; width: 121px; top: 359px;
10375
10376                     unselectable : "on",
10377                     cn : [
10378                         {
10379                             cls: 'fc-event-inner',
10380                             cn : [
10381 //                                {
10382 //                                  tag:'span',
10383 //                                  cls: 'fc-event-time',
10384 //                                  html : cells.length > 1 ? '' : ev.time
10385 //                                },
10386                                 {
10387                                   tag:'span',
10388                                   cls: 'fc-event-title',
10389                                   html : String.format('{0}', ev.title)
10390                                 }
10391
10392
10393                             ]
10394                         },
10395                         {
10396                             cls: 'ui-resizable-handle ui-resizable-e',
10397                             html : '&nbsp;&nbsp;&nbsp'
10398                         }
10399
10400                     ]
10401                 };
10402                 if (i == 0) {
10403                     cfg.cls += ' fc-event-start';
10404                 }
10405                 if ((i+1) == rows.length) {
10406                     cfg.cls += ' fc-event-end';
10407                 }
10408
10409                 var ctr = this.el.select('.fc-event-container',true).first();
10410                 var cg = ctr.createChild(cfg);
10411
10412                 cg.on('mouseenter' ,this.onEventEnter, this, ev);
10413                 cg.on('mouseleave' ,this.onEventLeave, this, ev);
10414                 cg.on('click', this.onEventClick, this, ev);
10415
10416                 ev.els.push(cg);
10417
10418                 var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
10419                 var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
10420                 //Roo.log(cg);
10421                 cg.setXY([sbox.x +2, sbox.y +(ev.row * 20)]);
10422                 cg.setWidth(ebox.right - sbox.x -2);
10423             }
10424
10425
10426         }
10427
10428     },
10429
10430     onEventEnter: function (e, el,event,d) {
10431         this.fireEvent('evententer', this, el, event);
10432     },
10433
10434     onEventLeave: function (e, el,event,d) {
10435         this.fireEvent('eventleave', this, el, event);
10436     },
10437
10438     onEventClick: function (e, el,event,d) {
10439         this.fireEvent('eventclick', this, el, event);
10440     },
10441
10442     onMonthChange: function () {
10443         this.store.load();
10444     },
10445
10446     onLoad: function ()
10447     {
10448         this.calevents = [];
10449         var cal = this;
10450
10451         if(this.store.getCount() > 0){
10452             this.store.data.each(function(d){
10453                cal.addItem({
10454                     id : d.data.id,
10455                     start: (typeof(d.data.start_dt) === 'string') ? new Date.parseDate(d.data.start_dt, 'Y-m-d H:i:s') : d.data.start_dt,
10456                     end : (typeof(d.data.end_dt) === 'string') ? new Date.parseDate(d.data.end_dt, 'Y-m-d H:i:s') : d.data.end_dt,
10457                     time : d.data.start_time,
10458                     title : d.data.title,
10459                     description : d.data.description,
10460                     venue : d.data.venue
10461                 });
10462             });
10463         }
10464
10465         this.renderEvents();
10466
10467         if(this.loadMask){
10468             this.maskEl.hide();
10469         }
10470     },
10471
10472     onBeforeLoad: function()
10473     {
10474         this.clearEvents();
10475
10476         if(this.loadMask){
10477             this.maskEl.show();
10478         }
10479     }
10480 });
10481
10482
10483  /*
10484  * - LGPL
10485  *
10486  * element
10487  *
10488  */
10489
10490 /**
10491  * @class Roo.bootstrap.Popover
10492  * @extends Roo.bootstrap.Component
10493  * Bootstrap Popover class
10494  * @cfg {String} html contents of the popover   (or false to use children..)
10495  * @cfg {String} title of popover (or false to hide)
10496  * @cfg {String} placement how it is placed
10497  * @cfg {String} trigger click || hover (or false to trigger manually)
10498  * @cfg {String} over what (parent or false to trigger manually.)
10499  *
10500  * @constructor
10501  * Create a new Popover
10502  * @param {Object} config The config object
10503  */
10504
10505 Roo.bootstrap.Popover = function(config){
10506     Roo.bootstrap.Popover.superclass.constructor.call(this, config);
10507 };
10508
10509 Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
10510
10511     title: 'Fill in a title',
10512     html: false,
10513
10514     placement : 'right',
10515     trigger : 'hover', // hover
10516
10517     over: 'parent',
10518
10519     can_build_overlaid : false,
10520
10521     getChildContainer : function()
10522     {
10523         return this.el.select('.popover-content',true).first();
10524     },
10525
10526     getAutoCreate : function(){
10527          Roo.log('make popover?');
10528         var cfg = {
10529            cls : 'popover roo-dynamic',
10530            style: 'display:block',
10531            cn : [
10532                 {
10533                     cls : 'arrow'
10534                 },
10535                 {
10536                     cls : 'popover-inner',
10537                     cn : [
10538                         {
10539                             tag: 'h3',
10540                             cls: 'popover-title',
10541                             html : this.title
10542                         },
10543                         {
10544                             cls : 'popover-content',
10545                             html : this.html
10546                         }
10547                     ]
10548
10549                 }
10550            ]
10551         };
10552
10553         return cfg;
10554     },
10555     setTitle: function(str)
10556     {
10557         this.el.select('.popover-title',true).first().dom.innerHTML = str;
10558     },
10559     setContent: function(str)
10560     {
10561         this.el.select('.popover-content',true).first().dom.innerHTML = str;
10562     },
10563     // as it get's added to the bottom of the page.
10564     onRender : function(ct, position)
10565     {
10566         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
10567         if(!this.el){
10568             var cfg = Roo.apply({},  this.getAutoCreate());
10569             cfg.id = Roo.id();
10570
10571             if (this.cls) {
10572                 cfg.cls += ' ' + this.cls;
10573             }
10574             if (this.style) {
10575                 cfg.style = this.style;
10576             }
10577             Roo.log("adding to ")
10578             this.el = Roo.get(document.body).createChild(cfg, position);
10579             Roo.log(this.el);
10580         }
10581         this.initEvents();
10582     },
10583
10584     initEvents : function()
10585     {
10586         this.el.select('.popover-title',true).setVisibilityMode(Roo.Element.DISPLAY);
10587         this.el.enableDisplayMode('block');
10588         this.el.hide();
10589         if (this.over === false) {
10590             return;
10591         }
10592         if (this.triggers === false) {
10593             return;
10594         }
10595         var on_el = (this.over == 'parent') ? this.parent().el : Roo.get(this.over);
10596         var triggers = this.trigger ? this.trigger.split(' ') : [];
10597         Roo.each(triggers, function(trigger) {
10598
10599             if (trigger == 'click') {
10600                 on_el.on('click', this.toggle, this);
10601             } else if (trigger != 'manual') {
10602                 var eventIn  = trigger == 'hover' ? 'mouseenter' : 'focusin'
10603                 var eventOut = trigger == 'hover' ? 'mouseleave' : 'focusout'
10604
10605                 on_el.on(eventIn  ,this.enter, this);
10606                 on_el.on(eventOut, this.leave, this);
10607             }
10608         }, this);
10609
10610     },
10611
10612
10613     // private
10614     timeout : null,
10615     hoverState : null,
10616
10617     toggle : function () {
10618         this.hoverState == 'in' ? this.leave() : this.enter();
10619     },
10620
10621     enter : function () {
10622
10623
10624         clearTimeout(this.timeout);
10625
10626         this.hoverState = 'in'
10627
10628         if (!this.delay || !this.delay.show) {
10629             this.show();
10630             return
10631         }
10632         var _t = this;
10633         this.timeout = setTimeout(function () {
10634             if (_t.hoverState == 'in') {
10635                 _t.show();
10636             }
10637         }, this.delay.show)
10638     },
10639     leave : function() {
10640         clearTimeout(this.timeout);
10641
10642         this.hoverState = 'out'
10643
10644         if (!this.delay || !this.delay.hide) {
10645             this.hide();
10646             return
10647         }
10648         var _t = this;
10649         this.timeout = setTimeout(function () {
10650             if (_t.hoverState == 'out') {
10651                 _t.hide();
10652             }
10653         }, this.delay.hide)
10654     },
10655
10656     show : function (on_el)
10657     {
10658         if (!on_el) {
10659             on_el= (this.over == 'parent') ? this.parent().el : Roo.get(this.over);
10660         }
10661         // set content.
10662         this.el.select('.popover-title',true).first().dom.innerHtml = this.title;
10663         if (this.html !== false) {
10664             this.el.select('.popover-content',true).first().dom.innerHtml = this.title;
10665         }
10666         this.el.removeClass(['fade','top','bottom', 'left', 'right','in']);
10667         if (!this.title.length) {
10668             this.el.select('.popover-title',true).hide();
10669         }
10670
10671         var placement = typeof this.placement == 'function' ?
10672             this.placement.call(this, this.el, on_el) :
10673             this.placement;
10674
10675         var autoToken = /\s?auto?\s?/i;
10676         var autoPlace = autoToken.test(placement);
10677         if (autoPlace) {
10678             placement = placement.replace(autoToken, '') || 'top';
10679         }
10680
10681         //this.el.detach()
10682         //this.el.setXY([0,0]);
10683         this.el.show();
10684         this.el.dom.style.display='block';
10685         this.el.addClass(placement);
10686
10687         //this.el.appendTo(on_el);
10688
10689         var p = this.getPosition();
10690         var box = this.el.getBox();
10691
10692         if (autoPlace) {
10693             // fixme..
10694         }
10695         var align = Roo.bootstrap.Popover.alignment[placement]
10696         this.el.alignTo(on_el, align[0],align[1]);
10697         //var arrow = this.el.select('.arrow',true).first();
10698         //arrow.set(align[2],
10699
10700         this.el.addClass('in');
10701         this.hoverState = null;
10702
10703         if (this.el.hasClass('fade')) {
10704             // fade it?
10705         }
10706
10707     },
10708     hide : function()
10709     {
10710         this.el.setXY([0,0]);
10711         this.el.removeClass('in');
10712         this.el.hide();
10713
10714     }
10715
10716 });
10717
10718 Roo.bootstrap.Popover.alignment = {
10719     'left' : ['r-l', [-10,0], 'right'],
10720     'right' : ['l-r', [10,0], 'left'],
10721     'bottom' : ['t-b', [0,10], 'top'],
10722     'top' : [ 'b-t', [0,-10], 'bottom']
10723 };
10724
10725  /*
10726  * - LGPL
10727  *
10728  * Progress
10729  *
10730  */
10731
10732 /**
10733  * @class Roo.bootstrap.Progress
10734  * @extends Roo.bootstrap.Component
10735  * Bootstrap Progress class
10736  * @cfg {Boolean} striped striped of the progress bar
10737  * @cfg {Boolean} active animated of the progress bar
10738  *
10739  *
10740  * @constructor
10741  * Create a new Progress
10742  * @param {Object} config The config object
10743  */
10744
10745 Roo.bootstrap.Progress = function(config){
10746     Roo.bootstrap.Progress.superclass.constructor.call(this, config);
10747 };
10748
10749 Roo.extend(Roo.bootstrap.Progress, Roo.bootstrap.Component,  {
10750
10751     striped : false,
10752     active: false,
10753
10754     getAutoCreate : function(){
10755         var cfg = {
10756             tag: 'div',
10757             cls: 'progress'
10758         };
10759
10760
10761         if(this.striped){
10762             cfg.cls += ' progress-striped';
10763         }
10764
10765         if(this.active){
10766             cfg.cls += ' active';
10767         }
10768
10769
10770         return cfg;
10771     }
10772
10773 });
10774
10775
10776
10777  /*
10778  * - LGPL
10779  *
10780  * ProgressBar
10781  *
10782  */
10783
10784 /**
10785  * @class Roo.bootstrap.ProgressBar
10786  * @extends Roo.bootstrap.Component
10787  * Bootstrap ProgressBar class
10788  * @cfg {Number} aria_valuenow aria-value now
10789  * @cfg {Number} aria_valuemin aria-value min
10790  * @cfg {Number} aria_valuemax aria-value max
10791  * @cfg {String} label label for the progress bar
10792  * @cfg {String} panel (success | info | warning | danger )
10793  * @cfg {String} role role of the progress bar
10794  * @cfg {String} sr_only text
10795  *
10796  *
10797  * @constructor
10798  * Create a new ProgressBar
10799  * @param {Object} config The config object
10800  */
10801
10802 Roo.bootstrap.ProgressBar = function(config){
10803     Roo.bootstrap.ProgressBar.superclass.constructor.call(this, config);
10804 };
10805
10806 Roo.extend(Roo.bootstrap.ProgressBar, Roo.bootstrap.Component,  {
10807
10808     aria_valuenow : 0,
10809     aria_valuemin : 0,
10810     aria_valuemax : 100,
10811     label : false,
10812     panel : false,
10813     role : false,
10814     sr_only: false,
10815
10816     getAutoCreate : function()
10817     {
10818
10819         var cfg = {
10820             tag: 'div',
10821             cls: 'progress-bar',
10822             style: 'width:' + Math.ceil((this.aria_valuenow / this.aria_valuemax) * 100) + '%'
10823         };
10824
10825         if(this.sr_only){
10826             cfg.cn = {
10827                 tag: 'span',
10828                 cls: 'sr-only',
10829                 html: this.sr_only
10830             }
10831         }
10832
10833         if(this.role){
10834             cfg.role = this.role;
10835         }
10836
10837         if(this.aria_valuenow){
10838             cfg['aria-valuenow'] = this.aria_valuenow;
10839         }
10840
10841         if(this.aria_valuemin){
10842             cfg['aria-valuemin'] = this.aria_valuemin;
10843         }
10844
10845         if(this.aria_valuemax){
10846             cfg['aria-valuemax'] = this.aria_valuemax;
10847         }
10848
10849         if(this.label && !this.sr_only){
10850             cfg.html = this.label;
10851         }
10852
10853         if(this.panel){
10854             cfg.cls += ' progress-bar-' + this.panel;
10855         }
10856
10857         return cfg;
10858     },
10859
10860     update : function(aria_valuenow)
10861     {
10862         this.aria_valuenow = aria_valuenow;
10863
10864         this.el.setStyle('width', Math.ceil((this.aria_valuenow / this.aria_valuemax) * 100) + '%');
10865     }
10866
10867 });
10868
10869
10870
10871  /*
10872  * - LGPL
10873  *
10874  * TabPanel
10875  *
10876  */
10877
10878 /**
10879  * @class Roo.bootstrap.TabPanel
10880  * @extends Roo.bootstrap.Component
10881  * Bootstrap TabPanel class
10882  * @cfg {Boolean} active panel active
10883  * @cfg {String} html panel content
10884  * @cfg {String} tabId tab relate id
10885  *
10886  *
10887  * @constructor
10888  * Create a new TabPanel
10889  * @param {Object} config The config object
10890  */
10891
10892 Roo.bootstrap.TabPanel = function(config){
10893     Roo.bootstrap.TabPanel.superclass.constructor.call(this, config);
10894 };
10895
10896 Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component,  {
10897
10898     active: false,
10899     html: false,
10900     tabId: false,
10901
10902     getAutoCreate : function(){
10903         var cfg = {
10904             tag: 'div',
10905             cls: 'tab-pane',
10906             html: this.html || ''
10907         };
10908
10909         if(this.active){
10910             cfg.cls += ' active';
10911         }
10912
10913         if(this.tabId){
10914             cfg.tabId = this.tabId;
10915         }
10916
10917         return cfg;
10918     }
10919
10920 });
10921
10922
10923
10924  /*
10925  * - LGPL
10926  *
10927  * DateField
10928  *
10929  */
10930
10931 /**
10932  * @class Roo.bootstrap.DateField
10933  * @extends Roo.bootstrap.Input
10934  * Bootstrap DateField class
10935  * @cfg {Number} weekStart default 0
10936  * @cfg {Number} weekStart default 0
10937  * @cfg {Number} viewMode default empty, (months|years)
10938  * @cfg {Number} minViewMode default empty, (months|years)
10939  * @cfg {Number} startDate default -Infinity
10940  * @cfg {Number} endDate default Infinity
10941  * @cfg {Boolean} todayHighlight default false
10942  * @cfg {Boolean} todayBtn default false
10943  * @cfg {Boolean} calendarWeeks default false
10944  * @cfg {Object} daysOfWeekDisabled default empty
10945  *
10946  * @cfg {Boolean} keyboardNavigation default true
10947  * @cfg {String} language default en
10948  *
10949  * @constructor
10950  * Create a new DateField
10951  * @param {Object} config The config object
10952  */
10953
10954 Roo.bootstrap.DateField = function(config){
10955     Roo.bootstrap.DateField.superclass.constructor.call(this, config);
10956      this.addEvents({
10957             /**
10958              * @event show
10959              * Fires when this field show.
10960              * @param {Roo.bootstrap.DateField} this
10961              * @param {Mixed} date The date value
10962              */
10963             show : true,
10964             /**
10965              * @event show
10966              * Fires when this field hide.
10967              * @param {Roo.bootstrap.DateField} this
10968              * @param {Mixed} date The date value
10969              */
10970             hide : true,
10971             /**
10972              * @event select
10973              * Fires when select a date.
10974              * @param {Roo.bootstrap.DateField} this
10975              * @param {Mixed} date The date value
10976              */
10977             select : true
10978         });
10979 };
10980
10981 Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input,  {
10982
10983     /**
10984      * @cfg {String} format
10985      * The default date format string which can be overriden for localization support.  The format must be
10986      * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
10987      */
10988     format : "m/d/y",
10989     /**
10990      * @cfg {String} altFormats
10991      * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
10992      * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
10993      */
10994     altFormats : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d",
10995
10996     weekStart : 0,
10997
10998     viewMode : '',
10999
11000     minViewMode : '',
11001
11002     todayHighlight : false,
11003
11004     todayBtn: false,
11005
11006     language: 'en',
11007
11008     keyboardNavigation: true,
11009
11010     calendarWeeks: false,
11011
11012     startDate: -Infinity,
11013
11014     endDate: Infinity,
11015
11016     daysOfWeekDisabled: [],
11017
11018     _events: [],
11019
11020     UTCDate: function()
11021     {
11022         return new Date(Date.UTC.apply(Date, arguments));
11023     },
11024
11025     UTCToday: function()
11026     {
11027         var today = new Date();
11028         return this.UTCDate(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate());
11029     },
11030
11031     getDate: function() {
11032             var d = this.getUTCDate();
11033             return new Date(d.getTime() + (d.getTimezoneOffset()*60000));
11034     },
11035
11036     getUTCDate: function() {
11037             return this.date;
11038     },
11039
11040     setDate: function(d) {
11041             this.setUTCDate(new Date(d.getTime() - (d.getTimezoneOffset()*60000)));
11042     },
11043
11044     setUTCDate: function(d) {
11045             this.date = d;
11046             this.setValue(this.formatDate(this.date));
11047     },
11048
11049     onRender: function(ct, position)
11050     {
11051
11052         Roo.bootstrap.DateField.superclass.onRender.call(this, ct, position);
11053
11054         this.language = this.language || 'en';
11055         this.language = this.language in Roo.bootstrap.DateField.dates ? this.language : this.language.split('-')[0];
11056         this.language = this.language in Roo.bootstrap.DateField.dates ? this.language : "en";
11057
11058         this.isRTL = Roo.bootstrap.DateField.dates[this.language].rtl || false;
11059         this.format = this.format || 'm/d/y';
11060         this.isInline = false;
11061         this.isInput = true;
11062         this.component = this.el.select('.add-on', true).first() || false;
11063         this.component = (this.component && this.component.length === 0) ? false : this.component;
11064         this.hasInput = this.component && this.inputEL().length;
11065
11066         if (typeof(this.minViewMode === 'string')) {
11067             switch (this.minViewMode) {
11068                 case 'months':
11069                     this.minViewMode = 1;
11070                     break;
11071                 case 'years':
11072                     this.minViewMode = 2;
11073                     break;
11074                 default:
11075                     this.minViewMode = 0;
11076                     break;
11077             }
11078         }
11079
11080         if (typeof(this.viewMode === 'string')) {
11081             switch (this.viewMode) {
11082                 case 'months':
11083                     this.viewMode = 1;
11084                     break;
11085                 case 'years':
11086                     this.viewMode = 2;
11087                     break;
11088                 default:
11089                     this.viewMode = 0;
11090                     break;
11091             }
11092         }
11093
11094         this.el.select('>.input-group', true).first().createChild(Roo.bootstrap.DateField.template);
11095
11096         this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
11097
11098         this.picker().on('mousedown', this.onMousedown, this);
11099         this.picker().on('click', this.onClick, this);
11100
11101         this.picker().addClass('datepicker-dropdown');
11102
11103         this.startViewMode = this.viewMode;
11104
11105
11106         Roo.each(this.picker().select('tfoot th.today', true).elements, function(v){
11107             if(!this.calendarWeeks){
11108                 v.remove();
11109                 return;
11110             };
11111
11112             v.dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].today
11113             v.attr('colspan', function(i, val){
11114                 return parseInt(val) + 1;
11115             });
11116         })
11117
11118
11119         this.weekEnd = this.weekStart === 0 ? 6 : this.weekStart - 1;
11120
11121         this.setStartDate(this.startDate);
11122         this.setEndDate(this.endDate);
11123
11124         this.setDaysOfWeekDisabled(this.daysOfWeekDisabled);
11125
11126         this.fillDow();
11127         this.fillMonths();
11128         this.update();
11129         this.showMode();
11130
11131         if(this.isInline) {
11132             this.show();
11133         }
11134     },
11135
11136     picker : function()
11137     {
11138         return this.el.select('.datepicker', true).first();
11139     },
11140
11141     fillDow: function()
11142     {
11143         var dowCnt = this.weekStart;
11144
11145         var dow = {
11146             tag: 'tr',
11147             cn: [
11148
11149             ]
11150         };
11151
11152         if(this.calendarWeeks){
11153             dow.cn.push({
11154                 tag: 'th',
11155                 cls: 'cw',
11156                 html: '&nbsp;'
11157             })
11158         }
11159
11160         while (dowCnt < this.weekStart + 7) {
11161             dow.cn.push({
11162                 tag: 'th',
11163                 cls: 'dow',
11164                 html: Roo.bootstrap.DateField.dates[this.language].daysMin[(dowCnt++)%7]
11165             });
11166         }
11167
11168         this.picker().select('>.datepicker-days thead', true).first().createChild(dow);
11169     },
11170
11171     fillMonths: function()
11172     {
11173         var i = 0
11174         var months = this.picker().select('>.datepicker-months td', true).first();
11175
11176         months.dom.innerHTML = '';
11177
11178         while (i < 12) {
11179             var month = {
11180                 tag: 'span',
11181                 cls: 'month',
11182                 html: Roo.bootstrap.DateField.dates[this.language].monthsShort[i++]
11183             }
11184
11185             months.createChild(month);
11186         }
11187
11188     },
11189
11190     update: function(){
11191
11192         this.date = (typeof(this.date) === 'undefined') ? this.UTCToday() : (typeof(this.date) === 'string') ? this.parseDate(this.date) : this.date;
11193
11194         if (this.date < this.startDate) {
11195             this.viewDate = new Date(this.startDate);
11196         } else if (this.date > this.endDate) {
11197             this.viewDate = new Date(this.endDate);
11198         } else {
11199             this.viewDate = new Date(this.date);
11200         }
11201
11202         this.fill();
11203     },
11204
11205     fill: function() {
11206         var d = new Date(this.viewDate),
11207                 year = d.getUTCFullYear(),
11208                 month = d.getUTCMonth(),
11209                 startYear = this.startDate !== -Infinity ? this.startDate.getUTCFullYear() : -Infinity,
11210                 startMonth = this.startDate !== -Infinity ? this.startDate.getUTCMonth() : -Infinity,
11211                 endYear = this.endDate !== Infinity ? this.endDate.getUTCFullYear() : Infinity,
11212                 endMonth = this.endDate !== Infinity ? this.endDate.getUTCMonth() : Infinity,
11213                 currentDate = this.date && this.date.valueOf(),
11214                 today = this.UTCToday();
11215
11216         this.picker().select('>.datepicker-days thead th.switch', true).first().dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].months[month]+' '+year;
11217
11218 //        this.picker().select('>tfoot th.today', true).first().dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].today;
11219
11220 //        this.picker.select('>tfoot th.today').
11221 //                                              .text(dates[this.language].today)
11222 //                                              .toggle(this.todayBtn !== false);
11223
11224         this.updateNavArrows();
11225         this.fillMonths();
11226
11227         var prevMonth = this.UTCDate(year, month-1, 28,0,0,0,0),
11228
11229         day = prevMonth.getDaysInMonth(prevMonth.getUTCFullYear(), prevMonth.getUTCMonth());
11230
11231         prevMonth.setUTCDate(day);
11232
11233         prevMonth.setUTCDate(day - (prevMonth.getUTCDay() - this.weekStart + 7)%7);
11234
11235         var nextMonth = new Date(prevMonth);
11236
11237         nextMonth.setUTCDate(nextMonth.getUTCDate() + 42);
11238
11239         nextMonth = nextMonth.valueOf();
11240
11241         var fillMonths = false;
11242
11243         this.picker().select('>.datepicker-days tbody',true).first().dom.innerHTML = '';
11244
11245         while(prevMonth.valueOf() < nextMonth) {
11246             var clsName = '';
11247
11248             if (prevMonth.getUTCDay() === this.weekStart) {
11249                 if(fillMonths){
11250                     this.picker().select('>.datepicker-days tbody',true).first().createChild(fillMonths);
11251                 }
11252
11253                 fillMonths = {
11254                     tag: 'tr',
11255                     cn: []
11256                 };
11257
11258                 if(this.calendarWeeks){
11259                     // ISO 8601: First week contains first thursday.
11260                     // ISO also states week starts on Monday, but we can be more abstract here.
11261                     var
11262                     // Start of current week: based on weekstart/current date
11263                     ws = new Date(+prevMonth + (this.weekStart - prevMonth.getUTCDay() - 7) % 7 * 864e5),
11264                     // Thursday of this week
11265                     th = new Date(+ws + (7 + 4 - ws.getUTCDay()) % 7 * 864e5),
11266                     // First Thursday of year, year from thursday
11267                     yth = new Date(+(yth = this.UTCDate(th.getUTCFullYear(), 0, 1)) + (7 + 4 - yth.getUTCDay())%7*864e5),
11268                     // Calendar week: ms between thursdays, div ms per day, div 7 days
11269                     calWeek =  (th - yth) / 864e5 / 7 + 1;
11270
11271                     fillMonths.cn.push({
11272                         tag: 'td',
11273                         cls: 'cw',
11274                         html: calWeek
11275                     });
11276                 }
11277             }
11278
11279             if (prevMonth.getUTCFullYear() < year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() < month)) {
11280                 clsName += ' old';
11281             } else if (prevMonth.getUTCFullYear() > year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() > month)) {
11282                 clsName += ' new';
11283             }
11284             if (this.todayHighlight &&
11285                 prevMonth.getUTCFullYear() == today.getFullYear() &&
11286                 prevMonth.getUTCMonth() == today.getMonth() &&
11287                 prevMonth.getUTCDate() == today.getDate()) {
11288                 clsName += ' today';
11289             }
11290
11291             if (currentDate && prevMonth.valueOf() === currentDate) {
11292                 clsName += ' active';
11293             }
11294
11295             if (prevMonth.valueOf() < this.startDate || prevMonth.valueOf() > this.endDate ||
11296                     this.daysOfWeekDisabled.indexOf(prevMonth.getUTCDay()) !== -1) {
11297                     clsName += ' disabled';
11298             }
11299
11300             fillMonths.cn.push({
11301                 tag: 'td',
11302                 cls: 'day ' + clsName,
11303                 html: prevMonth.getDate()
11304             })
11305
11306             prevMonth.setDate(prevMonth.getDate()+1);
11307         }
11308
11309         var currentYear = this.date && this.date.getUTCFullYear();
11310         var currentMonth = this.date && this.date.getUTCMonth();
11311
11312         this.picker().select('>.datepicker-months th.switch',true).first().dom.innerHTML = year;
11313
11314         Roo.each(this.picker().select('>.datepicker-months tbody span',true).elements, function(v,k){
11315             v.removeClass('active');
11316
11317             if(currentYear === year && k === currentMonth){
11318                 v.addClass('active');
11319             }
11320
11321             if (year < startYear || year > endYear || (year == startYear && k < startMonth) || (year == endYear && k > endMonth)) {
11322                 v.addClass('disabled');
11323             }
11324
11325         });
11326
11327
11328         year = parseInt(year/10, 10) * 10;
11329
11330         this.picker().select('>.datepicker-years th.switch', true).first().dom.innerHTML = year + '-' + (year + 9);
11331
11332         this.picker().select('>.datepicker-years tbody td',true).first().dom.innerHTML = '';
11333
11334         year -= 1;
11335         for (var i = -1; i < 11; i++) {
11336             this.picker().select('>.datepicker-years tbody td',true).first().createChild({
11337                 tag: 'span',
11338                 cls: 'year' + (i === -1 || i === 10 ? ' old' : '') + (currentYear === year ? ' active' : '') + (year < startYear || year > endYear ? ' disabled' : ''),
11339                 html: year
11340             })
11341
11342             year += 1;
11343         }
11344     },
11345
11346     showMode: function(dir) {
11347         if (dir) {
11348             this.viewMode = Math.max(this.minViewMode, Math.min(2, this.viewMode + dir));
11349         }
11350         Roo.each(this.picker().select('>div',true).elements, function(v){
11351             v.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
11352             v.hide();
11353         });
11354         this.picker().select('>.datepicker-'+Roo.bootstrap.DateField.modes[this.viewMode].clsName, true).first().show();
11355     },
11356
11357     place: function()
11358     {
11359         if(this.isInline) return;
11360
11361         this.picker().removeClass(['bottom', 'top']);
11362
11363         if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){
11364             /*
11365              * place to the top of element!
11366              *
11367              */
11368
11369             this.picker().addClass('top');
11370             this.picker().setTop(0 - this.picker().getHeight()).setLeft(this.inputEl().getLeft() - this.el.getLeft());
11371
11372             return;
11373         }
11374
11375         this.picker().addClass('bottom');
11376
11377         this.picker().setTop(this.inputEl().getHeight()).setLeft(this.inputEl().getLeft() - this.el.getLeft());
11378     },
11379
11380     parseDate : function(value){
11381         if(!value || value instanceof Date){
11382             return value;
11383         }
11384         var v = Date.parseDate(value, this.format);
11385         if (!v && this.useIso) {
11386             v = Date.parseDate(value, 'Y-m-d');
11387         }
11388         if(!v && this.altFormats){
11389             if(!this.altFormatsArray){
11390                 this.altFormatsArray = this.altFormats.split("|");
11391             }
11392             for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
11393                 v = Date.parseDate(value, this.altFormatsArray[i]);
11394             }
11395         }
11396         return v;
11397     },
11398
11399     formatDate : function(date, fmt){
11400         return (!date || !(date instanceof Date)) ?
11401         date : date.dateFormat(fmt || this.format);
11402     },
11403
11404     onFocus : function()
11405     {
11406         Roo.bootstrap.DateField.superclass.onFocus.call(this);
11407         this.show();
11408     },
11409
11410     onBlur : function()
11411     {
11412         Roo.bootstrap.DateField.superclass.onBlur.call(this);
11413         this.hide();
11414     },
11415
11416     show : function()
11417     {
11418         this.picker().show();
11419         this.update();
11420         this.place();
11421
11422         this.fireEvent('show', this, this.date);
11423     },
11424
11425     hide : function()
11426     {
11427         if(this.isInline) return;
11428         this.picker().hide();
11429         this.viewMode = this.startViewMode;
11430         this.showMode();
11431
11432         this.fireEvent('hide', this, this.date);
11433
11434     },
11435
11436     onMousedown: function(e){
11437         e.stopPropagation();
11438         e.preventDefault();
11439     },
11440
11441     keyup: function(e){
11442         Roo.bootstrap.DateField.superclass.keyup.call(this);
11443         this.update();
11444
11445     },
11446
11447     setValue: function(v){
11448         Roo.bootstrap.DateField.superclass.setValue.call(this, v);
11449
11450         this.fireEvent('select', this, this.date);
11451
11452     },
11453
11454     fireKey: function(e){
11455         if (!this.picker().isVisible()){
11456             if (e.keyCode == 27) // allow escape to hide and re-show picker
11457                 this.show();
11458             return;
11459         }
11460         var dateChanged = false,
11461         dir, day, month,
11462         newDate, newViewDate;
11463         switch(e.keyCode){
11464             case 27: // escape
11465                 this.hide();
11466                 e.preventDefault();
11467                 break;
11468             case 37: // left
11469             case 39: // right
11470                 if (!this.keyboardNavigation) break;
11471                 dir = e.keyCode == 37 ? -1 : 1;
11472
11473                 if (e.ctrlKey){
11474                     newDate = this.moveYear(this.date, dir);
11475                     newViewDate = this.moveYear(this.viewDate, dir);
11476                 } else if (e.shiftKey){
11477                     newDate = this.moveMonth(this.date, dir);
11478                     newViewDate = this.moveMonth(this.viewDate, dir);
11479                 } else {
11480                     newDate = new Date(this.date);
11481                     newDate.setUTCDate(this.date.getUTCDate() + dir);
11482                     newViewDate = new Date(this.viewDate);
11483                     newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir);
11484                 }
11485                 if (this.dateWithinRange(newDate)){
11486                     this.date = newDate;
11487                     this.viewDate = newViewDate;
11488                     this.setValue(this.formatDate(this.date));
11489                     this.update();
11490                     e.preventDefault();
11491                     dateChanged = true;
11492                 }
11493                 break;
11494             case 38: // up
11495             case 40: // down
11496                 if (!this.keyboardNavigation) break;
11497                 dir = e.keyCode == 38 ? -1 : 1;
11498                 if (e.ctrlKey){
11499                     newDate = this.moveYear(this.date, dir);
11500                     newViewDate = this.moveYear(this.viewDate, dir);
11501                 } else if (e.shiftKey){
11502                     newDate = this.moveMonth(this.date, dir);
11503                     newViewDate = this.moveMonth(this.viewDate, dir);
11504                 } else {
11505                     newDate = new Date(this.date);
11506                     newDate.setUTCDate(this.date.getUTCDate() + dir * 7);
11507                     newViewDate = new Date(this.viewDate);
11508                     newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir * 7);
11509                 }
11510                 if (this.dateWithinRange(newDate)){
11511                     this.date = newDate;
11512                     this.viewDate = newViewDate;
11513                     this.setValue(this.formatDate(this.date));
11514                     this.update();
11515                     e.preventDefault();
11516                     dateChanged = true;
11517                 }
11518                 break;
11519             case 13: // enter
11520                 this.setValue(this.formatDate(this.date));
11521                 this.hide();
11522                 e.preventDefault();
11523                 break;
11524             case 9: // tab
11525                 this.setValue(this.formatDate(this.date));
11526                 this.hide();
11527                 break;
11528         }
11529     },
11530
11531
11532     onClick: function(e) {
11533         e.stopPropagation();
11534         e.preventDefault();
11535
11536         var target = e.getTarget();
11537
11538         if(target.nodeName.toLowerCase() === 'i'){
11539             target = Roo.get(target).dom.parentNode;
11540         }
11541
11542         var nodeName = target.nodeName;
11543         var className = target.className;
11544         var html = target.innerHTML;
11545
11546         switch(nodeName.toLowerCase()) {
11547             case 'th':
11548                 switch(className) {
11549                     case 'switch':
11550                         this.showMode(1);
11551                         break;
11552                     case 'prev':
11553                     case 'next':
11554                         var dir = Roo.bootstrap.DateField.modes[this.viewMode].navStep * (className == 'prev' ? -1 : 1);
11555                         switch(this.viewMode){
11556                                 case 0:
11557                                         this.viewDate = this.moveMonth(this.viewDate, dir);
11558                                         break;
11559                                 case 1:
11560                                 case 2:
11561                                         this.viewDate = this.moveYear(this.viewDate, dir);
11562                                         break;
11563                         }
11564                         this.fill();
11565                         break;
11566                     case 'today':
11567                         var date = new Date();
11568                         this.date = this.UTCDate(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
11569                         this.fill()
11570                         this.setValue(this.formatDate(this.date));
11571                         this.hide();
11572                         break;
11573                 }
11574                 break;
11575             case 'span':
11576                 if (className.indexOf('disabled') === -1) {
11577                     this.viewDate.setUTCDate(1);
11578                     if (className.indexOf('month') !== -1) {
11579                         this.viewDate.setUTCMonth(Roo.bootstrap.DateField.dates[this.language].monthsShort.indexOf(html));
11580                     } else {
11581                         var year = parseInt(html, 10) || 0;
11582                         this.viewDate.setUTCFullYear(year);
11583
11584                     }
11585                     this.showMode(-1);
11586                     this.fill();
11587                 }
11588                 break;
11589
11590             case 'td':
11591                 if (className.indexOf('day') !== -1 && className.indexOf('disabled') === -1){
11592                     var day = parseInt(html, 10) || 1;
11593                     var year = this.viewDate.getUTCFullYear(),
11594                         month = this.viewDate.getUTCMonth();
11595
11596                     if (className.indexOf('old') !== -1) {
11597                         if(month === 0 ){
11598                             month = 11;
11599                             year -= 1;
11600                         }else{
11601                             month -= 1;
11602                         }
11603                     } else if (className.indexOf('new') !== -1) {
11604                         if (month == 11) {
11605                             month = 0;
11606                             year += 1;
11607                         } else {
11608                             month += 1;
11609                         }
11610                     }
11611                     this.date = this.UTCDate(year, month, day,0,0,0,0);
11612                     this.viewDate = this.UTCDate(year, month, Math.min(28, day),0,0,0,0);
11613                     this.fill();
11614                     this.setValue(this.formatDate(this.date));
11615                     this.hide();
11616                 }
11617                 break;
11618         }
11619     },
11620
11621     setStartDate: function(startDate){
11622         this.startDate = startDate || -Infinity;
11623         if (this.startDate !== -Infinity) {
11624             this.startDate = this.parseDate(this.startDate);
11625         }
11626         this.update();
11627         this.updateNavArrows();
11628     },
11629
11630     setEndDate: function(endDate){
11631         this.endDate = endDate || Infinity;
11632         if (this.endDate !== Infinity) {
11633             this.endDate = this.parseDate(this.endDate);
11634         }
11635         this.update();
11636         this.updateNavArrows();
11637     },
11638
11639     setDaysOfWeekDisabled: function(daysOfWeekDisabled){
11640         this.daysOfWeekDisabled = daysOfWeekDisabled || [];
11641         if (typeof(this.daysOfWeekDisabled) !== 'object') {
11642             this.daysOfWeekDisabled = this.daysOfWeekDisabled.split(/,\s*/);
11643         }
11644         this.daysOfWeekDisabled = this.daysOfWeekDisabled.map(function (d) {
11645             return parseInt(d, 10);
11646         });
11647         this.update();
11648         this.updateNavArrows();
11649     },
11650
11651     updateNavArrows: function() {
11652         var d = new Date(this.viewDate),
11653         year = d.getUTCFullYear(),
11654         month = d.getUTCMonth();
11655
11656         Roo.each(this.picker().select('.prev', true).elements, function(v){
11657             v.show();
11658             switch (this.viewMode) {
11659                 case 0:
11660
11661                     if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear() && month <= this.startDate.getUTCMonth()) {
11662                         v.hide();
11663                     }
11664                     break;
11665                 case 1:
11666                 case 2:
11667                     if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear()) {
11668                         v.hide();
11669                     }
11670                     break;
11671             }
11672         });
11673
11674         Roo.each(this.picker().select('.next', true).elements, function(v){
11675             v.show();
11676             switch (this.viewMode) {
11677                 case 0:
11678
11679                     if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear() && month >= this.endDate.getUTCMonth()) {
11680                         v.hide();
11681                     }
11682                     break;
11683                 case 1:
11684                 case 2:
11685                     if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear()) {
11686                         v.hide();
11687                     }
11688                     break;
11689             }
11690         })
11691     },
11692
11693     moveMonth: function(date, dir){
11694         if (!dir) return date;
11695         var new_date = new Date(date.valueOf()),
11696         day = new_date.getUTCDate(),
11697         month = new_date.getUTCMonth(),
11698         mag = Math.abs(dir),
11699         new_month, test;
11700         dir = dir > 0 ? 1 : -1;
11701         if (mag == 1){
11702             test = dir == -1
11703             // If going back one month, make sure month is not current month
11704             // (eg, Mar 31 -> Feb 31 == Feb 28, not Mar 02)
11705             ? function(){
11706                 return new_date.getUTCMonth() == month;
11707             }
11708             // If going forward one month, make sure month is as expected
11709             // (eg, Jan 31 -> Feb 31 == Feb 28, not Mar 02)
11710             : function(){
11711                 return new_date.getUTCMonth() != new_month;
11712             };
11713             new_month = month + dir;
11714             new_date.setUTCMonth(new_month);
11715             // Dec -> Jan (12) or Jan -> Dec (-1) -- limit expected date to 0-11
11716             if (new_month < 0 || new_month > 11)
11717                 new_month = (new_month + 12) % 12;
11718         } else {
11719             // For magnitudes >1, move one month at a time...
11720             for (var i=0; i<mag; i++)
11721                 // ...which might decrease the day (eg, Jan 31 to Feb 28, etc)...
11722                 new_date = this.moveMonth(new_date, dir);
11723             // ...then reset the day, keeping it in the new month
11724             new_month = new_date.getUTCMonth();
11725             new_date.setUTCDate(day);
11726             test = function(){
11727                 return new_month != new_date.getUTCMonth();
11728             };
11729         }
11730         // Common date-resetting loop -- if date is beyond end of month, make it
11731         // end of month
11732         while (test()){
11733             new_date.setUTCDate(--day);
11734             new_date.setUTCMonth(new_month);
11735         }
11736         return new_date;
11737     },
11738
11739     moveYear: function(date, dir){
11740         return this.moveMonth(date, dir*12);
11741     },
11742
11743     dateWithinRange: function(date){
11744         return date >= this.startDate && date <= this.endDate;
11745     },
11746
11747
11748     remove: function() {
11749         this.picker().remove();
11750     }
11751
11752 });
11753
11754 Roo.apply(Roo.bootstrap.DateField,  {
11755
11756     head : {
11757         tag: 'thead',
11758         cn: [
11759         {
11760             tag: 'tr',
11761             cn: [
11762             {
11763                 tag: 'th',
11764                 cls: 'prev',
11765                 html: '<i class="icon-arrow-left"/>'
11766             },
11767             {
11768                 tag: 'th',
11769                 cls: 'switch',
11770                 colspan: '5'
11771             },
11772             {
11773                 tag: 'th',
11774                 cls: 'next',
11775                 html: '<i class="icon-arrow-right"/>'
11776             }
11777
11778             ]
11779         }
11780         ]
11781     },
11782
11783     content : {
11784         tag: 'tbody',
11785         cn: [
11786         {
11787             tag: 'tr',
11788             cn: [
11789             {
11790                 tag: 'td',
11791                 colspan: '7'
11792             }
11793             ]
11794         }
11795         ]
11796     },
11797
11798     footer : {
11799         tag: 'tfoot',
11800         cn: [
11801         {
11802             tag: 'tr',
11803             cn: [
11804             {
11805                 tag: 'th',
11806                 colspan: '7',
11807                 cls: 'today'
11808             }
11809
11810             ]
11811         }
11812         ]
11813     },
11814
11815     dates:{
11816         en: {
11817             days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
11818             daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
11819             daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
11820             months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
11821             monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
11822             today: "Today"
11823         }
11824     },
11825
11826     modes: [
11827     {
11828         clsName: 'days',
11829         navFnc: 'Month',
11830         navStep: 1
11831     },
11832     {
11833         clsName: 'months',
11834         navFnc: 'FullYear',
11835         navStep: 1
11836     },
11837     {
11838         clsName: 'years',
11839         navFnc: 'FullYear',
11840         navStep: 10
11841     }]
11842 });
11843
11844 Roo.apply(Roo.bootstrap.DateField,  {
11845
11846     template : {
11847         tag: 'div',
11848         cls: 'datepicker dropdown-menu',
11849         cn: [
11850         {
11851             tag: 'div',
11852             cls: 'datepicker-days',
11853             cn: [
11854             {
11855                 tag: 'table',
11856                 cls: 'table-condensed',
11857                 cn:[
11858                 Roo.bootstrap.DateField.head,
11859                 {
11860                     tag: 'tbody'
11861                 },
11862                 Roo.bootstrap.DateField.footer
11863                 ]
11864             }
11865             ]
11866         },
11867         {
11868             tag: 'div',
11869             cls: 'datepicker-months',
11870             cn: [
11871             {
11872                 tag: 'table',
11873                 cls: 'table-condensed',
11874                 cn:[
11875                 Roo.bootstrap.DateField.head,
11876                 Roo.bootstrap.DateField.content,
11877                 Roo.bootstrap.DateField.footer
11878                 ]
11879             }
11880             ]
11881         },
11882         {
11883             tag: 'div',
11884             cls: 'datepicker-years',
11885             cn: [
11886             {
11887                 tag: 'table',
11888                 cls: 'table-condensed',
11889                 cn:[
11890                 Roo.bootstrap.DateField.head,
11891                 Roo.bootstrap.DateField.content,
11892                 Roo.bootstrap.DateField.footer
11893                 ]
11894             }
11895             ]
11896         }
11897         ]
11898     }
11899 });
11900
11901
11902
11903  /*
11904  * - LGPL
11905  *
11906  * TimeField
11907  *
11908  */
11909
11910 /**
11911  * @class Roo.bootstrap.TimeField
11912  * @extends Roo.bootstrap.Input
11913  * Bootstrap DateField class
11914  *
11915  *
11916  * @constructor
11917  * Create a new TimeField
11918  * @param {Object} config The config object
11919  */
11920
11921 Roo.bootstrap.TimeField = function(config){
11922     Roo.bootstrap.TimeField.superclass.constructor.call(this, config);
11923     this.addEvents({
11924             /**
11925              * @event show
11926              * Fires when this field show.
11927              * @param {Roo.bootstrap.DateField} this
11928              * @param {Mixed} date The date value
11929              */
11930             show : true,
11931             /**
11932              * @event show
11933              * Fires when this field hide.
11934              * @param {Roo.bootstrap.DateField} this
11935              * @param {Mixed} date The date value
11936              */
11937             hide : true,
11938             /**
11939              * @event select
11940              * Fires when select a date.
11941              * @param {Roo.bootstrap.DateField} this
11942              * @param {Mixed} date The date value
11943              */
11944             select : true
11945         });
11946 };
11947
11948 Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input,  {
11949
11950     /**
11951      * @cfg {String} format
11952      * The default time format string which can be overriden for localization support.  The format must be
11953      * valid according to {@link Date#parseDate} (defaults to 'H:i').
11954      */
11955     format : "H:i",
11956
11957     onRender: function(ct, position)
11958     {
11959
11960         Roo.bootstrap.TimeField.superclass.onRender.call(this, ct, position);
11961
11962         this.el.select('>.input-group', true).first().createChild(Roo.bootstrap.TimeField.template);
11963
11964         this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
11965
11966         this.pop = this.picker().select('>.datepicker-time',true).first();
11967         this.pop.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block'
11968
11969         this.picker().on('mousedown', this.onMousedown, this);
11970         this.picker().on('click', this.onClick, this);
11971
11972         this.picker().addClass('datepicker-dropdown');
11973
11974         this.fillTime();
11975         this.update();
11976
11977         this.pop.select('span.hours-up', true).first().on('click', this.onIncrementHours, this);
11978         this.pop.select('span.hours-down', true).first().on('click', this.onDecrementHours, this);
11979         this.pop.select('span.minutes-up', true).first().on('click', this.onIncrementMinutes, this);
11980         this.pop.select('span.minutes-down', true).first().on('click', this.onDecrementMinutes, this);
11981         this.pop.select('button.period', true).first().on('click', this.onTogglePeriod, this);
11982         this.pop.select('button.ok', true).first().on('click', this.setTime, this);
11983
11984     },
11985
11986     fireKey: function(e){
11987         if (!this.picker().isVisible()){
11988             if (e.keyCode == 27) // allow escape to hide and re-show picker
11989                 this.show();
11990             return;
11991         }
11992
11993         e.preventDefault();
11994
11995         switch(e.keyCode){
11996             case 27: // escape
11997                 this.hide();
11998                 break;
11999             case 37: // left
12000             case 39: // right
12001                 this.onTogglePeriod();
12002                 break;
12003             case 38: // up
12004                 this.onIncrementMinutes();
12005                 break;
12006             case 40: // down
12007                 this.onDecrementMinutes();
12008                 break;
12009             case 13: // enter
12010             case 9: // tab
12011                 this.setTime();
12012                 break;
12013         }
12014     },
12015
12016     onClick: function(e) {
12017         e.stopPropagation();
12018         e.preventDefault();
12019     },
12020
12021     picker : function()
12022     {
12023         return this.el.select('.datepicker', true).first();
12024     },
12025
12026     fillTime: function()
12027     {
12028         var time = this.pop.select('tbody', true).first();
12029
12030         time.dom.innerHTML = '';
12031
12032         time.createChild({
12033             tag: 'tr',
12034             cn: [
12035                 {
12036                     tag: 'td',
12037                     cn: [
12038                         {
12039                             tag: 'a',
12040                             href: '#',
12041                             cls: 'btn',
12042                             cn: [
12043                                 {
12044                                     tag: 'span',
12045                                     cls: 'hours-up glyphicon glyphicon-chevron-up'
12046                                 }
12047                             ]
12048                         }
12049                     ]
12050                 },
12051                 {
12052                     tag: 'td',
12053                     cls: 'separator'
12054                 },
12055                 {
12056                     tag: 'td',
12057                     cn: [
12058                         {
12059                             tag: 'a',
12060                             href: '#',
12061                             cls: 'btn',
12062                             cn: [
12063                                 {
12064                                     tag: 'span',
12065                                     cls: 'minutes-up glyphicon glyphicon-chevron-up'
12066                                 }
12067                             ]
12068                         }
12069                     ]
12070                 },
12071                 {
12072                     tag: 'td',
12073                     cls: 'separator'
12074                 }
12075             ]
12076         });
12077
12078         time.createChild({
12079             tag: 'tr',
12080             cn: [
12081                 {
12082                     tag: 'td',
12083                     cn: [
12084                         {
12085                             tag: 'span',
12086                             cls: 'timepicker-hour',
12087                             html: '00'
12088                         }
12089                     ]
12090                 },
12091                 {
12092                     tag: 'td',
12093                     cls: 'separator',
12094                     html: ':'
12095                 },
12096                 {
12097                     tag: 'td',
12098                     cn: [
12099                         {
12100                             tag: 'span',
12101                             cls: 'timepicker-minute',
12102                             html: '00'
12103                         }
12104                     ]
12105                 },
12106                 {
12107                     tag: 'td',
12108                     cls: 'separator'
12109                 },
12110                 {
12111                     tag: 'td',
12112                     cn: [
12113                         {
12114                             tag: 'button',
12115                             type: 'button',
12116                             cls: 'btn btn-primary period',
12117                             html: 'AM'
12118
12119                         }
12120                     ]
12121                 }
12122             ]
12123         });
12124
12125         time.createChild({
12126             tag: 'tr',
12127             cn: [
12128                 {
12129                     tag: 'td',
12130                     cn: [
12131                         {
12132                             tag: 'a',
12133                             href: '#',
12134                             cls: 'btn',
12135                             cn: [
12136                                 {
12137                                     tag: 'span',
12138                                     cls: 'hours-down glyphicon glyphicon-chevron-down'
12139                                 }
12140                             ]
12141                         }
12142                     ]
12143                 },
12144                 {
12145                     tag: 'td',
12146                     cls: 'separator'
12147                 },
12148                 {
12149                     tag: 'td',
12150                     cn: [
12151                         {
12152                             tag: 'a',
12153                             href: '#',
12154                             cls: 'btn',
12155                             cn: [
12156                                 {
12157                                     tag: 'span',
12158                                     cls: 'minutes-down glyphicon glyphicon-chevron-down'
12159                                 }
12160                             ]
12161                         }
12162                     ]
12163                 },
12164                 {
12165                     tag: 'td',
12166                     cls: 'separator'
12167                 }
12168             ]
12169         });
12170
12171     },
12172
12173     update: function()
12174     {
12175
12176         this.time = (typeof(this.time) === 'undefined') ? new Date() : this.time;
12177
12178         this.fill();
12179     },
12180
12181     fill: function()
12182     {
12183         var hours = this.time.getHours();
12184         var minutes = this.time.getMinutes();
12185         var period = 'AM';
12186
12187         if(hours > 11){
12188             period = 'PM';
12189         }
12190
12191         if(hours == 0){
12192             hours = 12;
12193         }
12194
12195
12196         if(hours > 12){
12197             hours = hours - 12;
12198         }
12199
12200         if(hours < 10){
12201             hours = '0' + hours;
12202         }
12203
12204         if(minutes < 10){
12205             minutes = '0' + minutes;
12206         }
12207
12208         this.pop.select('.timepicker-hour', true).first().dom.innerHTML = hours;
12209         this.pop.select('.timepicker-minute', true).first().dom.innerHTML = minutes;
12210         this.pop.select('button', true).first().dom.innerHTML = period;
12211
12212     },
12213
12214     place: function()
12215     {
12216         this.picker().removeClass(['bottom', 'top']);
12217
12218         if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){
12219             /*
12220              * place to the top of element!
12221              *
12222              */
12223
12224             this.picker().addClass('top');
12225             this.picker().setTop(0 - this.picker().getHeight()).setLeft(this.inputEl().getLeft() - this.el.getLeft());
12226
12227             return;
12228         }
12229
12230         this.picker().addClass('bottom');
12231
12232         this.picker().setTop(this.inputEl().getHeight()).setLeft(this.inputEl().getLeft() - this.el.getLeft());
12233     },
12234
12235     onFocus : function()
12236     {
12237         Roo.bootstrap.TimeField.superclass.onFocus.call(this);
12238         this.show();
12239     },
12240
12241     onBlur : function()
12242     {
12243         Roo.bootstrap.TimeField.superclass.onBlur.call(this);
12244         this.hide();
12245     },
12246
12247     show : function()
12248     {
12249         this.picker().show();
12250         this.pop.show();
12251         this.update();
12252         this.place();
12253
12254         this.fireEvent('show', this, this.date);
12255     },
12256
12257     hide : function()
12258     {
12259         this.picker().hide();
12260         this.pop.hide();
12261
12262         this.fireEvent('hide', this, this.date);
12263     },
12264
12265     setTime : function()
12266     {
12267         this.hide();
12268         this.setValue(this.time.format(this.format));
12269
12270         this.fireEvent('select', this, this.date);
12271
12272
12273     },
12274
12275     onMousedown: function(e){
12276         e.stopPropagation();
12277         e.preventDefault();
12278     },
12279
12280     onIncrementHours: function()
12281     {
12282         Roo.log('onIncrementHours');
12283         this.time = this.time.add(Date.HOUR, 1);
12284         this.update();
12285
12286     },
12287
12288     onDecrementHours: function()
12289     {
12290         Roo.log('onDecrementHours');
12291         this.time = this.time.add(Date.HOUR, -1);
12292         this.update();
12293     },
12294
12295     onIncrementMinutes: function()
12296     {
12297         Roo.log('onIncrementMinutes');
12298         this.time = this.time.add(Date.MINUTE, 1);
12299         this.update();
12300     },
12301
12302     onDecrementMinutes: function()
12303     {
12304         Roo.log('onDecrementMinutes');
12305         this.time = this.time.add(Date.MINUTE, -1);
12306         this.update();
12307     },
12308
12309     onTogglePeriod: function()
12310     {
12311         Roo.log('onTogglePeriod');
12312         this.time = this.time.add(Date.HOUR, 12);
12313         this.update();
12314     }
12315
12316
12317 });
12318
12319 Roo.apply(Roo.bootstrap.TimeField,  {
12320
12321     content : {
12322         tag: 'tbody',
12323         cn: [
12324             {
12325                 tag: 'tr',
12326                 cn: [
12327                 {
12328                     tag: 'td',
12329                     colspan: '7'
12330                 }
12331                 ]
12332             }
12333         ]
12334     },
12335
12336     footer : {
12337         tag: 'tfoot',
12338         cn: [
12339             {
12340                 tag: 'tr',
12341                 cn: [
12342                 {
12343                     tag: 'th',
12344                     colspan: '7',
12345                     cls: '',
12346                     cn: [
12347                         {
12348                             tag: 'button',
12349                             cls: 'btn btn-info ok',
12350                             html: 'OK'
12351                         }
12352                     ]
12353                 }
12354
12355                 ]
12356             }
12357         ]
12358     }
12359 });
12360
12361 Roo.apply(Roo.bootstrap.TimeField,  {
12362
12363     template : {
12364         tag: 'div',
12365         cls: 'datepicker dropdown-menu',
12366         cn: [
12367             {
12368                 tag: 'div',
12369                 cls: 'datepicker-time',
12370                 cn: [
12371                 {
12372                     tag: 'table',
12373                     cls: 'table-condensed',
12374                     cn:[
12375                     Roo.bootstrap.TimeField.content,
12376                     Roo.bootstrap.TimeField.footer
12377                     ]
12378                 }
12379                 ]
12380             }
12381         ]
12382     }
12383 });
12384
12385
12386
12387  /*
12388  * - LGPL
12389  *
12390  * CheckBox
12391  *
12392  */
12393
12394 /**
12395  * @class Roo.bootstrap.CheckBox
12396  * @extends Roo.bootstrap.Input
12397  * Bootstrap CheckBox class
12398  *
12399  * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
12400  * @cfg {String} inputValue The value that should go into the generated input element's value when checked.
12401  * @cfg {String} boxLabel The text that appears beside the checkbox
12402  * @cfg {Boolean} checked initnal the element
12403  *
12404  * @constructor
12405  * Create a new CheckBox
12406  * @param {Object} config The config object
12407  */
12408
12409 Roo.bootstrap.CheckBox = function(config){
12410     Roo.bootstrap.CheckBox.superclass.constructor.call(this, config);
12411
12412         this.addEvents({
12413             /**
12414             * @event check
12415             * Fires when the element is checked or unchecked.
12416             * @param {Roo.bootstrap.CheckBox} this This input
12417             * @param {Boolean} checked The new checked value
12418             */
12419            check : true
12420         });
12421 };
12422
12423 Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
12424
12425     inputType: 'checkbox',
12426     inputValue: 1,
12427     valueOff: 0,
12428     boxLabel: false,
12429     checked: false,
12430
12431     getAutoCreate : function()
12432     {
12433         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
12434
12435         var id = Roo.id();
12436
12437         var cfg = {};
12438
12439         cfg.cls = 'form-group' //input-group
12440
12441         var input =  {
12442             tag: 'input',
12443             id : id,
12444             type : this.inputType,
12445             value : (!this.checked) ? this.valueOff : this.inputValue,
12446             cls : 'form-box',
12447             placeholder : this.placeholder || ''
12448
12449         };
12450
12451         if (this.disabled) {
12452             input.disabled=true;
12453         }
12454
12455         if(this.checked){
12456             input.checked = this.checked;
12457         }
12458
12459         if (this.name) {
12460             input.name = this.name;
12461         }
12462
12463         if (this.size) {
12464             input.cls += ' input-' + this.size;
12465         }
12466
12467         var settings=this;
12468         ['xs','sm','md','lg'].map(function(size){
12469             if (settings[size]) {
12470                 cfg.cls += ' col-' + size + '-' + settings[size];
12471             }
12472         });
12473
12474         var inputblock = input;
12475
12476         if (this.before || this.after) {
12477
12478             inputblock = {
12479                 cls : 'input-group',
12480                 cn :  []
12481             };
12482             if (this.before) {
12483                 inputblock.cn.push({
12484                     tag :'span',
12485                     cls : 'input-group-addon',
12486                     html : this.before
12487                 });
12488             }
12489             inputblock.cn.push(input);
12490             if (this.after) {
12491                 inputblock.cn.push({
12492                     tag :'span',
12493                     cls : 'input-group-addon',
12494                     html : this.after
12495                 });
12496             }
12497
12498         };
12499
12500         if (align ==='left' && this.fieldLabel.length) {
12501                 Roo.log("left and has label");
12502                 cfg.cn = [
12503
12504                     {
12505                         tag: 'label',
12506                         'for' :  id,
12507                         cls : 'control-label col-md-' + this.labelWidth,
12508                         html : this.fieldLabel
12509
12510                     },
12511                     {
12512                         cls : "col-md-" + (12 - this.labelWidth),
12513                         cn: [
12514                             inputblock
12515                         ]
12516                     }
12517
12518                 ];
12519         } else if ( this.fieldLabel.length) {
12520                 Roo.log(" label");
12521                 cfg.cn = [
12522
12523                     {
12524                         tag: this.boxLabel ? 'span' : 'label',
12525                         'for': id,
12526                         cls: 'control-label box-input-label',
12527                         //cls : 'input-group-addon',
12528                         html : this.fieldLabel
12529
12530                     },
12531
12532                     inputblock
12533
12534                 ];
12535
12536         } else {
12537
12538                    Roo.log(" no label && no align");
12539                 cfg.cn = [
12540
12541                         inputblock
12542
12543                 ];
12544
12545
12546         };
12547
12548         if(this.boxLabel){
12549             cfg.cn.push({
12550                 tag: 'label',
12551                 'for': id,
12552                 cls: 'box-label',
12553                 html: this.boxLabel
12554             })
12555         }
12556
12557         return cfg;
12558
12559     },
12560
12561     /**
12562      * return the real input element.
12563      */
12564     inputEl: function ()
12565     {
12566         return this.el.select('input.form-box',true).first();
12567     },
12568
12569     initEvents : function()
12570     {
12571 //        Roo.bootstrap.CheckBox.superclass.initEvents.call(this);
12572
12573         this.inputEl().on('click', this.onClick,  this);
12574
12575     },
12576
12577     onClick : function()
12578     {
12579         this.setChecked(!this.checked);
12580     },
12581
12582     setChecked : function(state,suppressEvent)
12583     {
12584         this.checked = state;
12585
12586         this.inputEl().dom.checked = state;
12587
12588         if(suppressEvent !== true){
12589             this.fireEvent('check', this, state);
12590         }
12591
12592         this.inputEl().dom.value = state ? this.inputValue : this.valueOff;
12593
12594     },
12595
12596     setValue : function(v,suppressEvent)
12597     {
12598         this.setChecked(((typeof(v) == 'undefined') ? this.checked : (String(v) === String(this.inputValue))), suppressEvent);
12599     }
12600
12601 });
12602
12603
12604 /*
12605  * - LGPL
12606  *
12607  * Radio
12608  *
12609  */
12610
12611 /**
12612  * @class Roo.bootstrap.Radio
12613  * @extends Roo.bootstrap.CheckBox
12614  * Bootstrap Radio class
12615
12616  * @constructor
12617  * Create a new Radio
12618  * @param {Object} config The config object
12619  */
12620
12621 Roo.bootstrap.Radio = function(config){
12622     Roo.bootstrap.Radio.superclass.constructor.call(this, config);
12623
12624 };
12625
12626 Roo.extend(Roo.bootstrap.Radio, Roo.bootstrap.CheckBox,  {
12627
12628     inputType: 'radio',
12629     inputValue: '',
12630     valueOff: '',
12631
12632     getAutoCreate : function()
12633     {
12634         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
12635
12636         var id = Roo.id();
12637
12638         var cfg = {};
12639
12640         cfg.cls = 'form-group' //input-group
12641
12642         var input =  {
12643             tag: 'input',
12644             id : id,
12645             type : this.inputType,
12646             value : (!this.checked) ? this.valueOff : this.inputValue,
12647             cls : 'form-box',
12648             placeholder : this.placeholder || ''
12649
12650         };
12651
12652         if (this.disabled) {
12653             input.disabled=true;
12654         }
12655
12656         if(this.checked){
12657             input.checked = this.checked;
12658         }
12659
12660         if (this.name) {
12661             input.name = this.name;
12662         }
12663
12664         if (this.size) {
12665             input.cls += ' input-' + this.size;
12666         }
12667
12668         var settings=this;
12669         ['xs','sm','md','lg'].map(function(size){
12670             if (settings[size]) {
12671                 cfg.cls += ' col-' + size + '-' + settings[size];
12672             }
12673         });
12674
12675         var inputblock = input;
12676
12677         if (this.before || this.after) {
12678
12679             inputblock = {
12680                 cls : 'input-group',
12681                 cn :  []
12682             };
12683             if (this.before) {
12684                 inputblock.cn.push({
12685                     tag :'span',
12686                     cls : 'input-group-addon',
12687                     html : this.before
12688                 });
12689             }
12690             inputblock.cn.push(input);
12691             if (this.after) {
12692                 inputblock.cn.push({
12693                     tag :'span',
12694                     cls : 'input-group-addon',
12695                     html : this.after
12696                 });
12697             }
12698
12699         };
12700
12701         if (align ==='left' && this.fieldLabel.length) {
12702                 Roo.log("left and has label");
12703                 cfg.cn = [
12704
12705                     {
12706                         tag: 'label',
12707                         'for' :  id,
12708                         cls : 'control-label col-md-' + this.labelWidth,
12709                         html : this.fieldLabel
12710
12711                     },
12712                     {
12713                         cls : "col-md-" + (12 - this.labelWidth),
12714                         cn: [
12715                             inputblock
12716                         ]
12717                     }
12718
12719                 ];
12720         } else if ( this.fieldLabel.length) {
12721                 Roo.log(" label");
12722                  cfg.cn = [
12723
12724                     {
12725                         tag: 'label',
12726                         'for': id,
12727                         cls: 'control-label box-input-label',
12728                         //cls : 'input-group-addon',
12729                         html : this.fieldLabel
12730
12731                     },
12732
12733                     inputblock
12734
12735                 ];
12736
12737         } else {
12738
12739                    Roo.log(" no label && no align");
12740                 cfg.cn = [
12741
12742                         inputblock
12743
12744                 ];
12745
12746
12747         };
12748
12749         if(this.boxLabel){
12750             cfg.cn.push({
12751                 tag: 'label',
12752                 'for': id,
12753                 cls: 'box-label',
12754                 html: this.boxLabel
12755             })
12756         }
12757
12758         return cfg;
12759
12760     },
12761
12762     onClick : function()
12763     {
12764         this.setChecked(true);
12765     },
12766
12767     setChecked : function(state,suppressEvent)
12768     {
12769         if(state){
12770             Roo.each(this.inputEl().up('form').select('input[name='+this.inputEl().dom.name+']', true).elements, function(v){
12771                 v.dom.checked = false;
12772             });
12773         }
12774
12775         this.checked = state;
12776         this.inputEl().dom.checked = state;
12777
12778         if(suppressEvent !== true){
12779             this.fireEvent('check', this, state);
12780         }
12781
12782         this.inputEl().dom.value = state ? this.inputValue : this.valueOff;
12783
12784     },
12785
12786     getGroupValue : function()
12787     {
12788         var value = ''
12789         Roo.each(this.inputEl().up('form').select('input[name='+this.inputEl().dom.name+']', true).elements, function(v){
12790             if(v.dom.checked == true){
12791                 value = v.dom.value;
12792             }
12793         });
12794
12795         return value;
12796     },
12797
12798     /**
12799      * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
12800      * @return {Mixed} value The field value
12801      */
12802     getValue : function(){
12803         return this.getGroupValue();
12804     }
12805
12806 });
12807
12808
12809 //<script type="text/javascript">
12810
12811 /*
12812  * Based  Ext JS Library 1.1.1
12813  * Copyright(c) 2006-2007, Ext JS, LLC.
12814  * LGPL
12815  *
12816  */
12817
12818 /**
12819  * @class Roo.HtmlEditorCore
12820  * @extends Roo.Component
12821  * Provides a the editing component for the HTML editors in Roo. (bootstrap and Roo.form)
12822  *
12823  * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
12824  */
12825
12826 Roo.HtmlEditorCore = function(config){
12827
12828
12829     Roo.HtmlEditorCore.superclass.constructor.call(this, config);
12830     this.addEvents({
12831         /**
12832          * @event initialize
12833          * Fires when the editor is fully initialized (including the iframe)
12834          * @param {Roo.HtmlEditorCore} this
12835          */
12836         initialize: true,
12837         /**
12838          * @event activate
12839          * Fires when the editor is first receives the focus. Any insertion must wait
12840          * until after this event.
12841          * @param {Roo.HtmlEditorCore} this
12842          */
12843         activate: true,
12844          /**
12845          * @event beforesync
12846          * Fires before the textarea is updated with content from the editor iframe. Return false
12847          * to cancel the sync.
12848          * @param {Roo.HtmlEditorCore} this
12849          * @param {String} html
12850          */
12851         beforesync: true,
12852          /**
12853          * @event beforepush
12854          * Fires before the iframe editor is updated with content from the textarea. Return false
12855          * to cancel the push.
12856          * @param {Roo.HtmlEditorCore} this
12857          * @param {String} html
12858          */
12859         beforepush: true,
12860          /**
12861          * @event sync
12862          * Fires when the textarea is updated with content from the editor iframe.
12863          * @param {Roo.HtmlEditorCore} this
12864          * @param {String} html
12865          */
12866         sync: true,
12867          /**
12868          * @event push
12869          * Fires when the iframe editor is updated with content from the textarea.
12870          * @param {Roo.HtmlEditorCore} this
12871          * @param {String} html
12872          */
12873         push: true,
12874
12875         /**
12876          * @event editorevent
12877          * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
12878          * @param {Roo.HtmlEditorCore} this
12879          */
12880         editorevent: true
12881     });
12882
12883 };
12884
12885
12886 Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
12887
12888
12889      /**
12890      * @cfg {Roo.form.HtmlEditor|Roo.bootstrap.HtmlEditor} the owner field
12891      */
12892
12893     owner : false,
12894
12895      /**
12896      * @cfg {String} resizable  's' or 'se' or 'e' - wrapps the element in a
12897      *                        Roo.resizable.
12898      */
12899     resizable : false,
12900      /**
12901      * @cfg {Number} height (in pixels)
12902      */
12903     height: 300,
12904    /**
12905      * @cfg {Number} width (in pixels)
12906      */
12907     width: 500,
12908
12909     /**
12910      * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
12911      *
12912      */
12913     stylesheets: false,
12914
12915     // id of frame..
12916     frameId: false,
12917
12918     // private properties
12919     validationEvent : false,
12920     deferHeight: true,
12921     initialized : false,
12922     activated : false,
12923     sourceEditMode : false,
12924     onFocus : Roo.emptyFn,
12925     iframePad:3,
12926     hideMode:'offsets',
12927
12928
12929
12930
12931     /**
12932      * Protected method that will not generally be called directly. It
12933      * is called when the editor initializes the iframe with HTML contents. Override this method if you
12934      * want to change the initialization markup of the iframe (e.g. to add stylesheets).
12935      */
12936     getDocMarkup : function(){
12937         // body styles..
12938         var st = '';
12939         Roo.log(this.stylesheets);
12940
12941         // inherit styels from page...??
12942         if (this.stylesheets === false) {
12943
12944             Roo.get(document.head).select('style').each(function(node) {
12945                 st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
12946             });
12947
12948             Roo.get(document.head).select('link').each(function(node) {
12949                 st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
12950             });
12951
12952         } else if (!this.stylesheets.length) {
12953                 // simple..
12954                 st = '<style type="text/css">' +
12955                     'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
12956                    '</style>';
12957         } else {
12958             Roo.each(this.stylesheets, function(s) {
12959                 st += '<link rel="stylesheet" type="text/css" href="' + s +'" />'
12960             });
12961
12962         }
12963
12964         st +=  '<style type="text/css">' +
12965             'IMG { cursor: pointer } ' +
12966         '</style>';
12967
12968
12969         return '<html><head>' + st  +
12970             //<style type="text/css">' +
12971             //'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
12972             //'</style>' +
12973             ' </head><body class="roo-htmleditor-body"></body></html>';
12974     },
12975
12976     // private
12977     onRender : function(ct, position)
12978     {
12979         var _t = this;
12980         //Roo.HtmlEditorCore.superclass.onRender.call(this, ct, position);
12981         this.el = this.owner.inputEl ? this.owner.inputEl() : this.owner.el;
12982
12983
12984         this.el.dom.style.border = '0 none';
12985         this.el.dom.setAttribute('tabIndex', -1);
12986         this.el.addClass('x-hidden hide');
12987
12988
12989
12990         if(Roo.isIE){ // fix IE 1px bogus margin
12991             this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
12992         }
12993
12994
12995         this.frameId = Roo.id();
12996
12997
12998
12999         var iframe = this.owner.wrap.createChild({
13000             tag: 'iframe',
13001             cls: 'form-control', // bootstrap..
13002             id: this.frameId,
13003             name: this.frameId,
13004             frameBorder : 'no',
13005             'src' : Roo.SSL_SECURE_URL ? Roo.SSL_SECURE_URL  :  "javascript:false"
13006         }, this.el
13007         );
13008
13009
13010         this.iframe = iframe.dom;
13011
13012          this.assignDocWin();
13013
13014         this.doc.designMode = 'on';
13015
13016         this.doc.open();
13017         this.doc.write(this.getDocMarkup());
13018         this.doc.close();
13019
13020
13021         var task = { // must defer to wait for browser to be ready
13022             run : function(){
13023                 //console.log("run task?" + this.doc.readyState);
13024                 this.assignDocWin();
13025                 if(this.doc.body || this.doc.readyState == 'complete'){
13026                     try {
13027                         this.doc.designMode="on";
13028                     } catch (e) {
13029                         return;
13030                     }
13031                     Roo.TaskMgr.stop(task);
13032                     this.initEditor.defer(10, this);
13033                 }
13034             },
13035             interval : 10,
13036             duration: 10000,
13037             scope: this
13038         };
13039         Roo.TaskMgr.start(task);
13040
13041
13042
13043     },
13044
13045     // private
13046     onResize : function(w, h)
13047     {
13048          Roo.log('resize: ' +w + ',' + h );
13049         //Roo.HtmlEditorCore.superclass.onResize.apply(this, arguments);
13050         if(!this.iframe){
13051             return;
13052         }
13053         if(typeof w == 'number'){
13054
13055             this.iframe.style.width = w + 'px';
13056         }
13057         if(typeof h == 'number'){
13058
13059             this.iframe.style.height = h + 'px';
13060             if(this.doc){
13061                 (this.doc.body || this.doc.documentElement).style.height = (h - (this.iframePad*2)) + 'px';
13062             }
13063         }
13064
13065     },
13066
13067     /**
13068      * Toggles the editor between standard and source edit mode.
13069      * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
13070      */
13071     toggleSourceEdit : function(sourceEditMode){
13072
13073         this.sourceEditMode = sourceEditMode === true;
13074
13075         if(this.sourceEditMode){
13076
13077             Roo.get(this.iframe).addClass(['x-hidden','hide']);     //FIXME - what's the BS styles for these
13078
13079         }else{
13080             Roo.get(this.iframe).removeClass(['x-hidden','hide']);
13081             //this.iframe.className = '';
13082             this.deferFocus();
13083         }
13084         //this.setSize(this.owner.wrap.getSize());
13085         //this.fireEvent('editmodechange', this, this.sourceEditMode);
13086     },
13087
13088
13089
13090
13091     /**
13092      * Protected method that will not generally be called directly. If you need/want
13093      * custom HTML cleanup, this is the method you should override.
13094      * @param {String} html The HTML to be cleaned
13095      * return {String} The cleaned HTML
13096      */
13097     cleanHtml : function(html){
13098         html = String(html);
13099         if(html.length > 5){
13100             if(Roo.isSafari){ // strip safari nonsense
13101                 html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
13102             }
13103         }
13104         if(html == '&nbsp;'){
13105             html = '';
13106         }
13107         return html;
13108     },
13109
13110     /**
13111      * HTML Editor -> Textarea
13112      * Protected method that will not generally be called directly. Syncs the contents
13113      * of the editor iframe with the textarea.
13114      */
13115     syncValue : function(){
13116         if(this.initialized){
13117             var bd = (this.doc.body || this.doc.documentElement);
13118             //this.cleanUpPaste(); -- this is done else where and causes havoc..
13119             var html = bd.innerHTML;
13120             if(Roo.isSafari){
13121                 var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
13122                 var m = bs ? bs.match(/text-align:(.*?);/i) : false;
13123                 if(m && m[1]){
13124                     html = '<div style="'+m[0]+'">' + html + '</div>';
13125                 }
13126             }
13127             html = this.cleanHtml(html);
13128             // fix up the special chars.. normaly like back quotes in word...
13129             // however we do not want to do this with chinese..
13130             html = html.replace(/([\x80-\uffff])/g, function (a, b) {
13131                 var cc = b.charCodeAt();
13132                 if (
13133                     (cc >= 0x4E00 && cc < 0xA000 ) ||
13134                     (cc >= 0x3400 && cc < 0x4E00 ) ||
13135                     (cc >= 0xf900 && cc < 0xfb00 )
13136                 ) {
13137                         return b;
13138                 }
13139                 return "&#"+cc+";"
13140             });
13141             if(this.owner.fireEvent('beforesync', this, html) !== false){
13142                 this.el.dom.value = html;
13143                 this.owner.fireEvent('sync', this, html);
13144             }
13145         }
13146     },
13147
13148     /**
13149      * Protected method that will not generally be called directly. Pushes the value of the textarea
13150      * into the iframe editor.
13151      */
13152     pushValue : function(){
13153         if(this.initialized){
13154             var v = this.el.dom.value.trim();
13155
13156 //            if(v.length < 1){
13157 //                v = '&#160;';
13158 //            }
13159
13160             if(this.owner.fireEvent('beforepush', this, v) !== false){
13161                 var d = (this.doc.body || this.doc.documentElement);
13162                 d.innerHTML = v;
13163                 this.cleanUpPaste();
13164                 this.el.dom.value = d.innerHTML;
13165                 this.owner.fireEvent('push', this, v);
13166             }
13167         }
13168     },
13169
13170     // private
13171     deferFocus : function(){
13172         this.focus.defer(10, this);
13173     },
13174
13175     // doc'ed in Field
13176     focus : function(){
13177         if(this.win && !this.sourceEditMode){
13178             this.win.focus();
13179         }else{
13180             this.el.focus();
13181         }
13182     },
13183
13184     assignDocWin: function()
13185     {
13186         var iframe = this.iframe;
13187
13188          if(Roo.isIE){
13189             this.doc = iframe.contentWindow.document;
13190             this.win = iframe.contentWindow;
13191         } else {
13192             if (!Roo.get(this.frameId)) {
13193                 return;
13194             }
13195             this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
13196             this.win = Roo.get(this.frameId).dom.contentWindow;
13197         }
13198     },
13199
13200     // private
13201     initEditor : function(){
13202         //console.log("INIT EDITOR");
13203         this.assignDocWin();
13204
13205
13206
13207         this.doc.designMode="on";
13208         this.doc.open();
13209         this.doc.write(this.getDocMarkup());
13210         this.doc.close();
13211
13212         var dbody = (this.doc.body || this.doc.documentElement);
13213         //var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
13214         // this copies styles from the containing element into thsi one..
13215         // not sure why we need all of this..
13216         var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
13217         ss['background-attachment'] = 'fixed'; // w3c
13218         dbody.bgProperties = 'fixed'; // ie
13219         Roo.DomHelper.applyStyles(dbody, ss);
13220         Roo.EventManager.on(this.doc, {
13221             //'mousedown': this.onEditorEvent,
13222             'mouseup': this.onEditorEvent,
13223             'dblclick': this.onEditorEvent,
13224             'click': this.onEditorEvent,
13225             'keyup': this.onEditorEvent,
13226             buffer:100,
13227             scope: this
13228         });
13229         if(Roo.isGecko){
13230             Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
13231         }
13232         if(Roo.isIE || Roo.isSafari || Roo.isOpera){
13233             Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
13234         }
13235         this.initialized = true;
13236
13237         this.owner.fireEvent('initialize', this);
13238         this.pushValue();
13239     },
13240
13241     // private
13242     onDestroy : function(){
13243
13244
13245
13246         if(this.rendered){
13247
13248             //for (var i =0; i < this.toolbars.length;i++) {
13249             //    // fixme - ask toolbars for heights?
13250             //    this.toolbars[i].onDestroy();
13251            // }
13252
13253             //this.wrap.dom.innerHTML = '';
13254             //this.wrap.remove();
13255         }
13256     },
13257
13258     // private
13259     onFirstFocus : function(){
13260
13261         this.assignDocWin();
13262
13263
13264         this.activated = true;
13265
13266
13267         if(Roo.isGecko){ // prevent silly gecko errors
13268             this.win.focus();
13269             var s = this.win.getSelection();
13270             if(!s.focusNode || s.focusNode.nodeType != 3){
13271                 var r = s.getRangeAt(0);
13272                 r.selectNodeContents((this.doc.body || this.doc.documentElement));
13273                 r.collapse(true);
13274                 this.deferFocus();
13275             }
13276             try{
13277                 this.execCmd('useCSS', true);
13278                 this.execCmd('styleWithCSS', false);
13279             }catch(e){}
13280         }
13281         this.owner.fireEvent('activate', this);
13282     },
13283
13284     // private
13285     adjustFont: function(btn){
13286         var adjust = btn.cmd == 'increasefontsize' ? 1 : -1;
13287         //if(Roo.isSafari){ // safari
13288         //    adjust *= 2;
13289        // }
13290         var v = parseInt(this.doc.queryCommandValue('FontSize')|| 3, 10);
13291         if(Roo.isSafari){ // safari
13292             var sm = { 10 : 1, 13: 2, 16:3, 18:4, 24: 5, 32:6, 48: 7 };
13293             v =  (v < 10) ? 10 : v;
13294             v =  (v > 48) ? 48 : v;
13295             v = typeof(sm[v]) == 'undefined' ? 1 : sm[v];
13296
13297         }
13298
13299
13300         v = Math.max(1, v+adjust);
13301
13302         this.execCmd('FontSize', v  );
13303     },
13304
13305     onEditorEvent : function(e){
13306         this.owner.fireEvent('editorevent', this, e);
13307       //  this.updateToolbar();
13308         this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff
13309     },
13310
13311     insertTag : function(tg)
13312     {
13313         // could be a bit smarter... -> wrap the current selected tRoo..
13314         if (tg.toLowerCase() == 'span' || tg.toLowerCase() == 'code') {
13315
13316             range = this.createRange(this.getSelection());
13317             var wrappingNode = this.doc.createElement(tg.toLowerCase());
13318             wrappingNode.appendChild(range.extractContents());
13319             range.insertNode(wrappingNode);
13320
13321             return;
13322
13323
13324
13325         }
13326         this.execCmd("formatblock",   tg);
13327
13328     },
13329
13330     insertText : function(txt)
13331     {
13332
13333
13334         var range = this.createRange();
13335         range.deleteContents();
13336                //alert(Sender.getAttribute('label'));
13337
13338         range.insertNode(this.doc.createTextNode(txt));
13339     } ,
13340
13341
13342
13343     /**
13344      * Executes a Midas editor command on the editor document and performs necessary focus and
13345      * toolbar updates. <b>This should only be called after the editor is initialized.</b>
13346      * @param {String} cmd The Midas command
13347      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
13348      */
13349     relayCmd : function(cmd, value){
13350         this.win.focus();
13351         this.execCmd(cmd, value);
13352         this.owner.fireEvent('editorevent', this);
13353         //this.updateToolbar();
13354         this.owner.deferFocus();
13355     },
13356
13357     /**
13358      * Executes a Midas editor command directly on the editor document.
13359      * For visual commands, you should use {@link #relayCmd} instead.
13360      * <b>This should only be called after the editor is initialized.</b>
13361      * @param {String} cmd The Midas command
13362      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
13363      */
13364     execCmd : function(cmd, value){
13365         this.doc.execCommand(cmd, false, value === undefined ? null : value);
13366         this.syncValue();
13367     },
13368
13369
13370
13371     /**
13372      * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
13373      * to insert tRoo.
13374      * @param {String} text | dom node..
13375      */
13376     insertAtCursor : function(text)
13377     {
13378
13379
13380
13381         if(!this.activated){
13382             return;
13383         }
13384         /*
13385         if(Roo.isIE){
13386             this.win.focus();
13387             var r = this.doc.selection.createRange();
13388             if(r){
13389                 r.collapse(true);
13390                 r.pasteHTML(text);
13391                 this.syncValue();
13392                 this.deferFocus();
13393
13394             }
13395             return;
13396         }
13397         */
13398         if(Roo.isGecko || Roo.isOpera || Roo.isSafari){
13399             this.win.focus();
13400
13401
13402             // from jquery ui (MIT licenced)
13403             var range, node;
13404             var win = this.win;
13405
13406             if (win.getSelection && win.getSelection().getRangeAt) {
13407                 range = win.getSelection().getRangeAt(0);
13408                 node = typeof(text) == 'string' ? range.createContextualFragment(text) : text;
13409                 range.insertNode(node);
13410             } else if (win.document.selection && win.document.selection.createRange) {
13411                 // no firefox support
13412                 var txt = typeof(text) == 'string' ? text : text.outerHTML;
13413                 win.document.selection.createRange().pasteHTML(txt);
13414             } else {
13415                 // no firefox support
13416                 var txt = typeof(text) == 'string' ? text : text.outerHTML;
13417                 this.execCmd('InsertHTML', txt);
13418             }
13419
13420             this.syncValue();
13421
13422             this.deferFocus();
13423         }
13424     },
13425  // private
13426     mozKeyPress : function(e){
13427         if(e.ctrlKey){
13428             var c = e.getCharCode(), cmd;
13429
13430             if(c > 0){
13431                 c = String.fromCharCode(c).toLowerCase();
13432                 switch(c){
13433                     case 'b':
13434                         cmd = 'bold';
13435                         break;
13436                     case 'i':
13437                         cmd = 'italic';
13438                         break;
13439
13440                     case 'u':
13441                         cmd = 'underline';
13442                         break;
13443
13444                     case 'v':
13445                         this.cleanUpPaste.defer(100, this);
13446                         return;
13447
13448                 }
13449                 if(cmd){
13450                     this.win.focus();
13451                     this.execCmd(cmd);
13452                     this.deferFocus();
13453                     e.preventDefault();
13454                 }
13455
13456             }
13457         }
13458     },
13459
13460     // private
13461     fixKeys : function(){ // load time branching for fastest keydown performance
13462         if(Roo.isIE){
13463             return function(e){
13464                 var k = e.getKey(), r;
13465                 if(k == e.TAB){
13466                     e.stopEvent();
13467                     r = this.doc.selection.createRange();
13468                     if(r){
13469                         r.collapse(true);
13470                         r.pasteHTML('&#160;&#160;&#160;&#160;');
13471                         this.deferFocus();
13472                     }
13473                     return;
13474                 }
13475
13476                 if(k == e.ENTER){
13477                     r = this.doc.selection.createRange();
13478                     if(r){
13479                         var target = r.parentElement();
13480                         if(!target || target.tagName.toLowerCase() != 'li'){
13481                             e.stopEvent();
13482                             r.pasteHTML('<br />');
13483                             r.collapse(false);
13484                             r.select();
13485                         }
13486                     }
13487                 }
13488                 if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
13489                     this.cleanUpPaste.defer(100, this);
13490                     return;
13491                 }
13492
13493
13494             };
13495         }else if(Roo.isOpera){
13496             return function(e){
13497                 var k = e.getKey();
13498                 if(k == e.TAB){
13499                     e.stopEvent();
13500                     this.win.focus();
13501                     this.execCmd('InsertHTML','&#160;&#160;&#160;&#160;');
13502                     this.deferFocus();
13503                 }
13504                 if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
13505                     this.cleanUpPaste.defer(100, this);
13506                     return;
13507                 }
13508
13509             };
13510         }else if(Roo.isSafari){
13511             return function(e){
13512                 var k = e.getKey();
13513
13514                 if(k == e.TAB){
13515                     e.stopEvent();
13516                     this.execCmd('InsertText','\t');
13517                     this.deferFocus();
13518                     return;
13519                 }
13520                if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
13521                     this.cleanUpPaste.defer(100, this);
13522                     return;
13523                 }
13524
13525              };
13526         }
13527     }(),
13528
13529     getAllAncestors: function()
13530     {
13531         var p = this.getSelectedNode();
13532         var a = [];
13533         if (!p) {
13534             a.push(p); // push blank onto stack..
13535             p = this.getParentElement();
13536         }
13537
13538
13539         while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
13540             a.push(p);
13541             p = p.parentNode;
13542         }
13543         a.push(this.doc.body);
13544         return a;
13545     },
13546     lastSel : false,
13547     lastSelNode : false,
13548
13549
13550     getSelection : function()
13551     {
13552         this.assignDocWin();
13553         return Roo.isIE ? this.doc.selection : this.win.getSelection();
13554     },
13555
13556     getSelectedNode: function()
13557     {
13558         // this may only work on Gecko!!!
13559
13560         // should we cache this!!!!
13561
13562
13563
13564
13565         var range = this.createRange(this.getSelection()).cloneRange();
13566
13567         if (Roo.isIE) {
13568             var parent = range.parentElement();
13569             while (true) {
13570                 var testRange = range.duplicate();
13571                 testRange.moveToElementText(parent);
13572                 if (testRange.inRange(range)) {
13573                     break;
13574                 }
13575                 if ((parent.nodeType != 1) || (parent.tagName.toLowerCase() == 'body')) {
13576                     break;
13577                 }
13578                 parent = parent.parentElement;
13579             }
13580             return parent;
13581         }
13582
13583         // is ancestor a text element.
13584         var ac =  range.commonAncestorContainer;
13585         if (ac.nodeType == 3) {
13586             ac = ac.parentNode;
13587         }
13588
13589         var ar = ac.childNodes;
13590
13591         var nodes = [];
13592         var other_nodes = [];
13593         var has_other_nodes = false;
13594         for (var i=0;i<ar.length;i++) {
13595             if ((ar[i].nodeType == 3) && (!ar[i].data.length)) { // empty text ?
13596                 continue;
13597             }
13598             // fullly contained node.
13599
13600             if (this.rangeIntersectsNode(range,ar[i]) && this.rangeCompareNode(range,ar[i]) == 3) {
13601                 nodes.push(ar[i]);
13602                 continue;
13603             }
13604
13605             // probably selected..
13606             if ((ar[i].nodeType == 1) && this.rangeIntersectsNode(range,ar[i]) && (this.rangeCompareNode(range,ar[i]) > 0)) {
13607                 other_nodes.push(ar[i]);
13608                 continue;
13609             }
13610             // outer..
13611             if (!this.rangeIntersectsNode(range,ar[i])|| (this.rangeCompareNode(range,ar[i]) == 0))  {
13612                 continue;
13613             }
13614
13615
13616             has_other_nodes = true;
13617         }
13618         if (!nodes.length && other_nodes.length) {
13619             nodes= other_nodes;
13620         }
13621         if (has_other_nodes || !nodes.length || (nodes.length > 1)) {
13622             return false;
13623         }
13624
13625         return nodes[0];
13626     },
13627     createRange: function(sel)
13628     {
13629         // this has strange effects when using with
13630         // top toolbar - not sure if it's a great idea.
13631         //this.editor.contentWindow.focus();
13632         if (typeof sel != "undefined") {
13633             try {
13634                 return sel.getRangeAt ? sel.getRangeAt(0) : sel.createRange();
13635             } catch(e) {
13636                 return this.doc.createRange();
13637             }
13638         } else {
13639             return this.doc.createRange();
13640         }
13641     },
13642     getParentElement: function()
13643     {
13644
13645         this.assignDocWin();
13646         var sel = Roo.isIE ? this.doc.selection : this.win.getSelection();
13647
13648         var range = this.createRange(sel);
13649
13650         try {
13651             var p = range.commonAncestorContainer;
13652             while (p.nodeType == 3) { // text node
13653                 p = p.parentNode;
13654             }
13655             return p;
13656         } catch (e) {
13657             return null;
13658         }
13659
13660     },
13661     /***
13662      *
13663      * Range intersection.. the hard stuff...
13664      *  '-1' = before
13665      *  '0' = hits..
13666      *  '1' = after.
13667      *         [ -- selected range --- ]
13668      *   [fail]                        [fail]
13669      *
13670      *    basically..
13671      *      if end is before start or  hits it. fail.
13672      *      if start is after end or hits it fail.
13673      *
13674      *   if either hits (but other is outside. - then it's not
13675      *
13676      *
13677      **/
13678
13679
13680     // @see http://www.thismuchiknow.co.uk/?p=64.
13681     rangeIntersectsNode : function(range, node)
13682     {
13683         var nodeRange = node.ownerDocument.createRange();
13684         try {
13685             nodeRange.selectNode(node);
13686         } catch (e) {
13687             nodeRange.selectNodeContents(node);
13688         }
13689
13690         var rangeStartRange = range.cloneRange();
13691         rangeStartRange.collapse(true);
13692
13693         var rangeEndRange = range.cloneRange();
13694         rangeEndRange.collapse(false);
13695
13696         var nodeStartRange = nodeRange.cloneRange();
13697         nodeStartRange.collapse(true);
13698
13699         var nodeEndRange = nodeRange.cloneRange();
13700         nodeEndRange.collapse(false);
13701
13702         return rangeStartRange.compareBoundaryPoints(
13703                  Range.START_TO_START, nodeEndRange) == -1 &&
13704                rangeEndRange.compareBoundaryPoints(
13705                  Range.START_TO_START, nodeStartRange) == 1;
13706
13707
13708     },
13709     rangeCompareNode : function(range, node)
13710     {
13711         var nodeRange = node.ownerDocument.createRange();
13712         try {
13713             nodeRange.selectNode(node);
13714         } catch (e) {
13715             nodeRange.selectNodeContents(node);
13716         }
13717
13718
13719         range.collapse(true);
13720
13721         nodeRange.collapse(true);
13722
13723         var ss = range.compareBoundaryPoints( Range.START_TO_START, nodeRange);
13724         var ee = range.compareBoundaryPoints(  Range.END_TO_END, nodeRange);
13725
13726         //Roo.log(node.tagName + ': ss='+ss +', ee='+ee)
13727
13728         var nodeIsBefore   =  ss == 1;
13729         var nodeIsAfter    = ee == -1;
13730
13731         if (nodeIsBefore && nodeIsAfter)
13732             return 0; // outer
13733         if (!nodeIsBefore && nodeIsAfter)
13734             return 1; //right trailed.
13735
13736         if (nodeIsBefore && !nodeIsAfter)
13737             return 2;  // left trailed.
13738         // fully contined.
13739         return 3;
13740     },
13741
13742     // private? - in a new class?
13743     cleanUpPaste :  function()
13744     {
13745         // cleans up the whole document..
13746          Roo.log('cleanuppaste');
13747         this.cleanUpChildren(this.doc.body);
13748         var clean = this.cleanWordChars(this.doc.body.innerHTML);
13749         if (clean != this.doc.body.innerHTML) {
13750             this.doc.body.innerHTML = clean;
13751         }
13752
13753     },
13754
13755     cleanWordChars : function(input) {// change the chars to hex code
13756         var he = Roo.HtmlEditorCore;
13757
13758         var output = input;
13759         Roo.each(he.swapCodes, function(sw) {
13760             var swapper = new RegExp("\\u" + sw[0].toString(16), "g"); // hex codes
13761
13762             output = output.replace(swapper, sw[1]);
13763         });
13764
13765         return output;
13766     },
13767
13768
13769     cleanUpChildren : function (n)
13770     {
13771         if (!n.childNodes.length) {
13772             return;
13773         }
13774         for (var i = n.childNodes.length-1; i > -1 ; i--) {
13775            this.cleanUpChild(n.childNodes[i]);
13776         }
13777     },
13778
13779
13780
13781
13782     cleanUpChild : function (node)
13783     {
13784         var ed = this;
13785         //console.log(node);
13786         if (node.nodeName == "#text") {
13787             // clean up silly Windows -- stuff?
13788             return;
13789         }
13790         if (node.nodeName == "#comment") {
13791             node.parentNode.removeChild(node);
13792             // clean up silly Windows -- stuff?
13793             return;
13794         }
13795
13796         if (Roo.HtmlEditorCore.black.indexOf(node.tagName.toLowerCase()) > -1) {
13797             // remove node.
13798             node.parentNode.removeChild(node);
13799             return;
13800
13801         }
13802
13803         var remove_keep_children= Roo.HtmlEditorCore.remove.indexOf(node.tagName.toLowerCase()) > -1;
13804
13805         // remove <a name=....> as rendering on yahoo mailer is borked with this.
13806         // this will have to be flaged elsewhere - perhaps ablack=name... on the mailer..
13807
13808         //if (node.tagName.toLowerCase() == 'a' && !node.hasAttribute('href')) {
13809         //    remove_keep_children = true;
13810         //}
13811
13812         if (remove_keep_children) {
13813             this.cleanUpChildren(node);
13814             // inserts everything just before this node...
13815             while (node.childNodes.length) {
13816                 var cn = node.childNodes[0];
13817                 node.removeChild(cn);
13818                 node.parentNode.insertBefore(cn, node);
13819             }
13820             node.parentNode.removeChild(node);
13821             return;
13822         }
13823
13824         if (!node.attributes || !node.attributes.length) {
13825             this.cleanUpChildren(node);
13826             return;
13827         }
13828
13829         function cleanAttr(n,v)
13830         {
13831
13832             if (v.match(/^\./) || v.match(/^\//)) {
13833                 return;
13834             }
13835             if (v.match(/^(http|https):\/\//) || v.match(/^mailto:/)) {
13836                 return;
13837             }
13838             if (v.match(/^#/)) {
13839                 return;
13840             }
13841 //            Roo.log("(REMOVE TAG)"+ node.tagName +'.' + n + '=' + v);
13842             node.removeAttribute(n);
13843
13844         }
13845
13846         function cleanStyle(n,v)
13847         {
13848             if (v.match(/expression/)) { //XSS?? should we even bother..
13849                 node.removeAttribute(n);
13850                 return;
13851             }
13852             var cwhite = typeof(ed.cwhite) == 'undefined' ? Roo.HtmlEditorCore.cwhite : ed.cwhite;
13853             var cblack = typeof(ed.cblack) == 'undefined' ? Roo.HtmlEditorCore.cblack : ed.cblack;
13854
13855
13856             var parts = v.split(/;/);
13857             var clean = [];
13858
13859             Roo.each(parts, function(p) {
13860                 p = p.replace(/^\s+/g,'').replace(/\s+$/g,'');
13861                 if (!p.length) {
13862                     return true;
13863                 }
13864                 var l = p.split(':').shift().replace(/\s+/g,'');
13865                 l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
13866
13867
13868                 if ( cblack.indexOf(l) > -1) {
13869 //                    Roo.log('(REMOVE CSS)' + node.tagName +'.' + n + ':'+l + '=' + v);
13870                     //node.removeAttribute(n);
13871                     return true;
13872                 }
13873                 //Roo.log()
13874                 // only allow 'c whitelisted system attributes'
13875                 if ( cwhite.length &&  cwhite.indexOf(l) < 0) {
13876 //                    Roo.log('(REMOVE CSS)' + node.tagName +'.' + n + ':'+l + '=' + v);
13877                     //node.removeAttribute(n);
13878                     return true;
13879                 }
13880
13881
13882
13883
13884                 clean.push(p);
13885                 return true;
13886             });
13887             if (clean.length) {
13888                 node.setAttribute(n, clean.join(';'));
13889             } else {
13890                 node.removeAttribute(n);
13891             }
13892
13893         }
13894
13895
13896         for (var i = node.attributes.length-1; i > -1 ; i--) {
13897             var a = node.attributes[i];
13898             //console.log(a);
13899
13900             if (a.name.toLowerCase().substr(0,2)=='on')  {
13901                 node.removeAttribute(a.name);
13902                 continue;
13903             }
13904             if (Roo.HtmlEditorCore.ablack.indexOf(a.name.toLowerCase()) > -1) {
13905                 node.removeAttribute(a.name);
13906                 continue;
13907             }
13908             if (Roo.HtmlEditorCore.aclean.indexOf(a.name.toLowerCase()) > -1) {
13909                 cleanAttr(a.name,a.value); // fixme..
13910                 continue;
13911             }
13912             if (a.name == 'style') {
13913                 cleanStyle(a.name,a.value);
13914                 continue;
13915             }
13916             /// clean up MS crap..
13917             // tecnically this should be a list of valid class'es..
13918
13919
13920             if (a.name == 'class') {
13921                 if (a.value.match(/^Mso/)) {
13922                     node.className = '';
13923                 }
13924
13925                 if (a.value.match(/body/)) {
13926                     node.className = '';
13927                 }
13928                 continue;
13929             }
13930
13931             // style cleanup!?
13932             // class cleanup?
13933
13934         }
13935
13936
13937         this.cleanUpChildren(node);
13938
13939
13940     }
13941
13942
13943     // hide stuff that is not compatible
13944     /**
13945      * @event blur
13946      * @hide
13947      */
13948     /**
13949      * @event change
13950      * @hide
13951      */
13952     /**
13953      * @event focus
13954      * @hide
13955      */
13956     /**
13957      * @event specialkey
13958      * @hide
13959      */
13960     /**
13961      * @cfg {String} fieldClass @hide
13962      */
13963     /**
13964      * @cfg {String} focusClass @hide
13965      */
13966     /**
13967      * @cfg {String} autoCreate @hide
13968      */
13969     /**
13970      * @cfg {String} inputType @hide
13971      */
13972     /**
13973      * @cfg {String} invalidClass @hide
13974      */
13975     /**
13976      * @cfg {String} invalidText @hide
13977      */
13978     /**
13979      * @cfg {String} msgFx @hide
13980      */
13981     /**
13982      * @cfg {String} validateOnBlur @hide
13983      */
13984 });
13985
13986 Roo.HtmlEditorCore.white = [
13987         'area', 'br', 'img', 'input', 'hr', 'wbr',
13988
13989        'address', 'blockquote', 'center', 'dd',      'dir',       'div',
13990        'dl',      'dt',         'h1',     'h2',      'h3',        'h4',
13991        'h5',      'h6',         'hr',     'isindex', 'listing',   'marquee',
13992        'menu',    'multicol',   'ol',     'p',       'plaintext', 'pre',
13993        'table',   'ul',         'xmp',
13994
13995        'caption', 'col', 'colgroup', 'tbody', 'td', 'tfoot', 'th',
13996       'thead',   'tr',
13997
13998       'dir', 'menu', 'ol', 'ul', 'dl',
13999
14000       'embed',  'object'
14001 ];
14002
14003
14004 Roo.HtmlEditorCore.black = [
14005     //    'embed',  'object', // enable - backend responsiblity to clean thiese
14006         'applet', //
14007         'base',   'basefont', 'bgsound', 'blink',  'body',
14008         'frame',  'frameset', 'head',    'html',   'ilayer',
14009         'iframe', 'layer',  'link',     'meta',    'object',
14010         'script', 'style' ,'title',  'xml' // clean later..
14011 ];
14012 Roo.HtmlEditorCore.clean = [
14013     'script', 'style', 'title', 'xml'
14014 ];
14015 Roo.HtmlEditorCore.remove = [
14016     'font'
14017 ];
14018 // attributes..
14019
14020 Roo.HtmlEditorCore.ablack = [
14021     'on'
14022 ];
14023
14024 Roo.HtmlEditorCore.aclean = [
14025     'action', 'background', 'codebase', 'dynsrc', 'href', 'lowsrc'
14026 ];
14027
14028 // protocols..
14029 Roo.HtmlEditorCore.pwhite= [
14030         'http',  'https',  'mailto'
14031 ];
14032
14033 // white listed style attributes.
14034 Roo.HtmlEditorCore.cwhite= [
14035       //  'text-align', /// default is to allow most things..
14036
14037
14038 //        'font-size'//??
14039 ];
14040
14041 // black listed style attributes.
14042 Roo.HtmlEditorCore.cblack= [
14043       //  'font-size' -- this can be set by the project
14044 ];
14045
14046
14047 Roo.HtmlEditorCore.swapCodes   =[
14048     [    8211, "--" ],
14049     [    8212, "--" ],
14050     [    8216,  "'" ],
14051     [    8217, "'" ],
14052     [    8220, '"' ],
14053     [    8221, '"' ],
14054     [    8226, "*" ],
14055     [    8230, "..." ]
14056 ];
14057
14058     /*
14059  * - LGPL
14060  *
14061  * HtmlEditor
14062  *
14063  */
14064
14065 /**
14066  * @class Roo.bootstrap.HtmlEditor
14067  * @extends Roo.bootstrap.TextArea
14068  * Bootstrap HtmlEditor class
14069
14070  * @constructor
14071  * Create a new HtmlEditor
14072  * @param {Object} config The config object
14073  */
14074
14075 Roo.bootstrap.HtmlEditor = function(config){
14076     Roo.bootstrap.HtmlEditor.superclass.constructor.call(this, config);
14077     if (!this.toolbars) {
14078         this.toolbars = [];
14079     }
14080     this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
14081     this.addEvents({
14082             /**
14083              * @event initialize
14084              * Fires when the editor is fully initialized (including the iframe)
14085              * @param {HtmlEditor} this
14086              */
14087             initialize: true,
14088             /**
14089              * @event activate
14090              * Fires when the editor is first receives the focus. Any insertion must wait
14091              * until after this event.
14092              * @param {HtmlEditor} this
14093              */
14094             activate: true,
14095              /**
14096              * @event beforesync
14097              * Fires before the textarea is updated with content from the editor iframe. Return false
14098              * to cancel the sync.
14099              * @param {HtmlEditor} this
14100              * @param {String} html
14101              */
14102             beforesync: true,
14103              /**
14104              * @event beforepush
14105              * Fires before the iframe editor is updated with content from the textarea. Return false
14106              * to cancel the push.
14107              * @param {HtmlEditor} this
14108              * @param {String} html
14109              */
14110             beforepush: true,
14111              /**
14112              * @event sync
14113              * Fires when the textarea is updated with content from the editor iframe.
14114              * @param {HtmlEditor} this
14115              * @param {String} html
14116              */
14117             sync: true,
14118              /**
14119              * @event push
14120              * Fires when the iframe editor is updated with content from the textarea.
14121              * @param {HtmlEditor} this
14122              * @param {String} html
14123              */
14124             push: true,
14125              /**
14126              * @event editmodechange
14127              * Fires when the editor switches edit modes
14128              * @param {HtmlEditor} this
14129              * @param {Boolean} sourceEdit True if source edit, false if standard editing.
14130              */
14131             editmodechange: true,
14132             /**
14133              * @event editorevent
14134              * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
14135              * @param {HtmlEditor} this
14136              */
14137             editorevent: true,
14138             /**
14139              * @event firstfocus
14140              * Fires when on first focus - needed by toolbars..
14141              * @param {HtmlEditor} this
14142              */
14143             firstfocus: true,
14144             /**
14145              * @event autosave
14146              * Auto save the htmlEditor value as a file into Events
14147              * @param {HtmlEditor} this
14148              */
14149             autosave: true,
14150             /**
14151              * @event savedpreview
14152              * preview the saved version of htmlEditor
14153              * @param {HtmlEditor} this
14154              */
14155             savedpreview: true
14156         });
14157 };
14158
14159
14160 Roo.extend(Roo.bootstrap.HtmlEditor, Roo.bootstrap.TextArea,  {
14161
14162
14163       /**
14164      * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one
14165      */
14166     toolbars : false,
14167
14168      /**
14169      * @cfg {String} resizable  's' or 'se' or 'e' - wrapps the element in a
14170      *                        Roo.resizable.
14171      */
14172     resizable : false,
14173      /**
14174      * @cfg {Number} height (in pixels)
14175      */
14176     height: 300,
14177    /**
14178      * @cfg {Number} width (in pixels)
14179      */
14180     width: false,
14181
14182     /**
14183      * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
14184      *
14185      */
14186     stylesheets: false,
14187
14188     // id of frame..
14189     frameId: false,
14190
14191     // private properties
14192     validationEvent : false,
14193     deferHeight: true,
14194     initialized : false,
14195     activated : false,
14196
14197     onFocus : Roo.emptyFn,
14198     iframePad:3,
14199     hideMode:'offsets',
14200
14201
14202     tbContainer : false,
14203
14204     toolbarContainer :function() {
14205         return this.wrap.select('.x-html-editor-tb',true).first();
14206     },
14207
14208     /**
14209      * Protected method that will not generally be called directly. It
14210      * is called when the editor creates its toolbar. Override this method if you need to
14211      * add custom toolbar buttons.
14212      * @param {HtmlEditor} editor
14213      */
14214     createToolbar : function(){
14215
14216         Roo.log("create toolbars");
14217
14218         this.toolbars = [ new Roo.bootstrap.HtmlEditor.ToolbarStandard({editor: this} ) ];
14219         this.toolbars[0].render(this.toolbarContainer());
14220
14221         return;
14222
14223 //        if (!editor.toolbars || !editor.toolbars.length) {
14224 //            editor.toolbars = [ new Roo.bootstrap.HtmlEditor.ToolbarStandard() ]; // can be empty?
14225 //        }
14226 //
14227 //        for (var i =0 ; i < editor.toolbars.length;i++) {
14228 //            editor.toolbars[i] = Roo.factory(
14229 //                    typeof(editor.toolbars[i]) == 'string' ?
14230 //                        { xtype: editor.toolbars[i]} : editor.toolbars[i],
14231 //                Roo.bootstrap.HtmlEditor);
14232 //            editor.toolbars[i].init(editor);
14233 //        }
14234     },
14235
14236
14237     // private
14238     onRender : function(ct, position)
14239     {
14240        // Roo.log("Call onRender: " + this.xtype);
14241         var _t = this;
14242         Roo.bootstrap.HtmlEditor.superclass.onRender.call(this, ct, position);
14243
14244         this.wrap = this.inputEl().wrap({
14245             cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
14246         });
14247
14248         this.editorcore.onRender(ct, position);
14249
14250         if (this.resizable) {
14251             this.resizeEl = new Roo.Resizable(this.wrap, {
14252                 pinned : true,
14253                 wrap: true,
14254                 dynamic : true,
14255                 minHeight : this.height,
14256                 height: this.height,
14257                 handles : this.resizable,
14258                 width: this.width,
14259                 listeners : {
14260                     resize : function(r, w, h) {
14261                         _t.onResize(w,h); // -something
14262                     }
14263                 }
14264             });
14265
14266         }
14267         this.createToolbar(this);
14268
14269
14270         if(!this.width && this.resizable){
14271             this.setSize(this.wrap.getSize());
14272         }
14273         if (this.resizeEl) {
14274             this.resizeEl.resizeTo.defer(100, this.resizeEl,[ this.width,this.height ] );
14275             // should trigger onReize..
14276         }
14277
14278     },
14279
14280     // private
14281     onResize : function(w, h)
14282     {
14283         Roo.log('resize: ' +w + ',' + h );
14284         Roo.bootstrap.HtmlEditor.superclass.onResize.apply(this, arguments);
14285         var ew = false;
14286         var eh = false;
14287
14288         if(this.inputEl() ){
14289             if(typeof w == 'number'){
14290                 var aw = w - this.wrap.getFrameWidth('lr');
14291                 this.inputEl().setWidth(this.adjustWidth('textarea', aw));
14292                 ew = aw;
14293             }
14294             if(typeof h == 'number'){
14295                  var tbh = -11;  // fixme it needs to tool bar size!
14296                 for (var i =0; i < this.toolbars.length;i++) {
14297                     // fixme - ask toolbars for heights?
14298                     tbh += this.toolbars[i].el.getHeight();
14299                     //if (this.toolbars[i].footer) {
14300                     //    tbh += this.toolbars[i].footer.el.getHeight();
14301                     //}
14302                 }
14303
14304
14305
14306
14307
14308                 var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
14309                 ah -= 5; // knock a few pixes off for look..
14310                 this.inputEl().setHeight(this.adjustWidth('textarea', ah));
14311                 var eh = ah;
14312             }
14313         }
14314         Roo.log('onResize:' + [w,h,ew,eh].join(',') );
14315         this.editorcore.onResize(ew,eh);
14316
14317     },
14318
14319     /**
14320      * Toggles the editor between standard and source edit mode.
14321      * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
14322      */
14323     toggleSourceEdit : function(sourceEditMode)
14324     {
14325         this.editorcore.toggleSourceEdit(sourceEditMode);
14326
14327         if(this.editorcore.sourceEditMode){
14328             Roo.log('editor - showing textarea');
14329
14330 //            Roo.log('in');
14331 //            Roo.log(this.syncValue());
14332             this.syncValue();
14333             this.inputEl().removeClass('hide');
14334             this.inputEl().dom.removeAttribute('tabIndex');
14335             this.inputEl().focus();
14336         }else{
14337             Roo.log('editor - hiding textarea');
14338 //            Roo.log('out')
14339 //            Roo.log(this.pushValue());
14340             this.pushValue();
14341
14342             this.inputEl().addClass('hide');
14343             this.inputEl().dom.setAttribute('tabIndex', -1);
14344             //this.deferFocus();
14345         }
14346
14347         if(this.resizable){
14348             this.setSize(this.wrap.getSize());
14349         }
14350
14351         this.fireEvent('editmodechange', this, this.editorcore.sourceEditMode);
14352     },
14353
14354     // private (for BoxComponent)
14355     adjustSize : Roo.BoxComponent.prototype.adjustSize,
14356
14357     // private (for BoxComponent)
14358     getResizeEl : function(){
14359         return this.wrap;
14360     },
14361
14362     // private (for BoxComponent)
14363     getPositionEl : function(){
14364         return this.wrap;
14365     },
14366
14367     // private
14368     initEvents : function(){
14369         this.originalValue = this.getValue();
14370     },
14371
14372 //    /**
14373 //     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
14374 //     * @method
14375 //     */
14376 //    markInvalid : Roo.emptyFn,
14377 //    /**
14378 //     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
14379 //     * @method
14380 //     */
14381 //    clearInvalid : Roo.emptyFn,
14382
14383     setValue : function(v){
14384         Roo.bootstrap.HtmlEditor.superclass.setValue.call(this, v);
14385         this.editorcore.pushValue();
14386     },
14387
14388
14389     // private
14390     deferFocus : function(){
14391         this.focus.defer(10, this);
14392     },
14393
14394     // doc'ed in Field
14395     focus : function(){
14396         this.editorcore.focus();
14397
14398     },
14399
14400
14401     // private
14402     onDestroy : function(){
14403
14404
14405
14406         if(this.rendered){
14407
14408             for (var i =0; i < this.toolbars.length;i++) {
14409                 // fixme - ask toolbars for heights?
14410                 this.toolbars[i].onDestroy();
14411             }
14412
14413             this.wrap.dom.innerHTML = '';
14414             this.wrap.remove();
14415         }
14416     },
14417
14418     // private
14419     onFirstFocus : function(){
14420         //Roo.log("onFirstFocus");
14421         this.editorcore.onFirstFocus();
14422          for (var i =0; i < this.toolbars.length;i++) {
14423             this.toolbars[i].onFirstFocus();
14424         }
14425
14426     },
14427
14428     // private
14429     syncValue : function()
14430     {
14431         this.editorcore.syncValue();
14432     },
14433
14434     pushValue : function()
14435     {
14436         this.editorcore.pushValue();
14437     }
14438
14439
14440     // hide stuff that is not compatible
14441     /**
14442      * @event blur
14443      * @hide
14444      */
14445     /**
14446      * @event change
14447      * @hide
14448      */
14449     /**
14450      * @event focus
14451      * @hide
14452      */
14453     /**
14454      * @event specialkey
14455      * @hide
14456      */
14457     /**
14458      * @cfg {String} fieldClass @hide
14459      */
14460     /**
14461      * @cfg {String} focusClass @hide
14462      */
14463     /**
14464      * @cfg {String} autoCreate @hide
14465      */
14466     /**
14467      * @cfg {String} inputType @hide
14468      */
14469     /**
14470      * @cfg {String} invalidClass @hide
14471      */
14472     /**
14473      * @cfg {String} invalidText @hide
14474      */
14475     /**
14476      * @cfg {String} msgFx @hide
14477      */
14478     /**
14479      * @cfg {String} validateOnBlur @hide
14480      */
14481 });
14482
14483
14484
14485
14486
14487
14488
14489 /**
14490  * @class Roo.bootstrap.HtmlEditorToolbar1
14491  * Basic Toolbar
14492  *
14493  * Usage:
14494  *
14495  new Roo.bootstrap.HtmlEditor({
14496     ....
14497     toolbars : [
14498         new Roo.bootstrap.HtmlEditorToolbar1({
14499             disable : { fonts: 1 , format: 1, ..., ... , ...],
14500             btns : [ .... ]
14501         })
14502     }
14503
14504  *
14505  * @cfg {Object} disable List of elements to disable..
14506  * @cfg {Array} btns List of additional buttons.
14507  *
14508  *
14509  * NEEDS Extra CSS?
14510  * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
14511  */
14512
14513 Roo.bootstrap.HtmlEditor.ToolbarStandard = function(config)
14514 {
14515
14516     Roo.apply(this, config);
14517
14518     // default disabled, based on 'good practice'..
14519     this.disable = this.disable || {};
14520     Roo.applyIf(this.disable, {
14521         fontSize : true,
14522         colors : true,
14523         specialElements : true
14524     });
14525     Roo.bootstrap.HtmlEditor.ToolbarStandard.superclass.constructor.call(this, config);
14526
14527     this.editor = config.editor;
14528     this.editorcore = config.editor.editorcore;
14529
14530     this.buttons   = new Roo.util.MixedCollection(false, function(o) { return o.cmd; });
14531
14532     //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
14533     // dont call parent... till later.
14534 }
14535 Roo.extend(Roo.bootstrap.HtmlEditor.ToolbarStandard, Roo.bootstrap.Navbar,  {
14536
14537
14538     bar : true,
14539
14540     editor : false,
14541     editorcore : false,
14542
14543
14544     formats : [
14545         "p" ,
14546         "h1","h2","h3","h4","h5","h6",
14547         "pre", "code",
14548         "abbr", "acronym", "address", "cite", "samp", "var",
14549         'div','span'
14550     ],
14551
14552     onRender : function(ct, position)
14553     {
14554        // Roo.log("Call onRender: " + this.xtype);
14555
14556        Roo.bootstrap.HtmlEditor.ToolbarStandard.superclass.onRender.call(this, ct, position);
14557        Roo.log(this.el);
14558        this.el.dom.style.marginBottom = '0';
14559        var _this = this;
14560        var editorcore = this.editorcore;
14561        var editor= this.editor;
14562
14563        var children = [];
14564        var btn = function(id,cmd , toggle, handler){
14565
14566             var  event = toggle ? 'toggle' : 'click';
14567
14568             var a = {
14569                 size : 'sm',
14570                 xtype: 'Button',
14571                 xns: Roo.bootstrap,
14572                 glyphicon : id,
14573                 cmd : id || cmd,
14574                 enableToggle:toggle !== false,
14575                 //html : 'submit'
14576                 pressed : toggle ? false : null,
14577                 listeners : {}
14578             }
14579             a.listeners[toggle ? 'toggle' : 'click'] = function() {
14580                 handler ? handler.call(_this,this) :_this.onBtnClick.call(_this, cmd ||  id);
14581             }
14582             children.push(a);
14583             return a;
14584        }
14585
14586         var style = {
14587                 xtype: 'Button',
14588                 size : 'sm',
14589                 xns: Roo.bootstrap,
14590                 glyphicon : 'font',
14591                 //html : 'submit'
14592                 menu : {
14593                     xtype: 'Menu',
14594                     xns: Roo.bootstrap,
14595                     items:  []
14596                 }
14597         };
14598         Roo.each(this.formats, function(f) {
14599             style.menu.items.push({
14600                 xtype :'MenuItem',
14601                 xns: Roo.bootstrap,
14602                 html : '<'+ f+' style="margin:2px">'+f +'</'+ f+'>',
14603                 tagname : f,
14604                 listeners : {
14605                     click : function()
14606                     {
14607                         editorcore.insertTag(this.tagname);
14608                         editor.focus();
14609                     }
14610                 }
14611
14612             });
14613         });
14614          children.push(style);
14615
14616
14617         btn('bold',false,true);
14618         btn('italic',false,true);
14619         btn('align-left', 'justifyleft',true);
14620         btn('align-center', 'justifycenter',true);
14621         btn('align-right' , 'justifyright',true);
14622         btn('link', false, false, function(btn) {
14623             //Roo.log("create link?");
14624             var url = prompt(this.createLinkText, this.defaultLinkValue);
14625             if(url && url != 'http:/'+'/'){
14626                 this.editorcore.relayCmd('createlink', url);
14627             }
14628         }),
14629         btn('list','insertunorderedlist',true);
14630         btn('pencil', false,true, function(btn){
14631                 Roo.log(this);
14632
14633                 this.toggleSourceEdit(btn.pressed);
14634         });
14635         /*
14636         var cog = {
14637                 xtype: 'Button',
14638                 size : 'sm',
14639                 xns: Roo.bootstrap,
14640                 glyphicon : 'cog',
14641                 //html : 'submit'
14642                 menu : {
14643                     xtype: 'Menu',
14644                     xns: Roo.bootstrap,
14645                     items:  []
14646                 }
14647         };
14648
14649         cog.menu.items.push({
14650             xtype :'MenuItem',
14651             xns: Roo.bootstrap,
14652             html : Clean styles,
14653             tagname : f,
14654             listeners : {
14655                 click : function()
14656                 {
14657                     editorcore.insertTag(this.tagname);
14658                     editor.focus();
14659                 }
14660             }
14661
14662         });
14663        */
14664
14665
14666        this.xtype = 'Navbar';
14667
14668         for(var i=0;i< children.length;i++) {
14669
14670             this.buttons.add(this.addxtypeChild(children[i]));
14671
14672         }
14673
14674         editor.on('editorevent', this.updateToolbar, this);
14675     },
14676     onBtnClick : function(id)
14677     {
14678        this.editorcore.relayCmd(id);
14679        this.editorcore.focus();
14680     },
14681
14682     /**
14683      * Protected method that will not generally be called directly. It triggers
14684      * a toolbar update by reading the markup state of the current selection in the editor.
14685      */
14686     updateToolbar: function(){
14687
14688         if(!this.editorcore.activated){
14689             this.editor.onFirstFocus(); // is this neeed?
14690             return;
14691         }
14692
14693         var btns = this.buttons;
14694         var doc = this.editorcore.doc;
14695         btns.get('bold').setActive(doc.queryCommandState('bold'));
14696         btns.get('italic').setActive(doc.queryCommandState('italic'));
14697         //btns.get('underline').setActive(doc.queryCommandState('underline'));
14698
14699         btns.get('align-left').setActive(doc.queryCommandState('justifyleft'));
14700         btns.get('align-center').setActive(doc.queryCommandState('justifycenter'));
14701         btns.get('align-right').setActive(doc.queryCommandState('justifyright'));
14702
14703         //btns[frameId + '-insertorderedlist').setActive(doc.queryCommandState('insertorderedlist'));
14704         btns.get('list').setActive(doc.queryCommandState('insertunorderedlist'));
14705          /*
14706
14707         var ans = this.editorcore.getAllAncestors();
14708         if (this.formatCombo) {
14709
14710
14711             var store = this.formatCombo.store;
14712             this.formatCombo.setValue("");
14713             for (var i =0; i < ans.length;i++) {
14714                 if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
14715                     // select it..
14716                     this.formatCombo.setValue(ans[i].tagName.toLowerCase());
14717                     break;
14718                 }
14719             }
14720         }
14721
14722
14723
14724         // hides menus... - so this cant be on a menu...
14725         Roo.bootstrap.MenuMgr.hideAll();
14726         */
14727         Roo.bootstrap.MenuMgr.hideAll();
14728         //this.editorsyncValue();
14729     },
14730     onFirstFocus: function() {
14731         this.buttons.each(function(item){
14732            item.enable();
14733         });
14734     },
14735     toggleSourceEdit : function(sourceEditMode){
14736
14737
14738         if(sourceEditMode){
14739             Roo.log("disabling buttons");
14740            this.buttons.each( function(item){
14741                 if(item.cmd != 'pencil'){
14742                     item.disable();
14743                 }
14744             });
14745
14746         }else{
14747             Roo.log("enabling buttons");
14748             if(this.editorcore.initialized){
14749                 this.buttons.each( function(item){
14750                     item.enable();
14751                 });
14752             }
14753
14754         }
14755         Roo.log("calling toggole on editor");
14756         // tell the editor that it's been pressed..
14757         this.editor.toggleSourceEdit(sourceEditMode);
14758
14759     }
14760 });
14761
14762
14763
14764
14765
14766 /**
14767  * @class Roo.bootstrap.Table.AbstractSelectionModel
14768  * @extends Roo.util.Observable
14769  * Abstract base class for grid SelectionModels.  It provides the interface that should be
14770  * implemented by descendant classes.  This class should not be directly instantiated.
14771  * @constructor
14772  */
14773 Roo.bootstrap.Table.AbstractSelectionModel = function(){
14774     this.locked = false;
14775     Roo.bootstrap.Table.AbstractSelectionModel.superclass.constructor.call(this);
14776 };
14777
14778
14779 Roo.extend(Roo.bootstrap.Table.AbstractSelectionModel, Roo.util.Observable,  {
14780     /** @ignore Called by the grid automatically. Do not call directly. */
14781     init : function(grid){
14782         this.grid = grid;
14783         this.initEvents();
14784     },
14785
14786     /**
14787      * Locks the selections.
14788      */
14789     lock : function(){
14790         this.locked = true;
14791     },
14792
14793     /**
14794      * Unlocks the selections.
14795      */
14796     unlock : function(){
14797         this.locked = false;
14798     },
14799
14800     /**
14801      * Returns true if the selections are locked.
14802      * @return {Boolean}
14803      */
14804     isLocked : function(){
14805         return this.locked;
14806     }
14807 });
14808 /**
14809  * @class Roo.bootstrap.Table.ColumnModel
14810  * @extends Roo.util.Observable
14811  * This is the default implementation of a ColumnModel used by the bootstrap table. It defines
14812  * the columns in the table.
14813
14814  * @constructor
14815  * @param {Object} config An Array of column config objects. See this class's
14816  * config objects for details.
14817 */
14818 Roo.bootstrap.Table.ColumnModel = function(config){
14819         /**
14820      * The config passed into the constructor
14821      */
14822     this.config = config;
14823     this.lookup = {};
14824
14825     // if no id, create one
14826     // if the column does not have a dataIndex mapping,
14827     // map it to the order it is in the config
14828     for(var i = 0, len = config.length; i < len; i++){
14829         var c = config[i];
14830         if(typeof c.dataIndex == "undefined"){
14831             c.dataIndex = i;
14832         }
14833         if(typeof c.renderer == "string"){
14834             c.renderer = Roo.util.Format[c.renderer];
14835         }
14836         if(typeof c.id == "undefined"){
14837             c.id = Roo.id();
14838         }
14839 //        if(c.editor && c.editor.xtype){
14840 //            c.editor  = Roo.factory(c.editor, Roo.grid);
14841 //        }
14842 //        if(c.editor && c.editor.isFormField){
14843 //            c.editor = new Roo.grid.GridEditor(c.editor);
14844 //        }
14845
14846         this.lookup[c.id] = c;
14847     }
14848
14849     /**
14850      * The width of columns which have no width specified (defaults to 100)
14851      * @type Number
14852      */
14853     this.defaultWidth = 100;
14854
14855     /**
14856      * Default sortable of columns which have no sortable specified (defaults to false)
14857      * @type Boolean
14858      */
14859     this.defaultSortable = false;
14860
14861     this.addEvents({
14862         /**
14863              * @event widthchange
14864              * Fires when the width of a column changes.
14865              * @param {ColumnModel} this
14866              * @param {Number} columnIndex The column index
14867              * @param {Number} newWidth The new width
14868              */
14869             "widthchange": true,
14870         /**
14871              * @event headerchange
14872              * Fires when the text of a header changes.
14873              * @param {ColumnModel} this
14874              * @param {Number} columnIndex The column index
14875              * @param {Number} newText The new header text
14876              */
14877             "headerchange": true,
14878         /**
14879              * @event hiddenchange
14880              * Fires when a column is hidden or "unhidden".
14881              * @param {ColumnModel} this
14882              * @param {Number} columnIndex The column index
14883              * @param {Boolean} hidden true if hidden, false otherwise
14884              */
14885             "hiddenchange": true,
14886             /**
14887          * @event columnmoved
14888          * Fires when a column is moved.
14889          * @param {ColumnModel} this
14890          * @param {Number} oldIndex
14891          * @param {Number} newIndex
14892          */
14893         "columnmoved" : true,
14894         /**
14895          * @event columlockchange
14896          * Fires when a column's locked state is changed
14897          * @param {ColumnModel} this
14898          * @param {Number} colIndex
14899          * @param {Boolean} locked true if locked
14900          */
14901         "columnlockchange" : true
14902     });
14903     Roo.bootstrap.Table.ColumnModel.superclass.constructor.call(this);
14904 };
14905 Roo.extend(Roo.bootstrap.Table.ColumnModel, Roo.util.Observable, {
14906     /**
14907      * @cfg {String} header The header text to display in the Grid view.
14908      */
14909     /**
14910      * @cfg {String} dataIndex (Optional) The name of the field in the grid's {@link Roo.data.Store}'s
14911      * {@link Roo.data.Record} definition from which to draw the column's value. If not
14912      * specified, the column's index is used as an index into the Record's data Array.
14913      */
14914     /**
14915      * @cfg {Number} width (Optional) The initial width in pixels of the column. Using this
14916      * instead of {@link Roo.grid.Grid#autoSizeColumns} is more efficient.
14917      */
14918     /**
14919      * @cfg {Boolean} sortable (Optional) True if sorting is to be allowed on this column.
14920      * Defaults to the value of the {@link #defaultSortable} property.
14921      * Whether local/remote sorting is used is specified in {@link Roo.data.Store#remoteSort}.
14922      */
14923     /**
14924      * @cfg {Boolean} locked (Optional) True to lock the column in place while scrolling the Grid.  Defaults to false.
14925      */
14926     /**
14927      * @cfg {Boolean} fixed (Optional) True if the column width cannot be changed.  Defaults to false.
14928      */
14929     /**
14930      * @cfg {Boolean} resizable (Optional) False to disable column resizing. Defaults to true.
14931      */
14932     /**
14933      * @cfg {Boolean} hidden (Optional) True to hide the column. Defaults to false.
14934      */
14935     /**
14936      * @cfg {Function} renderer (Optional) A function used to generate HTML markup for a cell
14937      * given the cell's data value. See {@link #setRenderer}. If not specified, the
14938      * default renderer uses the raw data value.
14939      */
14940     /**
14941      * @cfg {String} align (Optional) Set the CSS text-align property of the column.  Defaults to undefined.
14942      */
14943
14944     /**
14945      * Returns the id of the column at the specified index.
14946      * @param {Number} index The column index
14947      * @return {String} the id
14948      */
14949     getColumnId : function(index){
14950         return this.config[index].id;
14951     },
14952
14953     /**
14954      * Returns the column for a specified id.
14955      * @param {String} id The column id
14956      * @return {Object} the column
14957      */
14958     getColumnById : function(id){
14959         return this.lookup[id];
14960     },
14961
14962
14963     /**
14964      * Returns the column for a specified dataIndex.
14965      * @param {String} dataIndex The column dataIndex
14966      * @return {Object|Boolean} the column or false if not found
14967      */
14968     getColumnByDataIndex: function(dataIndex){
14969         var index = this.findColumnIndex(dataIndex);
14970         return index > -1 ? this.config[index] : false;
14971     },
14972
14973     /**
14974      * Returns the index for a specified column id.
14975      * @param {String} id The column id
14976      * @return {Number} the index, or -1 if not found
14977      */
14978     getIndexById : function(id){
14979         for(var i = 0, len = this.config.length; i < len; i++){
14980             if(this.config[i].id == id){
14981                 return i;
14982             }
14983         }
14984         return -1;
14985     },
14986
14987     /**
14988      * Returns the index for a specified column dataIndex.
14989      * @param {String} dataIndex The column dataIndex
14990      * @return {Number} the index, or -1 if not found
14991      */
14992
14993     findColumnIndex : function(dataIndex){
14994         for(var i = 0, len = this.config.length; i < len; i++){
14995             if(this.config[i].dataIndex == dataIndex){
14996                 return i;
14997             }
14998         }
14999         return -1;
15000     },
15001
15002
15003     moveColumn : function(oldIndex, newIndex){
15004         var c = this.config[oldIndex];
15005         this.config.splice(oldIndex, 1);
15006         this.config.splice(newIndex, 0, c);
15007         this.dataMap = null;
15008         this.fireEvent("columnmoved", this, oldIndex, newIndex);
15009     },
15010
15011     isLocked : function(colIndex){
15012         return this.config[colIndex].locked === true;
15013     },
15014
15015     setLocked : function(colIndex, value, suppressEvent){
15016         if(this.isLocked(colIndex) == value){
15017             return;
15018         }
15019         this.config[colIndex].locked = value;
15020         if(!suppressEvent){
15021             this.fireEvent("columnlockchange", this, colIndex, value);
15022         }
15023     },
15024
15025     getTotalLockedWidth : function(){
15026         var totalWidth = 0;
15027         for(var i = 0; i < this.config.length; i++){
15028             if(this.isLocked(i) && !this.isHidden(i)){
15029                 this.totalWidth += this.getColumnWidth(i);
15030             }
15031         }
15032         return totalWidth;
15033     },
15034
15035     getLockedCount : function(){
15036         for(var i = 0, len = this.config.length; i < len; i++){
15037             if(!this.isLocked(i)){
15038                 return i;
15039             }
15040         }
15041     },
15042
15043     /**
15044      * Returns the number of columns.
15045      * @return {Number}
15046      */
15047     getColumnCount : function(visibleOnly){
15048         if(visibleOnly === true){
15049             var c = 0;
15050             for(var i = 0, len = this.config.length; i < len; i++){
15051                 if(!this.isHidden(i)){
15052                     c++;
15053                 }
15054             }
15055             return c;
15056         }
15057         return this.config.length;
15058     },
15059
15060     /**
15061      * Returns the column configs that return true by the passed function that is called with (columnConfig, index)
15062      * @param {Function} fn
15063      * @param {Object} scope (optional)
15064      * @return {Array} result
15065      */
15066     getColumnsBy : function(fn, scope){
15067         var r = [];
15068         for(var i = 0, len = this.config.length; i < len; i++){
15069             var c = this.config[i];
15070             if(fn.call(scope||this, c, i) === true){
15071                 r[r.length] = c;
15072             }
15073         }
15074         return r;
15075     },
15076
15077     /**
15078      * Returns true if the specified column is sortable.
15079      * @param {Number} col The column index
15080      * @return {Boolean}
15081      */
15082     isSortable : function(col){
15083         if(typeof this.config[col].sortable == "undefined"){
15084             return this.defaultSortable;
15085         }
15086         return this.config[col].sortable;
15087     },
15088
15089     /**
15090      * Returns the rendering (formatting) function defined for the column.
15091      * @param {Number} col The column index.
15092      * @return {Function} The function used to render the cell. See {@link #setRenderer}.
15093      */
15094     getRenderer : function(col){
15095         if(!this.config[col].renderer){
15096             return Roo.bootstrap.Table.ColumnModel.defaultRenderer;
15097         }
15098         return this.config[col].renderer;
15099     },
15100
15101     /**
15102      * Sets the rendering (formatting) function for a column.
15103      * @param {Number} col The column index
15104      * @param {Function} fn The function to use to process the cell's raw data
15105      * to return HTML markup for the grid view. The render function is called with
15106      * the following parameters:<ul>
15107      * <li>Data value.</li>
15108      * <li>Cell metadata. An object in which you may set the following attributes:<ul>
15109      * <li>css A CSS style string to apply to the table cell.</li>
15110      * <li>attr An HTML attribute definition string to apply to the data container element <i>within</i> the table cell.</li></ul>
15111      * <li>The {@link Roo.data.Record} from which the data was extracted.</li>
15112      * <li>Row index</li>
15113      * <li>Column index</li>
15114      * <li>The {@link Roo.data.Store} object from which the Record was extracted</li></ul>
15115      */
15116     setRenderer : function(col, fn){
15117         this.config[col].renderer = fn;
15118     },
15119
15120     /**
15121      * Returns the width for the specified column.
15122      * @param {Number} col The column index
15123      * @return {Number}
15124      */
15125     getColumnWidth : function(col){
15126         return this.config[col].width * 1 || this.defaultWidth;
15127     },
15128
15129     /**
15130      * Sets the width for a column.
15131      * @param {Number} col The column index
15132      * @param {Number} width The new width
15133      */
15134     setColumnWidth : function(col, width, suppressEvent){
15135         this.config[col].width = width;
15136         this.totalWidth = null;
15137         if(!suppressEvent){
15138              this.fireEvent("widthchange", this, col, width);
15139         }
15140     },
15141
15142     /**
15143      * Returns the total width of all columns.
15144      * @param {Boolean} includeHidden True to include hidden column widths
15145      * @return {Number}
15146      */
15147     getTotalWidth : function(includeHidden){
15148         if(!this.totalWidth){
15149             this.totalWidth = 0;
15150             for(var i = 0, len = this.config.length; i < len; i++){
15151                 if(includeHidden || !this.isHidden(i)){
15152                     this.totalWidth += this.getColumnWidth(i);
15153                 }
15154             }
15155         }
15156         return this.totalWidth;
15157     },
15158
15159     /**
15160      * Returns the header for the specified column.
15161      * @param {Number} col The column index
15162      * @return {String}
15163      */
15164     getColumnHeader : function(col){
15165         return this.config[col].header;
15166     },
15167
15168     /**
15169      * Sets the header for a column.
15170      * @param {Number} col The column index
15171      * @param {String} header The new header
15172      */
15173     setColumnHeader : function(col, header){
15174         this.config[col].header = header;
15175         this.fireEvent("headerchange", this, col, header);
15176     },
15177
15178     /**
15179      * Returns the tooltip for the specified column.
15180      * @param {Number} col The column index
15181      * @return {String}
15182      */
15183     getColumnTooltip : function(col){
15184             return this.config[col].tooltip;
15185     },
15186     /**
15187      * Sets the tooltip for a column.
15188      * @param {Number} col The column index
15189      * @param {String} tooltip The new tooltip
15190      */
15191     setColumnTooltip : function(col, tooltip){
15192             this.config[col].tooltip = tooltip;
15193     },
15194
15195     /**
15196      * Returns the dataIndex for the specified column.
15197      * @param {Number} col The column index
15198      * @return {Number}
15199      */
15200     getDataIndex : function(col){
15201         return this.config[col].dataIndex;
15202     },
15203
15204     /**
15205      * Sets the dataIndex for a column.
15206      * @param {Number} col The column index
15207      * @param {Number} dataIndex The new dataIndex
15208      */
15209     setDataIndex : function(col, dataIndex){
15210         this.config[col].dataIndex = dataIndex;
15211     },
15212
15213
15214
15215     /**
15216      * Returns true if the cell is editable.
15217      * @param {Number} colIndex The column index
15218      * @param {Number} rowIndex The row index
15219      * @return {Boolean}
15220      */
15221     isCellEditable : function(colIndex, rowIndex){
15222         return (this.config[colIndex].editable || (typeof this.config[colIndex].editable == "undefined" && this.config[colIndex].editor)) ? true : false;
15223     },
15224
15225     /**
15226      * Returns the editor defined for the cell/column.
15227      * return false or null to disable editing.
15228      * @param {Number} colIndex The column index
15229      * @param {Number} rowIndex The row index
15230      * @return {Object}
15231      */
15232     getCellEditor : function(colIndex, rowIndex){
15233         return this.config[colIndex].editor;
15234     },
15235
15236     /**
15237      * Sets if a column is editable.
15238      * @param {Number} col The column index
15239      * @param {Boolean} editable True if the column is editable
15240      */
15241     setEditable : function(col, editable){
15242         this.config[col].editable = editable;
15243     },
15244
15245
15246     /**
15247      * Returns true if the column is hidden.
15248      * @param {Number} colIndex The column index
15249      * @return {Boolean}
15250      */
15251     isHidden : function(colIndex){
15252         return this.config[colIndex].hidden;
15253     },
15254
15255
15256     /**
15257      * Returns true if the column width cannot be changed
15258      */
15259     isFixed : function(colIndex){
15260         return this.config[colIndex].fixed;
15261     },
15262
15263     /**
15264      * Returns true if the column can be resized
15265      * @return {Boolean}
15266      */
15267     isResizable : function(colIndex){
15268         return colIndex >= 0 && this.config[colIndex].resizable !== false && this.config[colIndex].fixed !== true;
15269     },
15270     /**
15271      * Sets if a column is hidden.
15272      * @param {Number} colIndex The column index
15273      * @param {Boolean} hidden True if the column is hidden
15274      */
15275     setHidden : function(colIndex, hidden){
15276         this.config[colIndex].hidden = hidden;
15277         this.totalWidth = null;
15278         this.fireEvent("hiddenchange", this, colIndex, hidden);
15279     },
15280
15281     /**
15282      * Sets the editor for a column.
15283      * @param {Number} col The column index
15284      * @param {Object} editor The editor object
15285      */
15286     setEditor : function(col, editor){
15287         this.config[col].editor = editor;
15288     }
15289 });
15290
15291 Roo.bootstrap.Table.ColumnModel.defaultRenderer = function(value){
15292         if(typeof value == "string" && value.length < 1){
15293             return "&#160;";
15294         }
15295         return value;
15296 };
15297
15298 // Alias for backwards compatibility
15299 Roo.bootstrap.Table.DefaultColumnModel = Roo.bootstrap.Table.ColumnModel;
15300
15301 /**
15302  * @extends Roo.bootstrap.Table.AbstractSelectionModel
15303  * @class Roo.bootstrap.Table.RowSelectionModel
15304  * The default SelectionModel used by {@link Roo.bootstrap.Table}.
15305  * It supports multiple selections and keyboard selection/navigation.
15306  * @constructor
15307  * @param {Object} config
15308  */
15309
15310 Roo.bootstrap.Table.RowSelectionModel = function(config){
15311     Roo.apply(this, config);
15312     this.selections = new Roo.util.MixedCollection(false, function(o){
15313         return o.id;
15314     });
15315
15316     this.last = false;
15317     this.lastActive = false;
15318
15319     this.addEvents({
15320         /**
15321              * @event selectionchange
15322              * Fires when the selection changes
15323              * @param {SelectionModel} this
15324              */
15325             "selectionchange" : true,
15326         /**
15327              * @event afterselectionchange
15328              * Fires after the selection changes (eg. by key press or clicking)
15329              * @param {SelectionModel} this
15330              */
15331             "afterselectionchange" : true,
15332         /**
15333              * @event beforerowselect
15334              * Fires when a row is selected being selected, return false to cancel.
15335              * @param {SelectionModel} this
15336              * @param {Number} rowIndex The selected index
15337              * @param {Boolean} keepExisting False if other selections will be cleared
15338              */
15339             "beforerowselect" : true,
15340         /**
15341              * @event rowselect
15342              * Fires when a row is selected.
15343              * @param {SelectionModel} this
15344              * @param {Number} rowIndex The selected index
15345              * @param {Roo.data.Record} r The record
15346              */
15347             "rowselect" : true,
15348         /**
15349              * @event rowdeselect
15350              * Fires when a row is deselected.
15351              * @param {SelectionModel} this
15352              * @param {Number} rowIndex The selected index
15353              */
15354         "rowdeselect" : true
15355     });
15356     Roo.bootstrap.Table.RowSelectionModel.superclass.constructor.call(this);
15357     this.locked = false;
15358 };
15359
15360 Roo.extend(Roo.bootstrap.Table.RowSelectionModel, Roo.bootstrap.Table.AbstractSelectionModel,  {
15361     /**
15362      * @cfg {Boolean} singleSelect
15363      * True to allow selection of only one row at a time (defaults to false)
15364      */
15365     singleSelect : false,
15366
15367     // private
15368     initEvents : function(){
15369
15370         if(!this.grid.enableDragDrop && !this.grid.enableDrag){
15371             this.grid.on("mousedown", this.handleMouseDown, this);
15372         }else{ // allow click to work like normal
15373             this.grid.on("rowclick", this.handleDragableRowClick, this);
15374         }
15375
15376         this.rowNav = new Roo.KeyNav(this.grid.getGridEl(), {
15377             "up" : function(e){
15378                 if(!e.shiftKey){
15379                     this.selectPrevious(e.shiftKey);
15380                 }else if(this.last !== false && this.lastActive !== false){
15381                     var last = this.last;
15382                     this.selectRange(this.last,  this.lastActive-1);
15383                     this.grid.getView().focusRow(this.lastActive);
15384                     if(last !== false){
15385                         this.last = last;
15386                     }
15387                 }else{
15388                     this.selectFirstRow();
15389                 }
15390                 this.fireEvent("afterselectionchange", this);
15391             },
15392             "down" : function(e){
15393                 if(!e.shiftKey){
15394                     this.selectNext(e.shiftKey);
15395                 }else if(this.last !== false && this.lastActive !== false){
15396                     var last = this.last;
15397                     this.selectRange(this.last,  this.lastActive+1);
15398                     this.grid.getView().focusRow(this.lastActive);
15399                     if(last !== false){
15400                         this.last = last;
15401                     }
15402                 }else{
15403                     this.selectFirstRow();
15404                 }
15405                 this.fireEvent("afterselectionchange", this);
15406             },
15407             scope: this
15408         });
15409
15410         var view = this.grid.view;
15411         view.on("refresh", this.onRefresh, this);
15412         view.on("rowupdated", this.onRowUpdated, this);
15413         view.on("rowremoved", this.onRemove, this);
15414     },
15415
15416     // private
15417     onRefresh : function(){
15418         var ds = this.grid.dataSource, i, v = this.grid.view;
15419         var s = this.selections;
15420         s.each(function(r){
15421             if((i = ds.indexOfId(r.id)) != -1){
15422                 v.onRowSelect(i);
15423             }else{
15424                 s.remove(r);
15425             }
15426         });
15427     },
15428
15429     // private
15430     onRemove : function(v, index, r){
15431         this.selections.remove(r);
15432     },
15433
15434     // private
15435     onRowUpdated : function(v, index, r){
15436         if(this.isSelected(r)){
15437             v.onRowSelect(index);
15438         }
15439     },
15440
15441     /**
15442      * Select records.
15443      * @param {Array} records The records to select
15444      * @param {Boolean} keepExisting (optional) True to keep existing selections
15445      */
15446     selectRecords : function(records, keepExisting){
15447         if(!keepExisting){
15448             this.clearSelections();
15449         }
15450         var ds = this.grid.dataSource;
15451         for(var i = 0, len = records.length; i < len; i++){
15452             this.selectRow(ds.indexOf(records[i]), true);
15453         }
15454     },
15455
15456     /**
15457      * Gets the number of selected rows.
15458      * @return {Number}
15459      */
15460     getCount : function(){
15461         return this.selections.length;
15462     },
15463
15464     /**
15465      * Selects the first row in the grid.
15466      */
15467     selectFirstRow : function(){
15468         this.selectRow(0);
15469     },
15470
15471     /**
15472      * Select the last row.
15473      * @param {Boolean} keepExisting (optional) True to keep existing selections
15474      */
15475     selectLastRow : function(keepExisting){
15476         this.selectRow(this.grid.dataSource.getCount() - 1, keepExisting);
15477     },
15478
15479     /**
15480      * Selects the row immediately following the last selected row.
15481      * @param {Boolean} keepExisting (optional) True to keep existing selections
15482      */
15483     selectNext : function(keepExisting){
15484         if(this.last !== false && (this.last+1) < this.grid.dataSource.getCount()){
15485             this.selectRow(this.last+1, keepExisting);
15486             this.grid.getView().focusRow(this.last);
15487         }
15488     },
15489
15490     /**
15491      * Selects the row that precedes the last selected row.
15492      * @param {Boolean} keepExisting (optional) True to keep existing selections
15493      */
15494     selectPrevious : function(keepExisting){
15495         if(this.last){
15496             this.selectRow(this.last-1, keepExisting);
15497             this.grid.getView().focusRow(this.last);
15498         }
15499     },
15500
15501     /**
15502      * Returns the selected records
15503      * @return {Array} Array of selected records
15504      */
15505     getSelections : function(){
15506         return [].concat(this.selections.items);
15507     },
15508
15509     /**
15510      * Returns the first selected record.
15511      * @return {Record}
15512      */
15513     getSelected : function(){
15514         return this.selections.itemAt(0);
15515     },
15516
15517
15518     /**
15519      * Clears all selections.
15520      */
15521     clearSelections : function(fast){
15522         if(this.locked) return;
15523         if(fast !== true){
15524             var ds = this.grid.dataSource;
15525             var s = this.selections;
15526             s.each(function(r){
15527                 this.deselectRow(ds.indexOfId(r.id));
15528             }, this);
15529             s.clear();
15530         }else{
15531             this.selections.clear();
15532         }
15533         this.last = false;
15534     },
15535
15536
15537     /**
15538      * Selects all rows.
15539      */
15540     selectAll : function(){
15541         if(this.locked) return;
15542         this.selections.clear();
15543         for(var i = 0, len = this.grid.dataSource.getCount(); i < len; i++){
15544             this.selectRow(i, true);
15545         }
15546     },
15547
15548     /**
15549      * Returns True if there is a selection.
15550      * @return {Boolean}
15551      */
15552     hasSelection : function(){
15553         return this.selections.length > 0;
15554     },
15555
15556     /**
15557      * Returns True if the specified row is selected.
15558      * @param {Number/Record} record The record or index of the record to check
15559      * @return {Boolean}
15560      */
15561     isSelected : function(index){
15562         var r = typeof index == "number" ? this.grid.dataSource.getAt(index) : index;
15563         return (r && this.selections.key(r.id) ? true : false);
15564     },
15565
15566     /**
15567      * Returns True if the specified record id is selected.
15568      * @param {String} id The id of record to check
15569      * @return {Boolean}
15570      */
15571     isIdSelected : function(id){
15572         return (this.selections.key(id) ? true : false);
15573     },
15574
15575     // private
15576     handleMouseDown : function(e, t){
15577         var view = this.grid.getView(), rowIndex;
15578         if(this.isLocked() || (rowIndex = view.findRowIndex(t)) === false){
15579             return;
15580         };
15581         if(e.shiftKey && this.last !== false){
15582             var last = this.last;
15583             this.selectRange(last, rowIndex, e.ctrlKey);
15584             this.last = last; // reset the last
15585             view.focusRow(rowIndex);
15586         }else{
15587             var isSelected = this.isSelected(rowIndex);
15588             if(e.button !== 0 && isSelected){
15589                 view.focusRow(rowIndex);
15590             }else if(e.ctrlKey && isSelected){
15591                 this.deselectRow(rowIndex);
15592             }else if(!isSelected){
15593                 this.selectRow(rowIndex, e.button === 0 && (e.ctrlKey || e.shiftKey));
15594                 view.focusRow(rowIndex);
15595             }
15596         }
15597         this.fireEvent("afterselectionchange", this);
15598     },
15599     // private
15600     handleDragableRowClick :  function(grid, rowIndex, e)
15601     {
15602         if(e.button === 0 && !e.shiftKey && !e.ctrlKey) {
15603             this.selectRow(rowIndex, false);
15604             grid.view.focusRow(rowIndex);
15605              this.fireEvent("afterselectionchange", this);
15606         }
15607     },
15608
15609     /**
15610      * Selects multiple rows.
15611      * @param {Array} rows Array of the indexes of the row to select
15612      * @param {Boolean} keepExisting (optional) True to keep existing selections
15613      */
15614     selectRows : function(rows, keepExisting){
15615         if(!keepExisting){
15616             this.clearSelections();
15617         }
15618         for(var i = 0, len = rows.length; i < len; i++){
15619             this.selectRow(rows[i], true);
15620         }
15621     },
15622
15623     /**
15624      * Selects a range of rows. All rows in between startRow and endRow are also selected.
15625      * @param {Number} startRow The index of the first row in the range
15626      * @param {Number} endRow The index of the last row in the range
15627      * @param {Boolean} keepExisting (optional) True to retain existing selections
15628      */
15629     selectRange : function(startRow, endRow, keepExisting){
15630         if(this.locked) return;
15631         if(!keepExisting){
15632             this.clearSelections();
15633         }
15634         if(startRow <= endRow){
15635             for(var i = startRow; i <= endRow; i++){
15636                 this.selectRow(i, true);
15637             }
15638         }else{
15639             for(var i = startRow; i >= endRow; i--){
15640                 this.selectRow(i, true);
15641             }
15642         }
15643     },
15644
15645     /**
15646      * Deselects a range of rows. All rows in between startRow and endRow are also deselected.
15647      * @param {Number} startRow The index of the first row in the range
15648      * @param {Number} endRow The index of the last row in the range
15649      */
15650     deselectRange : function(startRow, endRow, preventViewNotify){
15651         if(this.locked) return;
15652         for(var i = startRow; i <= endRow; i++){
15653             this.deselectRow(i, preventViewNotify);
15654         }
15655     },
15656
15657     /**
15658      * Selects a row.
15659      * @param {Number} row The index of the row to select
15660      * @param {Boolean} keepExisting (optional) True to keep existing selections
15661      */
15662     selectRow : function(index, keepExisting, preventViewNotify){
15663         if(this.locked || (index < 0 || index >= this.grid.dataSource.getCount())) return;
15664         if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){
15665             if(!keepExisting || this.singleSelect){
15666                 this.clearSelections();
15667             }
15668             var r = this.grid.dataSource.getAt(index);
15669             this.selections.add(r);
15670             this.last = this.lastActive = index;
15671             if(!preventViewNotify){
15672                 this.grid.getView().onRowSelect(index);
15673             }
15674             this.fireEvent("rowselect", this, index, r);
15675             this.fireEvent("selectionchange", this);
15676         }
15677     },
15678
15679     /**
15680      * Deselects a row.
15681      * @param {Number} row The index of the row to deselect
15682      */
15683     deselectRow : function(index, preventViewNotify){
15684         if(this.locked) return;
15685         if(this.last == index){
15686             this.last = false;
15687         }
15688         if(this.lastActive == index){
15689             this.lastActive = false;
15690         }
15691         var r = this.grid.dataSource.getAt(index);
15692         this.selections.remove(r);
15693         if(!preventViewNotify){
15694             this.grid.getView().onRowDeselect(index);
15695         }
15696         this.fireEvent("rowdeselect", this, index);
15697         this.fireEvent("selectionchange", this);
15698     },
15699
15700     // private
15701     restoreLast : function(){
15702         if(this._last){
15703             this.last = this._last;
15704         }
15705     },
15706
15707     // private
15708     acceptsNav : function(row, col, cm){
15709         return !cm.isHidden(col) && cm.isCellEditable(col, row);
15710     },
15711
15712     // private
15713     onEditorKey : function(field, e){
15714         var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
15715         if(k == e.TAB){
15716             e.stopEvent();
15717             ed.completeEdit();
15718             if(e.shiftKey){
15719                 newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
15720             }else{
15721                 newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
15722             }
15723         }else if(k == e.ENTER && !e.ctrlKey){
15724             e.stopEvent();
15725             ed.completeEdit();
15726             if(e.shiftKey){
15727                 newCell = g.walkCells(ed.row-1, ed.col, -1, this.acceptsNav, this);
15728             }else{
15729                 newCell = g.walkCells(ed.row+1, ed.col, 1, this.acceptsNav, this);
15730             }
15731         }else if(k == e.ESC){
15732             ed.cancelEdit();
15733         }
15734         if(newCell){
15735             g.startEditing(newCell[0], newCell[1]);
15736         }
15737     }
15738 });/*
15739  * - LGPL
15740  *
15741  * element
15742  *
15743  */
15744
15745 /**
15746  * @class Roo.bootstrap.MessageBar
15747  * @extends Roo.bootstrap.Component
15748  * Bootstrap MessageBar class
15749  * @cfg {String} html contents of the MessageBar
15750  * @cfg {String} weight (info | success | warning | danger) default info
15751  * @cfg {String} beforeClass insert the bar before the given class
15752  * @cfg {Boolean} closable (true | false) default false
15753  * @cfg {Boolean} fixed (true | false) default false, fix the bar at the top
15754  *
15755  * @constructor
15756  * Create a new Element
15757  * @param {Object} config The config object
15758  */
15759
15760 Roo.bootstrap.MessageBar = function(config){
15761     Roo.bootstrap.MessageBar.superclass.constructor.call(this, config);
15762 };
15763
15764 Roo.extend(Roo.bootstrap.MessageBar, Roo.bootstrap.Component,  {
15765
15766     html: '',
15767     weight: 'info',
15768     closable: false,
15769     fixed: false,
15770     beforeClass: 'bootstrap-sticky-wrap',
15771
15772     getAutoCreate : function(){
15773
15774         var cfg = {
15775             tag: 'div',
15776             cls: 'alert alert-dismissable alert-' + this.weight,
15777             cn: [
15778                 {
15779                     tag: 'span',
15780                     cls: 'message',
15781                     html: this.html || ''
15782                 }
15783             ]
15784         }
15785
15786         if(this.fixed){
15787             cfg.cls += ' alert-messages-fixed';
15788         }
15789
15790         if(this.closable){
15791             cfg.cn.push({
15792                 tag: 'button',
15793                 cls: 'close',
15794                 html: 'x'
15795             });
15796         }
15797
15798         return cfg;
15799     },
15800
15801     onRender : function(ct, position)
15802     {
15803         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
15804
15805         if(!this.el){
15806             var cfg = Roo.apply({},  this.getAutoCreate());
15807             cfg.id = Roo.id();
15808
15809             if (this.cls) {
15810                 cfg.cls += ' ' + this.cls;
15811             }
15812             if (this.style) {
15813                 cfg.style = this.style;
15814             }
15815             this.el = Roo.get(document.body).createChild(cfg, Roo.select('.'+this.beforeClass, true).first());
15816
15817             this.el.setVisibilityMode(Roo.Element.DISPLAY);
15818         }
15819
15820         this.el.select('>button.close').on('click', this.hide, this);
15821
15822     },
15823
15824     show : function()
15825     {
15826         if (!this.rendered) {
15827             this.render();
15828         }
15829
15830         this.el.show();
15831
15832         this.fireEvent('show', this);
15833
15834     },
15835
15836     hide : function()
15837     {
15838         if (!this.rendered) {
15839             this.render();
15840         }
15841
15842         this.el.hide();
15843
15844         this.fireEvent('hide', this);
15845     },
15846
15847     update : function()
15848     {
15849 //        var e = this.el.dom.firstChild;
15850 //
15851 //        if(this.closable){
15852 //            e = e.nextSibling;
15853 //        }
15854 //
15855 //        e.data = this.html || '';
15856
15857         this.el.select('>.message', true).first().dom.innerHTML = this.html || '';
15858     }
15859
15860 });
15861
15862
15863
15864