git.roojs.org Git - roojs1/blob - Roo/bootstrap/ComboBox.js

   1 /*
   2  * - LGPL
   3  * *
   4  */
   5
   6 /**
   7  * @class Roo.bootstrap.ComboBox
   8  * @extends Roo.bootstrap.TriggerField
   9  * A combobox control with support for autocomplete, remote-loading, paging and many other features.
  10  * @cfg {Boolean} append (true|false) default false
  11  * @cfg {Boolean} autoFocus (true|false) auto focus the first item, default true
  12  * @cfg {Boolean} tickable ComboBox with tickable selections (true|false), default false
  13  * @cfg {Boolean} triggerList trigger show the list or not (true|false) default true
  14  * @cfg {Boolean} showToggleBtn show toggle button or not (true|false) default true
  15  * @cfg {String} btnPosition set the position of the trigger button (left | right) default right
  16  * @cfg {Boolean} animate default true
  17  * @cfg {Boolean} emptyResultText only for touch device
  18  * @cfg {String} triggerText multiple combobox trigger button text default 'Select'
  19  * @constructor
  20  * Create a new ComboBox.
  21  * @param {Object} config Configuration options
  22  */
  23 Roo.bootstrap.ComboBox = function(config){
  24     Roo.bootstrap.ComboBox.superclass.constructor.call(this, config);
  25     this.addEvents({
  26         /**
  27          * @event expand
  28          * Fires when the dropdown list is expanded
  29              * @param {Roo.bootstrap.ComboBox} combo This combo box
  30              */
  31         'expand' : true,
  32         /**
  33          * @event collapse
  34          * Fires when the dropdown list is collapsed
  35              * @param {Roo.bootstrap.ComboBox} combo This combo box
  36              */
  37         'collapse' : true,
  38         /**
  39          * @event beforeselect
  40          * Fires before a list item is selected. Return false to cancel the selection.
  41              * @param {Roo.bootstrap.ComboBox} combo This combo box
  42              * @param {Roo.data.Record} record The data record returned from the underlying store
  43              * @param {Number} index The index of the selected item in the dropdown list
  44              */
  45         'beforeselect' : true,
  46         /**
  47          * @event select
  48          * Fires when a list item is selected
  49              * @param {Roo.bootstrap.ComboBox} combo This combo box
  50              * @param {Roo.data.Record} record The data record returned from the underlying store (or false on clear)
  51              * @param {Number} index The index of the selected item in the dropdown list
  52              */
  53         'select' : true,
  54         /**
  55          * @event beforequery
  56          * Fires before all queries are processed. Return false to cancel the query or set cancel to true.
  57          * The event object passed has these properties:
  58              * @param {Roo.bootstrap.ComboBox} combo This combo box
  59              * @param {String} query The query
  60              * @param {Boolean} forceAll true to force "all" query
  61              * @param {Boolean} cancel true to cancel the query
  62              * @param {Object} e The query event object
  63              */
  64         'beforequery': true,
  65          /**
  66          * @event add
  67          * Fires when the 'add' icon is pressed (add a listener to enable add button)
  68              * @param {Roo.bootstrap.ComboBox} combo This combo box
  69              */
  70         'add' : true,
  71         /**
  72          * @event edit
  73          * Fires when the 'edit' icon is pressed (add a listener to enable add button)
  74              * @param {Roo.bootstrap.ComboBox} combo This combo box
  75              * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
  76              */
  77         'edit' : true,
  78         /**
  79          * @event remove
  80          * Fires when the remove value from the combobox array
  81              * @param {Roo.bootstrap.ComboBox} combo This combo box
  82              */
  83         'remove' : true,
  84         /**
  85          * @event specialfilter
  86          * Fires when specialfilter
  87             * @param {Roo.bootstrap.ComboBox} combo This combo box
  88             */
  89         'specialfilter' : true
  90
  91     });
  92
  93     this.item = [];
  94     this.tickItems = [];
  95
  96     this.selectedIndex = -1;
  97     if(this.mode == 'local'){
  98         if(config.queryDelay === undefined){
  99             this.queryDelay = 10;
 100         }
 101         if(config.minChars === undefined){
 102             this.minChars = 0;
 103         }
 104     }
 105 };
 106
 107 Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
 108
 109     /**
 110      * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
 111      * rendering into an Roo.Editor, defaults to false)
 112      */
 113     /**
 114      * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
 115      * {tag: "input", type: "text", size: "24", autocomplete: "off"})
 116      */
 117     /**
 118      * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
 119      */
 120     /**
 121      * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
 122      * the dropdown list (defaults to undefined, with no header element)
 123      */
 124
 125      /**
 126      * @cfg {String/Roo.Template} tpl The template to use to render the output
 127      */
 128
 129      /**
 130      * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
 131      */
 132     listWidth: undefined,
 133     /**
 134      * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
 135      * mode = 'remote' or 'text' if mode = 'local')
 136      */
 137     displayField: undefined,
 138
 139     /**
 140      * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
 141      * mode = 'remote' or 'value' if mode = 'local').
 142      * Note: use of a valueField requires the user make a selection
 143      * in order for a value to be mapped.
 144      */
 145     valueField: undefined,
 146
 147
 148     /**
 149      * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
 150      * field's data value (defaults to the underlying DOM element's name)
 151      */
 152     hiddenName: undefined,
 153     /**
 154      * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
 155      */
 156     listClass: '',
 157     /**
 158      * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
 159      */
 160     selectedClass: 'active',
 161
 162     /**
 163      * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
 164      */
 165     shadow:'sides',
 166     /**
 167      * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
 168      * anchor positions (defaults to 'tl-bl')
 169      */
 170     listAlign: 'tl-bl?',
 171     /**
 172      * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
 173      */
 174     maxHeight: 300,
 175     /**
 176      * @cfg {String} triggerAction The action to execute when the trigger field is activated.  Use 'all' to run the
 177      * query specified by the allQuery config option (defaults to 'query')
 178      */
 179     triggerAction: 'query',
 180     /**
 181      * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
 182      * (defaults to 4, does not apply if editable = false)
 183      */
 184     minChars : 4,
 185     /**
 186      * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
 187      * delay (typeAheadDelay) if it matches a known value (defaults to false)
 188      */
 189     typeAhead: false,
 190     /**
 191      * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
 192      * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
 193      */
 194     queryDelay: 500,
 195     /**
 196      * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
 197      * filter queries will execute with page start and limit parameters.  Only applies when mode = 'remote' (defaults to 0)
 198      */
 199     pageSize: 0,
 200     /**
 201      * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus.  Only applies
 202      * when editable = true (defaults to false)
 203      */
 204     selectOnFocus:false,
 205     /**
 206      * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
 207      */
 208     queryParam: 'query',
 209     /**
 210      * @cfg {String} loadingText The text to display in the dropdown list while data is loading.  Only applies
 211      * when mode = 'remote' (defaults to 'Loading...')
 212      */
 213     loadingText: 'Loading...',
 214     /**
 215      * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
 216      */
 217     resizable: false,
 218     /**
 219      * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
 220      */
 221     handleHeight : 8,
 222     /**
 223      * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
 224      * traditional select (defaults to true)
 225      */
 226     editable: true,
 227     /**
 228      * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
 229      */
 230     allQuery: '',
 231     /**
 232      * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
 233      */
 234     mode: 'remote',
 235     /**
 236      * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
 237      * listWidth has a higher value)
 238      */
 239     minListWidth : 70,
 240     /**
 241      * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
 242      * allow the user to set arbitrary text into the field (defaults to false)
 243      */
 244     forceSelection:false,
 245     /**
 246      * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
 247      * if typeAhead = true (defaults to 250)
 248      */
 249     typeAheadDelay : 250,
 250     /**
 251      * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
 252      * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
 253      */
 254     valueNotFoundText : undefined,
 255     /**
 256      * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
 257      */
 258     blockFocus : false,
 259
 260     /**
 261      * @cfg {Boolean} disableClear Disable showing of clear button.
 262      */
 263     disableClear : false,
 264     /**
 265      * @cfg {Boolean} alwaysQuery  Disable caching of results, and always send query
 266      */
 267     alwaysQuery : false,
 268
 269     /**
 270      * @cfg {Boolean} multiple  (true|false) ComboBobArray, default false
 271      */
 272     multiple : false,
 273
 274     /**
 275      * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
 276      */
 277     invalidClass : "has-warning",
 278
 279     /**
 280      * @cfg {String} validClass The CSS class to use when marking a field valid (defaults to "x-form-invalid")
 281      */
 282     validClass : "has-success",
 283
 284     /**
 285      * @cfg {Boolean} specialFilter (true|false) special filter default false
 286      */
 287     specialFilter : false,
 288
 289     /**
 290      * @cfg {Boolean} mobileTouchView (true|false) show mobile touch view when using a mobile default true
 291      */
 292     mobileTouchView : true,
 293
 294     //private
 295     addicon : false,
 296     editicon: false,
 297
 298     page: 0,
 299     hasQuery: false,
 300     append: false,
 301     loadNext: false,
 302     autoFocus : true,
 303     tickable : false,
 304     btnPosition : 'right',
 305     triggerList : true,
 306     showToggleBtn : true,
 307     animate : true,
 308     emptyResultText: 'Empty',
 309     triggerText : 'Select',
 310
 311     // element that contains real text value.. (when hidden is used..)
 312
 313     getAutoCreate : function()
 314     {
 315         var cfg = false;
 316
 317         /*
 318          * Touch Devices
 319          */
 320
 321         if(Roo.isTouch && this.mobileTouchView){
 322             cfg = this.getAutoCreateTouchView();
 323             return cfg;;
 324         }
 325
 326         /*
 327          *  Normal ComboBox
 328          */
 329         if(!this.tickable){
 330             cfg = Roo.bootstrap.ComboBox.superclass.getAutoCreate.call(this);
 331             return cfg;
 332         }
 333
 334         /*
 335          *  ComboBox with tickable selections
 336          */
 337
 338         var align = this.labelAlign || this.parentLabelAlign();
 339
 340         cfg = {
 341             cls : 'form-group roo-combobox-tickable' //input-group
 342         };
 343
 344         var buttons = {
 345             tag : 'div',
 346             cls : 'tickable-buttons',
 347             cn : [
 348                 {
 349                     tag : 'button',
 350                     type : 'button',
 351                     cls : 'btn btn-link btn-edit pull-' + this.btnPosition,
 352                     html :
 353                 },
 354                 {
 355                     tag : 'button',
 356                     type : 'button',
 357                     name : 'ok',
 358                     cls : 'btn btn-link btn-ok pull-' + this.btnPosition,
 359                     html : 'Done'
 360                 },
 361                 {
 362                     tag : 'button',
 363                     type : 'button',
 364                     name : 'cancel',
 365                     cls : 'btn btn-link btn-cancel pull-' + this.btnPosition,
 366                     html : 'Cancel'
 367                 }
 368             ]
 369         };
 370
 371         if(this.editable){
 372             buttons.cn.unshift({
 373                 tag: 'input',
 374                 cls: 'select2-search-field-input'
 375             });
 376         }
 377
 378         var _this = this;
 379
 380         Roo.each(buttons.cn, function(c){
 381             if (_this.size) {
 382                 c.cls += ' btn-' + _this.size;
 383             }
 384
 385             if (_this.disabled) {
 386                 c.disabled = true;
 387             }
 388         });
 389
 390         var box = {
 391             tag: 'div',
 392             cn: [
 393                 {
 394                     tag: 'input',
 395                     type : 'hidden',
 396                     cls: 'form-hidden-field'
 397                 },
 398                 {
 399                     tag: 'ul',
 400                     cls: 'select2-choices',
 401                     cn:[
 402                         {
 403                             tag: 'li',
 404                             cls: 'select2-search-field',
 405                             cn: [
 406
 407                                 buttons
 408                             ]
 409                         }
 410                     ]
 411                 }
 412             ]
 413         }
 414
 415         var combobox = {
 416             cls: 'select2-container input-group select2-container-multi',
 417             cn: [
 418                 box
 419 //                {
 420 //                    tag: 'ul',
 421 //                    cls: 'typeahead typeahead-long dropdown-menu',
 422 //                    style: 'display:none; max-height:' + this.maxHeight + 'px;'
 423 //                }
 424             ]
 425         };
 426
 427         if(this.hasFeedback && !this.allowBlank){
 428
 429             var feedback = {
 430                 tag: 'span',
 431                 cls: 'glyphicon form-control-feedback'
 432             };
 433
 434             combobox.cn.push(feedback);
 435         }
 436
 437         if (align ==='left' && this.fieldLabel.length) {
 438
 439                 Roo.log("left and has label");
 440                 cfg.cn = [
 441
 442                     {
 443                         tag: 'label',
 444                         'for' :  id,
 445                         cls : 'control-label col-sm-' + this.labelWidth,
 446                         html : this.fieldLabel
 447
 448                     },
 449                     {
 450                         cls : "col-sm-" + (12 - this.labelWidth),
 451                         cn: [
 452                             combobox
 453                         ]
 454                     }
 455
 456                 ];
 457         } else if ( this.fieldLabel.length) {
 458                 Roo.log(" label");
 459                  cfg.cn = [
 460
 461                     {
 462                         tag: 'label',
 463                         //cls : 'input-group-addon',
 464                         html : this.fieldLabel
 465
 466                     },
 467
 468                     combobox
 469
 470                 ];
 471
 472         } else {
 473
 474                 Roo.log(" no label && no align");
 475                 cfg = combobox
 476
 477
 478         }
 479
 480         var settings=this;
 481         ['xs','sm','md','lg'].map(function(size){
 482             if (settings[size]) {
 483                 cfg.cls += ' col-' + size + '-' + settings[size];
 484             }
 485         });
 486
 487         return cfg;
 488
 489     },
 490
 491     _initEventsCalled : false,
 492
 493     // private
 494     initEvents: function()
 495     {
 496
 497         if (this._initEventsCalled) { // as we call render... prevent looping...
 498             return;
 499         }
 500         this._initEventsCalled = true;
 501
 502         if (!this.store) {
 503             throw "can not find store for combo";
 504         }
 505
 506         this.store = Roo.factory(this.store, Roo.data);
 507
 508         // if we are building from html. then this element is so complex, that we can not really
 509         // use the rendered HTML.
 510         // so we have to trash and replace the previous code.
 511         if (Roo.XComponent.build_from_html) {
 512
 513             // remove this element....
 514             var e = this.el.dom, k=0;
 515             while (e ) { e = e.previousSibling;  ++k;}
 516
 517             this.el.remove();
 518
 519             this.el=false;
 520             this.rendered = false;
 521
 522             this.render(this.parent().getChildContainer(true), k);
 523
 524
 525
 526         }
 527
 528
 529         /*
 530          * Touch Devices
 531          */
 532
 533         if(Roo.isTouch && this.mobileTouchView){
 534             this.initTouchView();
 535             return;
 536         }
 537
 538         if(this.tickable){
 539             this.initTickableEvents();
 540             return;
 541         }
 542
 543         Roo.bootstrap.ComboBox.superclass.initEvents.call(this);
 544
 545         if(this.hiddenName){
 546
 547             this.hiddenField = this.el.select('input.form-hidden-field',true).first();
 548
 549             this.hiddenField.dom.value =
 550                 this.hiddenValue !== undefined ? this.hiddenValue :
 551                 this.value !== undefined ? this.value : '';
 552
 553             // prevent input submission
 554             this.el.dom.removeAttribute('name');
 555             this.hiddenField.dom.setAttribute('name', this.hiddenName);
 556
 557
 558         }
 559         //if(Roo.isGecko){
 560         //    this.el.dom.setAttribute('autocomplete', 'off');
 561         //}
 562
 563         var cls = 'x-combo-list';
 564
 565         //this.list = new Roo.Layer({
 566         //    shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
 567         //});
 568
 569         var _this = this;
 570
 571         (function(){
 572             var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth);
 573             _this.list.setWidth(lw);
 574         }).defer(100);
 575
 576         this.list.on('mouseover', this.onViewOver, this);
 577         this.list.on('mousemove', this.onViewMove, this);
 578
 579         this.list.on('scroll', this.onViewScroll, this);
 580
 581         /*
 582         this.list.swallowEvent('mousewheel');
 583         this.assetHeight = 0;
 584
 585         if(this.title){
 586             this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
 587             this.assetHeight += this.header.getHeight();
 588         }
 589
 590         this.innerList = this.list.createChild({cls:cls+'-inner'});
 591         this.innerList.on('mouseover', this.onViewOver, this);
 592         this.innerList.on('mousemove', this.onViewMove, this);
 593         this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
 594
 595         if(this.allowBlank && !this.pageSize && !this.disableClear){
 596             this.footer = this.list.createChild({cls:cls+'-ft'});
 597             this.pageTb = new Roo.Toolbar(this.footer);
 598
 599         }
 600         if(this.pageSize){
 601             this.footer = this.list.createChild({cls:cls+'-ft'});
 602             this.pageTb = new Roo.PagingToolbar(this.footer, this.store,
 603                     {pageSize: this.pageSize});
 604
 605         }
 606
 607         if (this.pageTb && this.allowBlank && !this.disableClear) {
 608             var _this = this;
 609             this.pageTb.add(new Roo.Toolbar.Fill(), {
 610                 cls: 'x-btn-icon x-btn-clear',
 611                 text: '&#160;',
 612                 handler: function()
 613                 {
 614                     _this.collapse();
 615                     _this.clearValue();
 616                     _this.onSelect(false, -1);
 617                 }
 618             });
 619         }
 620         if (this.footer) {
 621             this.assetHeight += this.footer.getHeight();
 622         }
 623         */
 624
 625         if(!this.tpl){
 626             this.tpl = '<li><a href="#">{' + this.displayField + '}</a></li>';
 627         }
 628
 629         this.view = new Roo.View(this.list, this.tpl, {
 630             singleSelect:true, store: this.store, selectedClass: this.selectedClass
 631         });
 632         //this.view.wrapEl.setDisplayed(false);
 633         this.view.on('click', this.onViewClick, this);
 634
 635
 636
 637         this.store.on('beforeload', this.onBeforeLoad, this);
 638         this.store.on('load', this.onLoad, this);
 639         this.store.on('loadexception', this.onLoadException, this);
 640         /*
 641         if(this.resizable){
 642             this.resizer = new Roo.Resizable(this.list,  {
 643                pinned:true, handles:'se'
 644             });
 645             this.resizer.on('resize', function(r, w, h){
 646                 this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
 647                 this.listWidth = w;
 648                 this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
 649                 this.restrictHeight();
 650             }, this);
 651             this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
 652         }
 653         */
 654         if(!this.editable){
 655             this.editable = true;
 656             this.setEditable(false);
 657         }
 658
 659         /*
 660
 661         if (typeof(this.events.add.listeners) != 'undefined') {
 662
 663             this.addicon = this.wrap.createChild(
 664                 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-add' });
 665
 666             this.addicon.on('click', function(e) {
 667                 this.fireEvent('add', this);
 668             }, this);
 669         }
 670         if (typeof(this.events.edit.listeners) != 'undefined') {
 671
 672             this.editicon = this.wrap.createChild(
 673                 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-edit' });
 674             if (this.addicon) {
 675                 this.editicon.setStyle('margin-left', '40px');
 676             }
 677             this.editicon.on('click', function(e) {
 678
 679                 // we fire even  if inothing is selected..
 680                 this.fireEvent('edit', this, this.lastData );
 681
 682             }, this);
 683         }
 684         */
 685
 686         this.keyNav = new Roo.KeyNav(this.inputEl(), {
 687             "up" : function(e){
 688                 this.inKeyMode = true;
 689                 this.selectPrev();
 690             },
 691
 692             "down" : function(e){
 693                 if(!this.isExpanded()){
 694                     this.onTriggerClick();
 695                 }else{
 696                     this.inKeyMode = true;
 697                     this.selectNext();
 698                 }
 699             },
 700
 701             "enter" : function(e){
 702 //                this.onViewClick();
 703                 //return true;
 704                 this.collapse();
 705
 706                 if(this.fireEvent("specialkey", this, e)){
 707                     this.onViewClick(false);
 708                 }
 709
 710                 return true;
 711             },
 712
 713             "esc" : function(e){
 714                 this.collapse();
 715             },
 716
 717             "tab" : function(e){
 718                 this.collapse();
 719
 720                 if(this.fireEvent("specialkey", this, e)){
 721                     this.onViewClick(false);
 722                 }
 723
 724                 return true;
 725             },
 726
 727             scope : this,
 728
 729             doRelay : function(foo, bar, hname){
 730                 if(hname == 'down' || this.scope.isExpanded()){
 731                    return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
 732                 }
 733                 return true;
 734             },
 735
 736             forceKeyDown: true
 737         });
 738
 739
 740         this.queryDelay = Math.max(this.queryDelay || 10,
 741                 this.mode == 'local' ? 10 : 250);
 742
 743
 744         this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
 745
 746         if(this.typeAhead){
 747             this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
 748         }
 749         if(this.editable !== false){
 750             this.inputEl().on("keyup", this.onKeyUp, this);
 751         }
 752         if(this.forceSelection){
 753             this.inputEl().on('blur', this.doForce, this);
 754         }
 755
 756         if(this.multiple){
 757             this.choices = this.el.select('ul.select2-choices', true).first();
 758             this.searchField = this.el.select('ul li.select2-search-field', true).first();
 759         }
 760     },
 761
 762     initTickableEvents: function()
 763     {
 764         this.createList();
 765
 766         if(this.hiddenName){
 767
 768             this.hiddenField = this.el.select('input.form-hidden-field',true).first();
 769
 770             this.hiddenField.dom.value =
 771                 this.hiddenValue !== undefined ? this.hiddenValue :
 772                 this.value !== undefined ? this.value : '';
 773
 774             // prevent input submission
 775             this.el.dom.removeAttribute('name');
 776             this.hiddenField.dom.setAttribute('name', this.hiddenName);
 777
 778
 779         }
 780
 781 //        this.list = this.el.select('ul.dropdown-menu',true).first();
 782
 783         this.choices = this.el.select('ul.select2-choices', true).first();
 784         this.searchField = this.el.select('ul li.select2-search-field', true).first();
 785         if(this.triggerList){
 786             this.searchField.on("click", this.onSearchFieldClick, this, {preventDefault:true});
 787         }
 788
 789         this.trigger = this.el.select('.tickable-buttons > .btn-edit', true).first();
 790         this.trigger.on("click", this.onTickableTriggerClick, this, {preventDefault:true});
 791
 792         this.okBtn = this.el.select('.tickable-buttons > .btn-ok', true).first();
 793         this.cancelBtn = this.el.select('.tickable-buttons > .btn-cancel', true).first();
 794
 795         this.okBtn.on('click', this.onTickableFooterButtonClick, this, this.okBtn);
 796         this.cancelBtn.on('click', this.onTickableFooterButtonClick, this, this.cancelBtn);
 797
 798         this.trigger.setVisibilityMode(Roo.Element.DISPLAY);
 799         this.okBtn.setVisibilityMode(Roo.Element.DISPLAY);
 800         this.cancelBtn.setVisibilityMode(Roo.Element.DISPLAY);
 801
 802         this.okBtn.hide();
 803         this.cancelBtn.hide();
 804
 805         var _this = this;
 806
 807         (function(){
 808             var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth);
 809             _this.list.setWidth(lw);
 810         }).defer(100);
 811
 812         this.list.on('mouseover', this.onViewOver, this);
 813         this.list.on('mousemove', this.onViewMove, this);
 814
 815         this.list.on('scroll', this.onViewScroll, this);
 816
 817         if(!this.tpl){
 818             this.tpl = '<li class="select2-result"><div class="checkbox"><input id="{roo-id}" type="checkbox" {roo-data-checked}><label for="{roo-id}"><b>{' + this.displayField + '}</b></label></li>';
 819         }
 820
 821         this.view = new Roo.View(this.list, this.tpl, {
 822             singleSelect:true, tickable:true, parent:this, store: this.store, selectedClass: this.selectedClass
 823         });
 824
 825         //this.view.wrapEl.setDisplayed(false);
 826         this.view.on('click', this.onViewClick, this);
 827
 828
 829
 830         this.store.on('beforeload', this.onBeforeLoad, this);
 831         this.store.on('load', this.onLoad, this);
 832         this.store.on('loadexception', this.onLoadException, this);
 833
 834         if(this.editable){
 835             this.keyNav = new Roo.KeyNav(this.tickableInputEl(), {
 836                 "up" : function(e){
 837                     this.inKeyMode = true;
 838                     this.selectPrev();
 839                 },
 840
 841                 "down" : function(e){
 842                     this.inKeyMode = true;
 843                     this.selectNext();
 844                 },
 845
 846                 "enter" : function(e){
 847                     if(this.fireEvent("specialkey", this, e)){
 848                         this.onViewClick(false);
 849                     }
 850
 851                     return true;
 852                 },
 853
 854                 "esc" : function(e){
 855                     this.onTickableFooterButtonClick(e, false, false);
 856                 },
 857
 858                 "tab" : function(e){
 859                     this.fireEvent("specialkey", this, e);
 860
 861                     this.onTickableFooterButtonClick(e, false, false);
 862
 863                     return true;
 864                 },
 865
 866                 scope : this,
 867
 868                 doRelay : function(e, fn, key){
 869                     if(this.scope.isExpanded()){
 870                        return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
 871                     }
 872                     return true;
 873                 },
 874
 875                 forceKeyDown: true
 876             });
 877         }
 878
 879         this.queryDelay = Math.max(this.queryDelay || 10,
 880                 this.mode == 'local' ? 10 : 250);
 881
 882
 883         this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
 884
 885         if(this.typeAhead){
 886             this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
 887         }
 888
 889         if(this.editable !== false){
 890             this.tickableInputEl().on("keyup", this.onKeyUp, this);
 891         }
 892
 893     },
 894
 895     onDestroy : function(){
 896         if(this.view){
 897             this.view.setStore(null);
 898             this.view.el.removeAllListeners();
 899             this.view.el.remove();
 900             this.view.purgeListeners();
 901         }
 902         if(this.list){
 903             this.list.dom.innerHTML  = '';
 904         }
 905
 906         if(this.store){
 907             this.store.un('beforeload', this.onBeforeLoad, this);
 908             this.store.un('load', this.onLoad, this);
 909             this.store.un('loadexception', this.onLoadException, this);
 910         }
 911         Roo.bootstrap.ComboBox.superclass.onDestroy.call(this);
 912     },
 913
 914     // private
 915     fireKey : function(e){
 916         if(e.isNavKeyPress() && !this.list.isVisible()){
 917             this.fireEvent("specialkey", this, e);
 918         }
 919     },
 920
 921     // private
 922     onResize: function(w, h){
 923 //        Roo.bootstrap.ComboBox.superclass.onResize.apply(this, arguments);
 924 //
 925 //        if(typeof w != 'number'){
 926 //            // we do not handle it!?!?
 927 //            return;
 928 //        }
 929 //        var tw = this.trigger.getWidth();
 930 //       // tw += this.addicon ? this.addicon.getWidth() : 0;
 931 //       // tw += this.editicon ? this.editicon.getWidth() : 0;
 932 //        var x = w - tw;
 933 //        this.inputEl().setWidth( this.adjustWidth('input', x));
 934 //
 935 //        //this.trigger.setStyle('left', x+'px');
 936 //
 937 //        if(this.list && this.listWidth === undefined){
 938 //            var lw = Math.max(x + this.trigger.getWidth(), this.minListWidth);
 939 //            this.list.setWidth(lw);
 940 //            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
 941 //        }
 942
 943
 944
 945     },
 946
 947     /**
 948      * Allow or prevent the user from directly editing the field text.  If false is passed,
 949      * the user will only be able to select from the items defined in the dropdown list.  This method
 950      * is the runtime equivalent of setting the 'editable' config option at config time.
 951      * @param {Boolean} value True to allow the user to directly edit the field text
 952      */
 953     setEditable : function(value){
 954         if(value == this.editable){
 955             return;
 956         }
 957         this.editable = value;
 958         if(!value){
 959             this.inputEl().dom.setAttribute('readOnly', true);
 960             this.inputEl().on('mousedown', this.onTriggerClick,  this);
 961             this.inputEl().addClass('x-combo-noedit');
 962         }else{
 963             this.inputEl().dom.setAttribute('readOnly', false);
 964             this.inputEl().un('mousedown', this.onTriggerClick,  this);
 965             this.inputEl().removeClass('x-combo-noedit');
 966         }
 967     },
 968
 969     // private
 970
 971     onBeforeLoad : function(combo,opts){
 972         if(!this.hasFocus){
 973             return;
 974         }
 975          if (!opts.add) {
 976             this.list.dom.innerHTML = '<li class="loading-indicator">'+(this.loadingText||'loading')+'</li>' ;
 977          }
 978         this.restrictHeight();
 979         this.selectedIndex = -1;
 980     },
 981
 982     // private
 983     onLoad : function(){
 984
 985         this.hasQuery = false;
 986
 987         if(!this.hasFocus){
 988             return;
 989         }
 990
 991         if(typeof(this.loading) !== 'undefined' && this.loading !== null){
 992             this.loading.hide();
 993         }
 994
 995         if(this.store.getCount() > 0){
 996             this.expand();
 997             this.restrictHeight();
 998             if(this.lastQuery == this.allQuery){
 999                 if(this.editable && !this.tickable){
1000                     this.inputEl().dom.select();
1001                 }
1002
1003                 if(
1004                     !this.selectByValue(this.value, true) &&
1005                     this.autoFocus &&
1006                     (
1007                         !this.store.lastOptions ||
1008                         typeof(this.store.lastOptions.add) == 'undefined' ||
1009                         this.store.lastOptions.add != true
1010                     )
1011                 ){
1012                     this.select(0, true);
1013                 }
1014             }else{
1015                 if(this.autoFocus){
1016                     this.selectNext();
1017                 }
1018                 if(this.typeAhead && this.lastKey != Roo.EventObject.BACKSPACE && this.lastKey != Roo.EventObject.DELETE){
1019                     this.taTask.delay(this.typeAheadDelay);
1020                 }
1021             }
1022         }else{
1023             this.onEmptyResults();
1024         }
1025
1026         //this.el.focus();
1027     },
1028     // private
1029     onLoadException : function()
1030     {
1031         this.hasQuery = false;
1032
1033         if(typeof(this.loading) !== 'undefined' && this.loading !== null){
1034             this.loading.hide();
1035         }
1036
1037         if(this.tickable && this.editable){
1038             return;
1039         }
1040
1041         this.collapse();
1042
1043         Roo.log(this.store.reader.jsonData);
1044         if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
1045             // fixme
1046             //Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
1047         }
1048
1049
1050     },
1051     // private
1052     onTypeAhead : function(){
1053         if(this.store.getCount() > 0){
1054             var r = this.store.getAt(0);
1055             var newValue = r.data[this.displayField];
1056             var len = newValue.length;
1057             var selStart = this.getRawValue().length;
1058
1059             if(selStart != len){
1060                 this.setRawValue(newValue);
1061                 this.selectText(selStart, newValue.length);
1062             }
1063         }
1064     },
1065
1066     // private
1067     onSelect : function(record, index){
1068
1069         if(this.fireEvent('beforeselect', this, record, index) !== false){
1070
1071             this.setFromData(index > -1 ? record.data : false);
1072
1073             this.collapse();
1074             this.fireEvent('select', this, record, index);
1075         }
1076     },
1077
1078     /**
1079      * Returns the currently selected field value or empty string if no value is set.
1080      * @return {String} value The selected value
1081      */
1082     getValue : function(){
1083
1084         if(this.multiple){
1085             return (this.hiddenField) ? this.hiddenField.dom.value : this.value;
1086         }
1087
1088         if(this.valueField){
1089             return typeof this.value != 'undefined' ? this.value : '';
1090         }else{
1091             return Roo.bootstrap.ComboBox.superclass.getValue.call(this);
1092         }
1093     },
1094
1095     /**
1096      * Clears any text/value currently set in the field
1097      */
1098     clearValue : function(){
1099         if(this.hiddenField){
1100             this.hiddenField.dom.value = '';
1101         }
1102         this.value = '';
1103         this.setRawValue('');
1104         this.lastSelectionText = '';
1105         this.lastData = false;
1106
1107         var close = this.closeTriggerEl();
1108
1109         if(close){
1110             close.hide();
1111         }
1112
1113     },
1114
1115     /**
1116      * Sets the specified value into the field.  If the value finds a match, the corresponding record text
1117      * will be displayed in the field.  If the value does not match the data value of an existing item,
1118      * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
1119      * Otherwise the field will be blank (although the value will still be set).
1120      * @param {String} value The value to match
1121      */
1122     setValue : function(v){
1123         if(this.multiple){
1124             this.syncValue();
1125             return;
1126         }
1127
1128         var text = v;
1129         if(this.valueField){
1130             var r = this.findRecord(this.valueField, v);
1131             if(r){
1132                 text = r.data[this.displayField];
1133             }else if(this.valueNotFoundText !== undefined){
1134                 text = this.valueNotFoundText;
1135             }
1136         }
1137         this.lastSelectionText = text;
1138         if(this.hiddenField){
1139             this.hiddenField.dom.value = v;
1140         }
1141         Roo.bootstrap.ComboBox.superclass.setValue.call(this, text);
1142         this.value = v;
1143
1144         var close = this.closeTriggerEl();
1145
1146         if(close){
1147             (v && (v.length || v * 1 > 0)) ? close.show() : close.hide();
1148         }
1149     },
1150     /**
1151      * @property {Object} the last set data for the element
1152      */
1153
1154     lastData : false,
1155     /**
1156      * Sets the value of the field based on a object which is related to the record format for the store.
1157      * @param {Object} value the value to set as. or false on reset?
1158      */
1159     setFromData : function(o){
1160
1161         if(this.multiple){
1162             this.addItem(o);
1163             return;
1164         }
1165
1166         var dv = ''; // display value
1167         var vv = ''; // value value..
1168         this.lastData = o;
1169         if (this.displayField) {
1170             dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
1171         } else {
1172             // this is an error condition!!!
1173             Roo.log('no  displayField value set for '+ (this.name ? this.name : this.id));
1174         }
1175
1176         if(this.valueField){
1177             vv = !o || typeof(o[this.valueField]) == 'undefined' ? dv : o[this.valueField];
1178         }
1179
1180         var close = this.closeTriggerEl();
1181
1182         if(close){
1183             (vv.length || vv * 1 > 0) ? close.show() : close.hide();
1184         }
1185
1186         if(this.hiddenField){
1187             this.hiddenField.dom.value = vv;
1188
1189             this.lastSelectionText = dv;
1190             Roo.bootstrap.ComboBox.superclass.setValue.call(this, dv);
1191             this.value = vv;
1192             return;
1193         }
1194         // no hidden field.. - we store the value in 'value', but still display
1195         // display field!!!!
1196         this.lastSelectionText = dv;
1197         Roo.bootstrap.ComboBox.superclass.setValue.call(this, dv);
1198         this.value = vv;
1199
1200
1201
1202     },
1203     // private
1204     reset : function(){
1205         // overridden so that last data is reset..
1206
1207         if(this.multiple){
1208             this.clearItem();
1209             return;
1210         }
1211
1212         this.setValue(this.originalValue);
1213         this.clearInvalid();
1214         this.lastData = false;
1215         if (this.view) {
1216             this.view.clearSelections();
1217         }
1218     },
1219     // private
1220     findRecord : function(prop, value){
1221         var record;
1222         if(this.store.getCount() > 0){
1223             this.store.each(function(r){
1224                 if(r.data[prop] == value){
1225                     record = r;
1226                     return false;
1227                 }
1228                 return true;
1229             });
1230         }
1231         return record;
1232     },
1233
1234     getName: function()
1235     {
1236         // returns hidden if it's set..
1237         if (!this.rendered) {return ''};
1238         return !this.hiddenName && this.inputEl().dom.name  ? this.inputEl().dom.name : (this.hiddenName || '');
1239
1240     },
1241     // private
1242     onViewMove : function(e, t){
1243         this.inKeyMode = false;
1244     },
1245
1246     // private
1247     onViewOver : function(e, t){
1248         if(this.inKeyMode){ // prevent key nav and mouse over conflicts
1249             return;
1250         }
1251         var item = this.view.findItemFromChild(t);
1252
1253         if(item){
1254             var index = this.view.indexOf(item);
1255             this.select(index, false);
1256         }
1257     },
1258
1259     // private
1260     onViewClick : function(view, doFocus, el, e)
1261     {
1262         var index = this.view.getSelectedIndexes()[0];
1263
1264         var r = this.store.getAt(index);
1265
1266         if(this.tickable){
1267
1268             if(typeof(e) != 'undefined' && e.getTarget().nodeName.toLowerCase() != 'input'){
1269                 return;
1270             }
1271
1272             var rm = false;
1273             var _this = this;
1274
1275             Roo.each(this.tickItems, function(v,k){
1276
1277                 if(typeof(v) != 'undefined' && v[_this.valueField] == r.data[_this.valueField]){
1278                     _this.tickItems.splice(k, 1);
1279
1280                     if(typeof(e) == 'undefined' && view == false){
1281                         Roo.get(_this.view.getNodes(index, index)[0]).select('input', true).first().dom.checked = false;
1282                     }
1283
1284                     rm = true;
1285                     return;
1286                 }
1287             });
1288
1289             if(rm){
1290                 return;
1291             }
1292
1293             this.tickItems.push(r.data);
1294
1295             if(typeof(e) == 'undefined' && view == false){
1296                 Roo.get(_this.view.getNodes(index, index)[0]).select('input', true).first().dom.checked = true;
1297             }
1298
1299             return;
1300         }
1301
1302         if(r){
1303             this.onSelect(r, index);
1304         }
1305         if(doFocus !== false && !this.blockFocus){
1306             this.inputEl().focus();
1307         }
1308     },
1309
1310     // private
1311     restrictHeight : function(){
1312         //this.innerList.dom.style.height = '';
1313         //var inner = this.innerList.dom;
1314         //var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
1315         //this.innerList.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
1316         //this.list.beginUpdate();
1317         //this.list.setHeight(this.innerList.getHeight()+this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight);
1318         this.list.alignTo(this.inputEl(), this.listAlign);
1319         this.list.alignTo(this.inputEl(), this.listAlign);
1320         //this.list.endUpdate();
1321     },
1322
1323     // private
1324     onEmptyResults : function(){
1325
1326         if(this.tickable && this.editable){
1327             this.restrictHeight();
1328             return;
1329         }
1330
1331         this.collapse();
1332     },
1333
1334     /**
1335      * Returns true if the dropdown list is expanded, else false.
1336      */
1337     isExpanded : function(){
1338         return this.list.isVisible();
1339     },
1340
1341     /**
1342      * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
1343      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
1344      * @param {String} value The data value of the item to select
1345      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
1346      * selected item if it is not currently in view (defaults to true)
1347      * @return {Boolean} True if the value matched an item in the list, else false
1348      */
1349     selectByValue : function(v, scrollIntoView){
1350         if(v !== undefined && v !== null){
1351             var r = this.findRecord(this.valueField || this.displayField, v);
1352             if(r){
1353                 this.select(this.store.indexOf(r), scrollIntoView);
1354                 return true;
1355             }
1356         }
1357         return false;
1358     },
1359
1360     /**
1361      * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
1362      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
1363      * @param {Number} index The zero-based index of the list item to select
1364      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
1365      * selected item if it is not currently in view (defaults to true)
1366      */
1367     select : function(index, scrollIntoView){
1368         this.selectedIndex = index;
1369         this.view.select(index);
1370         if(scrollIntoView !== false){
1371             var el = this.view.getNode(index);
1372             /*
1373              * el && !this.multiple && !this.tickable // not sure why we disable multiple before..
1374              */
1375             if(el){
1376                 this.list.scrollChildIntoView(el, false);
1377             }
1378         }
1379     },
1380
1381     // private
1382     selectNext : function(){
1383         var ct = this.store.getCount();
1384         if(ct > 0){
1385             if(this.selectedIndex == -1){
1386                 this.select(0);
1387             }else if(this.selectedIndex < ct-1){
1388                 this.select(this.selectedIndex+1);
1389             }
1390         }
1391     },
1392
1393     // private
1394     selectPrev : function(){
1395         var ct = this.store.getCount();
1396         if(ct > 0){
1397             if(this.selectedIndex == -1){
1398                 this.select(0);
1399             }else if(this.selectedIndex != 0){
1400                 this.select(this.selectedIndex-1);
1401             }
1402         }
1403     },
1404
1405     // private
1406     onKeyUp : function(e){
1407         if(this.editable !== false && !e.isSpecialKey()){
1408             this.lastKey = e.getKey();
1409             this.dqTask.delay(this.queryDelay);
1410         }
1411     },
1412
1413     // private
1414     validateBlur : function(){
1415         return !this.list || !this.list.isVisible();
1416     },
1417
1418     // private
1419     initQuery : function(){
1420
1421         var v = this.getRawValue();
1422
1423         if(this.tickable && this.editable){
1424             v = this.tickableInputEl().getValue();
1425         }
1426
1427         this.doQuery(v);
1428     },
1429
1430     // private
1431     doForce : function(){
1432         if(this.inputEl().dom.value.length > 0){
1433             this.inputEl().dom.value =
1434                 this.lastSelectionText === undefined ? '' : this.lastSelectionText;
1435
1436         }
1437     },
1438
1439     /**
1440      * Execute a query to filter the dropdown list.  Fires the beforequery event prior to performing the
1441      * query allowing the query action to be canceled if needed.
1442      * @param {String} query The SQL query to execute
1443      * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
1444      * in the field than the minimum specified by the minChars config option.  It also clears any filter previously
1445      * saved in the current store (defaults to false)
1446      */
1447     doQuery : function(q, forceAll){
1448
1449         if(q === undefined || q === null){
1450             q = '';
1451         }
1452         var qe = {
1453             query: q,
1454             forceAll: forceAll,
1455             combo: this,
1456             cancel:false
1457         };
1458         if(this.fireEvent('beforequery', qe)===false || qe.cancel){
1459             return false;
1460         }
1461         q = qe.query;
1462
1463         forceAll = qe.forceAll;
1464         if(forceAll === true || (q.length >= this.minChars)){
1465
1466             this.hasQuery = true;
1467
1468             if(this.lastQuery != q || this.alwaysQuery){
1469                 this.lastQuery = q;
1470                 if(this.mode == 'local'){
1471                     this.selectedIndex = -1;
1472                     if(forceAll){
1473                         this.store.clearFilter();
1474                     }else{
1475
1476                         if(this.specialFilter){
1477                             this.fireEvent('specialfilter', this);
1478                             this.onLoad();
1479                             return;
1480                         }
1481
1482                         this.store.filter(this.displayField, q);
1483                     }
1484
1485                     this.store.fireEvent("datachanged", this.store);
1486
1487                     this.onLoad();
1488
1489
1490                 }else{
1491
1492                     this.store.baseParams[this.queryParam] = q;
1493
1494                     var options = {params : this.getParams(q)};
1495
1496                     if(this.loadNext){
1497                         options.add = true;
1498                         options.params.start = this.page * this.pageSize;
1499                     }
1500
1501                     this.store.load(options);
1502
1503                     /*
1504                      *  this code will make the page width larger, at the beginning, the list not align correctly,
1505                      *  we should expand the list on onLoad
1506                      *  so command out it
1507                      */
1508 //                    this.expand();
1509                 }
1510             }else{
1511                 this.selectedIndex = -1;
1512                 this.onLoad();
1513             }
1514         }
1515
1516         this.loadNext = false;
1517     },
1518
1519     // private
1520     getParams : function(q){
1521         var p = {};
1522         //p[this.queryParam] = q;
1523
1524         if(this.pageSize){
1525             p.start = 0;
1526             p.limit = this.pageSize;
1527         }
1528         return p;
1529     },
1530
1531     /**
1532      * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
1533      */
1534     collapse : function(){
1535         if(!this.isExpanded()){
1536             return;
1537         }
1538
1539         this.list.hide();
1540
1541         if(this.tickable){
1542             this.hasFocus = false;
1543             this.okBtn.hide();
1544             this.cancelBtn.hide();
1545             this.trigger.show();
1546
1547             if(this.editable){
1548                 this.tickableInputEl().dom.value = '';
1549                 this.tickableInputEl().blur();
1550             }
1551
1552         }
1553
1554         Roo.get(document).un('mousedown', this.collapseIf, this);
1555         Roo.get(document).un('mousewheel', this.collapseIf, this);
1556         if (!this.editable) {
1557             Roo.get(document).un('keydown', this.listKeyPress, this);
1558         }
1559         this.fireEvent('collapse', this);
1560     },
1561
1562     // private
1563     collapseIf : function(e){
1564         var in_combo  = e.within(this.el);
1565         var in_list =  e.within(this.list);
1566         var is_list = (Roo.get(e.getTarget()).id == this.list.id) ? true : false;
1567
1568         if (in_combo || in_list || is_list) {
1569             //e.stopPropagation();
1570             return;
1571         }
1572
1573         if(this.tickable){
1574             this.onTickableFooterButtonClick(e, false, false);
1575         }
1576
1577         this.collapse();
1578
1579     },
1580
1581     /**
1582      * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
1583      */
1584     expand : function(){
1585
1586         if(this.isExpanded() || !this.hasFocus){
1587             return;
1588         }
1589
1590         var lw = this.listWidth || Math.max(this.inputEl().getWidth(), this.minListWidth);
1591         this.list.setWidth(lw);
1592
1593
1594          Roo.log('expand');
1595
1596         this.list.show();
1597
1598         this.restrictHeight();
1599
1600         if(this.tickable){
1601
1602             this.tickItems = Roo.apply([], this.item);
1603
1604             this.okBtn.show();
1605             this.cancelBtn.show();
1606             this.trigger.hide();
1607
1608             if(this.editable){
1609                 this.tickableInputEl().focus();
1610             }
1611
1612         }
1613
1614         Roo.get(document).on('mousedown', this.collapseIf, this);
1615         Roo.get(document).on('mousewheel', this.collapseIf, this);
1616         if (!this.editable) {
1617             Roo.get(document).on('keydown', this.listKeyPress, this);
1618         }
1619
1620         this.fireEvent('expand', this);
1621     },
1622
1623     // private
1624     // Implements the default empty TriggerField.onTriggerClick function
1625     onTriggerClick : function(e)
1626     {
1627         Roo.log('trigger click');
1628
1629         if(this.disabled || !this.triggerList){
1630             return;
1631         }
1632
1633         this.page = 0;
1634         this.loadNext = false;
1635
1636         if(this.isExpanded()){
1637             this.collapse();
1638             if (!this.blockFocus) {
1639                 this.inputEl().focus();
1640             }
1641
1642         }else {
1643             this.hasFocus = true;
1644             if(this.triggerAction == 'all') {
1645                 this.doQuery(this.allQuery, true);
1646             } else {
1647                 this.doQuery(this.getRawValue());
1648             }
1649             if (!this.blockFocus) {
1650                 this.inputEl().focus();
1651             }
1652         }
1653     },
1654
1655     onTickableTriggerClick : function(e)
1656     {
1657         if(this.disabled){
1658             return;
1659         }
1660
1661         this.page = 0;
1662         this.loadNext = false;
1663         this.hasFocus = true;
1664
1665         if(this.triggerAction == 'all') {
1666             this.doQuery(this.allQuery, true);
1667         } else {
1668             this.doQuery(this.getRawValue());
1669         }
1670     },
1671
1672     onSearchFieldClick : function(e)
1673     {
1674         if(this.hasFocus && !this.disabled && e.getTarget().nodeName.toLowerCase() != 'button'){
1675             this.onTickableFooterButtonClick(e, false, false);
1676             return;
1677         }
1678
1679         if(this.hasFocus || this.disabled || e.getTarget().nodeName.toLowerCase() == 'button'){
1680             return;
1681         }
1682
1683         this.page = 0;
1684         this.loadNext = false;
1685         this.hasFocus = true;
1686
1687         if(this.triggerAction == 'all') {
1688             this.doQuery(this.allQuery, true);
1689         } else {
1690             this.doQuery(this.getRawValue());
1691         }
1692     },
1693
1694     listKeyPress : function(e)
1695     {
1696         //Roo.log('listkeypress');
1697         // scroll to first matching element based on key pres..
1698         if (e.isSpecialKey()) {
1699             return false;
1700         }
1701         var k = String.fromCharCode(e.getKey()).toUpperCase();
1702         //Roo.log(k);
1703         var match  = false;
1704         var csel = this.view.getSelectedNodes();
1705         var cselitem = false;
1706         if (csel.length) {
1707             var ix = this.view.indexOf(csel[0]);
1708             cselitem  = this.store.getAt(ix);
1709             if (!cselitem.get(this.displayField) || cselitem.get(this.displayField).substring(0,1).toUpperCase() != k) {
1710                 cselitem = false;
1711             }
1712
1713         }
1714
1715         this.store.each(function(v) {
1716             if (cselitem) {
1717                 // start at existing selection.
1718                 if (cselitem.id == v.id) {
1719                     cselitem = false;
1720                 }
1721                 return true;
1722             }
1723
1724             if (v.get(this.displayField) && v.get(this.displayField).substring(0,1).toUpperCase() == k) {
1725                 match = this.store.indexOf(v);
1726                 return false;
1727             }
1728             return true;
1729         }, this);
1730
1731         if (match === false) {
1732             return true; // no more action?
1733         }
1734         // scroll to?
1735         this.view.select(match);
1736         var sn = Roo.get(this.view.getSelectedNodes()[0])
1737         sn.scrollIntoView(sn.dom.parentNode, false);
1738     },
1739
1740     onViewScroll : function(e, t){
1741
1742         if(this.view.el.getScroll().top == 0 ||this.view.el.getScroll().top < this.view.el.dom.scrollHeight - this.view.el.dom.clientHeight || !this.hasFocus || !this.append || this.hasQuery){
1743             return;
1744         }
1745
1746         this.hasQuery = true;
1747
1748         this.loading = this.list.select('.loading', true).first();
1749
1750         if(this.loading === null){
1751             this.list.createChild({
1752                 tag: 'div',
1753                 cls: 'loading select2-more-results select2-active',
1754                 html: 'Loading more results...'
1755             })
1756
1757             this.loading = this.list.select('.loading', true).first();
1758
1759             this.loading.setVisibilityMode(Roo.Element.DISPLAY);
1760
1761             this.loading.hide();
1762         }
1763
1764         this.loading.show();
1765
1766         var _combo = this;
1767
1768         this.page++;
1769         this.loadNext = true;
1770
1771         (function() { _combo.doQuery(_combo.allQuery, true); }).defer(500);
1772
1773         return;
1774     },
1775
1776     addItem : function(o)
1777     {
1778         var dv = ''; // display value
1779
1780         if (this.displayField) {
1781             dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
1782         } else {
1783             // this is an error condition!!!
1784             Roo.log('no  displayField value set for '+ (this.name ? this.name : this.id));
1785         }
1786
1787         if(!dv.length){
1788             return;
1789         }
1790
1791         var choice = this.choices.createChild({
1792             tag: 'li',
1793             cls: 'select2-search-choice',
1794             cn: [
1795                 {
1796                     tag: 'div',
1797                     html: dv
1798                 },
1799                 {
1800                     tag: 'a',
1801                     href: '#',
1802                     cls: 'select2-search-choice-close',
1803                     tabindex: '-1'
1804                 }
1805             ]
1806
1807         }, this.searchField);
1808
1809         var close = choice.select('a.select2-search-choice-close', true).first()
1810
1811         close.on('click', this.onRemoveItem, this, { item : choice, data : o} );
1812
1813         this.item.push(o);
1814
1815         this.lastData = o;
1816
1817         this.syncValue();
1818
1819         this.inputEl().dom.value = '';
1820
1821         this.validate();
1822     },
1823
1824     onRemoveItem : function(e, _self, o)
1825     {
1826         e.preventDefault();
1827
1828         this.lastItem = Roo.apply([], this.item);
1829
1830         var index = this.item.indexOf(o.data) * 1;
1831
1832         if( index < 0){
1833             Roo.log('not this item?!');
1834             return;
1835         }
1836
1837         this.item.splice(index, 1);
1838         o.item.remove();
1839
1840         this.syncValue();
1841
1842         this.fireEvent('remove', this, e);
1843
1844         this.validate();
1845
1846     },
1847
1848     syncValue : function()
1849     {
1850         if(!this.item.length){
1851             this.clearValue();
1852             return;
1853         }
1854
1855         var value = [];
1856         var _this = this;
1857         Roo.each(this.item, function(i){
1858             if(_this.valueField){
1859                 value.push(i[_this.valueField]);
1860                 return;
1861             }
1862
1863             value.push(i);
1864         });
1865
1866         this.value = value.join(',');
1867
1868         if(this.hiddenField){
1869             this.hiddenField.dom.value = this.value;
1870         }
1871
1872         this.store.fireEvent("datachanged", this.store);
1873     },
1874
1875     clearItem : function()
1876     {
1877         if(!this.multiple){
1878             return;
1879         }
1880
1881         this.item = [];
1882
1883         Roo.each(this.choices.select('>li.select2-search-choice', true).elements, function(c){
1884            c.remove();
1885         });
1886
1887         this.syncValue();
1888
1889         this.validate();
1890
1891         if(this.tickable && !Roo.isTouch){
1892             this.view.refresh();
1893         }
1894     },
1895
1896     inputEl: function ()
1897     {
1898         if(Roo.isTouch && this.mobileTouchView){
1899             return this.el.select('input.form-control',true).first();
1900         }
1901
1902         if(this.tickable){
1903             return this.searchField;
1904         }
1905
1906         return this.el.select('input.form-control',true).first();
1907     },
1908
1909
1910     onTickableFooterButtonClick : function(e, btn, el)
1911     {
1912         e.preventDefault();
1913
1914         this.lastItem = Roo.apply([], this.item);
1915
1916         if(btn && btn.name == 'cancel'){
1917             this.tickItems = Roo.apply([], this.item);
1918             this.collapse();
1919             return;
1920         }
1921
1922         this.clearItem();
1923
1924         var _this = this;
1925
1926         Roo.each(this.tickItems, function(o){
1927             _this.addItem(o);
1928         });
1929
1930         this.collapse();
1931
1932     },
1933
1934     validate : function()
1935     {
1936         var v = this.getRawValue();
1937
1938         if(this.multiple){
1939             v = this.getValue();
1940         }
1941
1942         if(this.disabled || this.allowBlank || v.length){
1943             this.markValid();
1944             return true;
1945         }
1946
1947         this.markInvalid();
1948         return false;
1949     },
1950
1951     tickableInputEl : function()
1952     {
1953         if(!this.tickable || !this.editable){
1954             return this.inputEl();
1955         }
1956
1957         return this.inputEl().select('.select2-search-field-input', true).first();
1958     },
1959
1960
1961     getAutoCreateTouchView : function()
1962     {
1963         var id = Roo.id();
1964
1965         var cfg = {
1966             cls: 'form-group' //input-group
1967         };
1968
1969         var input =  {
1970             tag: 'input',
1971             id : id,
1972             type : this.inputType,
1973             cls : 'form-control x-combo-noedit',
1974             autocomplete: 'new-password',
1975             placeholder : this.placeholder || '',
1976             readonly : true
1977         };
1978
1979         if (this.name) {
1980             input.name = this.name;
1981         }
1982
1983         if (this.size) {
1984             input.cls += ' input-' + this.size;
1985         }
1986
1987         if (this.disabled) {
1988             input.disabled = true;
1989         }
1990
1991         var inputblock = {
1992             cls : '',
1993             cn : [
1994                 input
1995             ]
1996         };
1997
1998         if(this.before){
1999             inputblock.cls += ' input-group';
2000
2001             inputblock.cn.unshift({
2002                 tag :'span',
2003                 cls : 'input-group-addon',
2004                 html : this.before
2005             });
2006         }
2007
2008         if(this.removable && !this.multiple){
2009             inputblock.cls += ' roo-removable';
2010
2011             inputblock.cn.push({
2012                 tag: 'button',
2013                 html : 'x',
2014                 cls : 'roo-combo-removable-btn close'
2015             });
2016         }
2017
2018         if(this.hasFeedback && !this.allowBlank){
2019
2020             inputblock.cls += ' has-feedback';
2021
2022             inputblock.cn.push({
2023                 tag: 'span',
2024                 cls: 'glyphicon form-control-feedback'
2025             });
2026
2027         }
2028
2029         if (this.after) {
2030
2031             inputblock.cls += (this.before) ? '' : ' input-group';
2032
2033             inputblock.cn.push({
2034                 tag :'span',
2035                 cls : 'input-group-addon',
2036                 html : this.after
2037             });
2038         }
2039
2040         var box = {
2041             tag: 'div',
2042             cn: [
2043                 {
2044                     tag: 'input',
2045                     type : 'hidden',
2046                     cls: 'form-hidden-field'
2047                 },
2048                 inputblock
2049             ]
2050
2051         };
2052
2053         if(this.multiple){
2054             box = {
2055                 tag: 'div',
2056                 cn: [
2057                     {
2058                         tag: 'input',
2059                         type : 'hidden',
2060                         cls: 'form-hidden-field'
2061                     },
2062                     {
2063                         tag: 'ul',
2064                         cls: 'select2-choices',
2065                         cn:[
2066                             {
2067                                 tag: 'li',
2068                                 cls: 'select2-search-field',
2069                                 cn: [
2070
2071                                     inputblock
2072                                 ]
2073                             }
2074                         ]
2075                     }
2076                 ]
2077             }
2078         };
2079
2080         var combobox = {
2081             cls: 'select2-container input-group',
2082             cn: [
2083                 box
2084             ]
2085         };
2086
2087         if(this.multiple){
2088             combobox.cls += ' select2-container-multi';
2089         }
2090
2091         var align = this.labelAlign || this.parentLabelAlign();
2092
2093         cfg.cn = combobox;
2094
2095         if(this.fieldLabel.length){
2096
2097             var lw = align === 'left' ? ('col-sm' + this.labelWidth) : '';
2098             var cw = align === 'left' ? ('col-sm' + (12 - this.labelWidth)) : '';
2099
2100             cfg.cn = [
2101                 {
2102                     tag: 'label',
2103                     cls : 'control-label ' + lw,
2104                     html : this.fieldLabel
2105
2106                 },
2107                 {
2108                     cls : cw,
2109                     cn: [
2110                         combobox
2111                     ]
2112                 }
2113             ];
2114         }
2115
2116         var settings = this;
2117
2118         ['xs','sm','md','lg'].map(function(size){
2119             if (settings[size]) {
2120                 cfg.cls += ' col-' + size + '-' + settings[size];
2121             }
2122         });
2123
2124         return cfg;
2125     },
2126
2127     initTouchView : function()
2128     {
2129         this.renderTouchView();
2130
2131         this.touchViewEl.on('scroll', function(){
2132             this.el.dom.scrollTop = 0;
2133         }, this);
2134
2135         this.inputEl().on("click", this.showTouchView, this);
2136         this.touchViewFooterEl.select('.roo-touch-view-cancel', true).first().on('click', this.hideTouchView, this);
2137         this.touchViewFooterEl.select('.roo-touch-view-ok', true).first().on('click', this.setTouchViewValue, this);
2138
2139         this.maskEl = new Roo.LoadMask(this.touchViewEl, { store : this.store, msgCls: 'roo-el-mask-msg' });
2140
2141         this.store.on('beforeload', this.onTouchViewBeforeLoad, this);
2142         this.store.on('load', this.onTouchViewLoad, this);
2143         this.store.on('loadexception', this.onTouchViewLoadException, this);
2144
2145         if(this.hiddenName){
2146
2147             this.hiddenField = this.el.select('input.form-hidden-field',true).first();
2148
2149             this.hiddenField.dom.value =
2150                 this.hiddenValue !== undefined ? this.hiddenValue :
2151                 this.value !== undefined ? this.value : '';
2152
2153             this.el.dom.removeAttribute('name');
2154             this.hiddenField.dom.setAttribute('name', this.hiddenName);
2155         }
2156
2157         if(this.multiple){
2158             this.choices = this.el.select('ul.select2-choices', true).first();
2159             this.searchField = this.el.select('ul li.select2-search-field', true).first();
2160         }
2161
2162         if(this.removable && !this.multiple){
2163             var close = this.closeTriggerEl();
2164             if(close){
2165                 close.setVisibilityMode(Roo.Element.DISPLAY).hide();
2166                 close.on('click', this.removeBtnClick, this, close);
2167             }
2168         }
2169
2170         return;
2171
2172
2173     },
2174
2175     renderTouchView : function()
2176     {
2177         this.touchViewEl = Roo.get(document.body).createChild(Roo.bootstrap.ComboBox.touchViewTemplate);
2178         this.touchViewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
2179
2180         this.touchViewHeaderEl = this.touchViewEl.select('.modal-header', true).first();
2181         this.touchViewHeaderEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
2182
2183         this.touchViewBodyEl = this.touchViewEl.select('.modal-body', true).first();
2184         this.touchViewBodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
2185         this.touchViewBodyEl.setStyle('overflow', 'auto');
2186
2187         this.touchViewListGroup = this.touchViewBodyEl.select('.list-group', true).first();
2188         this.touchViewListGroup.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
2189
2190         this.touchViewFooterEl = this.touchViewEl.select('.modal-footer', true).first();
2191         this.touchViewFooterEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
2192
2193     },
2194
2195     showTouchView : function()
2196     {
2197         this.touchViewHeaderEl.hide();
2198
2199         if(this.fieldLabel.length){
2200             this.touchViewHeaderEl.dom.innerHTML = this.fieldLabel;
2201             this.touchViewHeaderEl.show();
2202         }
2203
2204         this.touchViewEl.show();
2205
2206         this.touchViewEl.select('.modal-dialog', true).first().setStyle('margin', '0px');
2207         this.touchViewEl.select('.modal-dialog > .modal-content', true).first().setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
2208
2209         var bodyHeight = Roo.lib.Dom.getViewHeight() - this.touchViewFooterEl.getHeight() + this.touchViewBodyEl.getPadding('tb');
2210
2211         if(this.fieldLabel.length){
2212             bodyHeight = bodyHeight - this.touchViewHeaderEl.getHeight();
2213         }
2214
2215         this.touchViewBodyEl.setHeight(bodyHeight);
2216
2217         if(this.animate){
2218             var _this = this;
2219             (function(){ _this.touchViewEl.addClass('in'); }).defer(50);
2220         }else{
2221             this.touchViewEl.addClass('in');
2222         }
2223
2224         this.doTouchViewQuery();
2225
2226     },
2227
2228     hideTouchView : function()
2229     {
2230         this.touchViewEl.removeClass('in');
2231
2232         if(this.animate){
2233             var _this = this;
2234             (function(){ _this.touchViewEl.setStyle('display', 'none'); }).defer(150);
2235         }else{
2236             this.touchViewEl.setStyle('display', 'none');
2237         }
2238
2239     },
2240
2241     setTouchViewValue : function()
2242     {
2243         if(this.multiple){
2244             this.clearItem();
2245
2246             var _this = this;
2247
2248             Roo.each(this.tickItems, function(o){
2249                 this.addItem(o);
2250             }, this);
2251         }
2252
2253         this.hideTouchView();
2254     },
2255
2256     doTouchViewQuery : function()
2257     {
2258         var qe = {
2259             query: '',
2260             forceAll: true,
2261             combo: this,
2262             cancel:false
2263         };
2264
2265         if(this.fireEvent('beforequery', qe) ===false || qe.cancel){
2266             return false;
2267         }
2268
2269         if(!this.alwaysQuery || this.mode == 'local'){
2270             this.onTouchViewLoad();
2271             return;
2272         }
2273
2274         this.store.load();
2275     },
2276
2277     onTouchViewBeforeLoad : function(combo,opts)
2278     {
2279         return;
2280     },
2281
2282     // private
2283     onTouchViewLoad : function()
2284     {
2285         if(this.store.getCount() < 1){
2286             this.onTouchViewEmptyResults();
2287             return;
2288         }
2289
2290         this.clearTouchView();
2291
2292         var rawValue = this.getRawValue();
2293
2294         var template = (this.multiple) ? Roo.bootstrap.ComboBox.listItemCheckbox : Roo.bootstrap.ComboBox.listItemRadio;
2295
2296         this.tickItems = [];
2297
2298         this.store.data.each(function(d, rowIndex){
2299             var row = this.touchViewListGroup.createChild(template);
2300
2301             if(this.displayField && typeof(d.data[this.displayField]) != 'undefined'){
2302                 row.select('.roo-combobox-list-group-item-value', true).first().dom.innerHTML = d.data[this.displayField];
2303             }
2304
2305             if(!this.multiple && this.valueField && typeof(d.data[this.valueField]) != 'undefined' && d.data[this.valueField] == this.getValue()){
2306                 row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
2307             }
2308
2309             if(this.multiple && this.valueField && typeof(d.data[this.valueField]) != 'undefined' && this.getValue().indexOf(d.data[this.valueField]) != -1){
2310                 row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
2311                 this.tickItems.push(d.data);
2312             }
2313
2314             row.on('click', this.onTouchViewClick, this, {row : row, rowIndex : rowIndex});
2315
2316         }, this);
2317
2318         var firstChecked = this.touchViewListGroup.select('.list-group-item > .roo-combobox-list-group-item-box > input:checked', true).first();
2319
2320         var bodyHeight = Roo.lib.Dom.getViewHeight() - this.touchViewFooterEl.getHeight() + this.touchViewBodyEl.getPadding('tb');
2321
2322         if(this.fieldLabel.length){
2323             bodyHeight = bodyHeight - this.touchViewHeaderEl.getHeight();
2324         }
2325
2326         var listHeight = this.touchViewListGroup.getHeight();
2327
2328         var _this = this;
2329
2330         if(firstChecked && listHeight > bodyHeight){
2331             (function() { firstChecked.findParent('li').scrollIntoView(_this.touchViewListGroup.dom); }).defer(500);
2332         }
2333
2334     },
2335
2336     onTouchViewLoadException : function()
2337     {
2338         this.hideTouchView();
2339     },
2340
2341     onTouchViewEmptyResults : function()
2342     {
2343         this.clearTouchView();
2344
2345         this.touchViewListGroup.createChild(Roo.bootstrap.ComboBox.emptyResult);
2346
2347         this.touchViewListGroup.select('.roo-combobox-touch-view-empty-result', true).first().dom.innerHTML = this.emptyResultText;
2348
2349     },
2350
2351     clearTouchView : function()
2352     {
2353         this.touchViewListGroup.dom.innerHTML = '';
2354     },
2355
2356     onTouchViewClick : function(e, el, o)
2357     {
2358         e.preventDefault();
2359
2360         var row = o.row;
2361         var rowIndex = o.rowIndex;
2362
2363         var r = this.store.getAt(rowIndex);
2364
2365         if(!this.multiple){
2366             Roo.each(this.touchViewListGroup.select('.list-group-item > .roo-combobox-list-group-item-box > input:checked', true).elements, function(c){
2367                 c.dom.removeAttribute('checked');
2368             }, this);
2369
2370             row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
2371
2372             this.setFromData(r.data);
2373
2374             var close = this.closeTriggerEl();
2375
2376             if(close){
2377                 close.show();
2378             }
2379
2380             this.hideTouchView();
2381
2382             this.fireEvent('select', this, r, rowIndex);
2383
2384             return;
2385         }
2386
2387         if(this.valueField && typeof(r.data[this.valueField]) != 'undefined' && this.getValue().indexOf(r.data[this.valueField]) != -1){
2388             row.select('.roo-combobox-list-group-item-box > input', true).first().dom.removeAttribute('checked');
2389             this.tickItems.splice(this.tickItems.indexOf(r.data), 1);
2390             return;
2391         }
2392
2393         row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
2394         this.addItem(r.data);
2395         this.tickItems.push(r.data);
2396
2397     }
2398
2399
2400     /**
2401     * @cfg {Boolean} grow
2402     * @hide
2403     */
2404     /**
2405     * @cfg {Number} growMin
2406     * @hide
2407     */
2408     /**
2409     * @cfg {Number} growMax
2410     * @hide
2411     */
2412     /**
2413      * @hide
2414      * @method autoSize
2415      */
2416 });
2417
2418 Roo.apply(Roo.bootstrap.ComboBox,  {
2419
2420     header : {
2421         tag: 'div',
2422         cls: 'modal-header',
2423         cn: [
2424             {
2425                 tag: 'h4',
2426                 cls: 'modal-title'
2427             }
2428         ]
2429     },
2430
2431     body : {
2432         tag: 'div',
2433         cls: 'modal-body',
2434         cn: [
2435             {
2436                 tag: 'ul',
2437                 cls: 'list-group'
2438             }
2439         ]
2440     },
2441
2442     listItemRadio : {
2443         tag: 'li',
2444         cls: 'list-group-item',
2445         cn: [
2446             {
2447                 tag: 'span',
2448                 cls: 'roo-combobox-list-group-item-value'
2449             },
2450             {
2451                 tag: 'div',
2452                 cls: 'roo-combobox-list-group-item-box pull-xs-right radio-inline radio radio-info',
2453                 cn: [
2454                     {
2455                         tag: 'input',
2456                         type: 'radio'
2457                     },
2458                     {
2459                         tag: 'label'
2460                     }
2461                 ]
2462             }
2463         ]
2464     },
2465
2466     listItemCheckbox : {
2467         tag: 'li',
2468         cls: 'list-group-item',
2469         cn: [
2470             {
2471                 tag: 'span',
2472                 cls: 'roo-combobox-list-group-item-value'
2473             },
2474             {
2475                 tag: 'div',
2476                 cls: 'roo-combobox-list-group-item-box pull-xs-right checkbox-inline checkbox checkbox-info',
2477                 cn: [
2478                     {
2479                         tag: 'input',
2480                         type: 'checkbox'
2481                     },
2482                     {
2483                         tag: 'label'
2484                     }
2485                 ]
2486             }
2487         ]
2488     },
2489
2490     emptyResult : {
2491         tag: 'div',
2492         cls: 'alert alert-danger roo-combobox-touch-view-empty-result'
2493     },
2494
2495     footer : {
2496         tag: 'div',
2497         cls: 'modal-footer',
2498         cn: [
2499             {
2500                 tag: 'div',
2501                 cls: 'row',
2502                 cn: [
2503                     {
2504                         tag: 'div',
2505                         cls: 'col-xs-6 text-left',
2506                         cn: {
2507                             tag: 'button',
2508                             cls: 'btn btn-danger roo-touch-view-cancel',
2509                             html: 'Cancel'
2510                         }
2511                     },
2512                     {
2513                         tag: 'div',
2514                         cls: 'col-xs-6 text-right',
2515                         cn: {
2516                             tag: 'button',
2517                             cls: 'btn btn-success roo-touch-view-ok',
2518                             html: 'OK'
2519                         }
2520                     }
2521                 ]
2522             }
2523         ]
2524
2525     }
2526 });
2527
2528 Roo.apply(Roo.bootstrap.ComboBox,  {
2529
2530     touchViewTemplate : {
2531         tag: 'div',
2532         cls: 'modal fade roo-combobox-touch-view',
2533         cn: [
2534             {
2535                 tag: 'div',
2536                 cls: 'modal-dialog',
2537                 cn: [
2538                     {
2539                         tag: 'div',
2540                         cls: 'modal-content',
2541                         cn: [
2542                             Roo.bootstrap.ComboBox.header,
2543                             Roo.bootstrap.ComboBox.body,
2544                             Roo.bootstrap.ComboBox.footer
2545                         ]
2546                     }
2547                 ]
2548             }
2549         ]
2550     }
2551 });