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