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

   1
   2 /**
   3  * @class Roo.bootstrap.MoneyField
   4  * @extends Roo.bootstrap.ComboBox
   5  * Bootstrap MoneyField class
   6  *
   7  * @constructor
   8  * Create a new MoneyField.
   9  * @param {Object} config Configuration options
  10  */
  11
  12 Roo.bootstrap.MoneyField = function(config) {
  13
  14     Roo.bootstrap.MoneyField.superclass.constructor.call(this, config);
  15
  16 };
  17
  18 Roo.extend(Roo.bootstrap.MoneyField, Roo.bootstrap.ComboBox, {
  19
  20     inputlg : 9,
  21     inputmd : 9,
  22     inputsm : 9,
  23     inputxs : 6,
  24
  25     store : false,
  26
  27     getAutoCreate : function()
  28     {
  29         var align = this.labelAlign || this.parentLabelAlign();
  30
  31         var id = Roo.id();
  32
  33         var cfg = {
  34             cls: 'form-group',
  35             cn: []
  36         };
  37
  38         var input =  {
  39             tag: 'input',
  40             id : id,
  41             cls : 'form-control roo-money-amount-input',
  42             autocomplete: 'new-password'
  43         };
  44
  45         if (this.name) {
  46             input.name = this.name;
  47         }
  48
  49         if (this.disabled) {
  50             input.disabled = true;
  51         }
  52
  53         var clg = 12 - this.inputlg;
  54         var cmd = 12 - this.inputmd;
  55         var csm = 12 - this.inputsm;
  56         var cxs = 12 - this.inputxs;
  57
  58         var container = {
  59             tag : 'div',
  60             cls : 'row roo-money-field',
  61             cn : [
  62                 {
  63                     tag : 'div',
  64                     cls : 'roo-money-currency column col-lg-' + clg + ' col-md-' + cmd + ' col-sm-' + csm + ' col-xs-' + cxs,
  65                     cn : [
  66                         {
  67                             tag : 'div',
  68                             cls: 'roo-select2-container input-group',
  69                             cn: [
  70                                 {
  71                                     tag : 'input',
  72                                     cls : 'form-control roo-money-currency-input',
  73                                     autocomplete: 'new-password'
  74                                 },
  75                                 {
  76                                     tag :'span',
  77                                     cls : 'input-group-addon',
  78                                     cn : [
  79                                         {
  80                                             tag: 'span',
  81                                             cls: 'caret'
  82                                         }
  83                                     ]
  84                                 }
  85                             ]
  86                         }
  87                     ]
  88                 },
  89                 {
  90                     tag : 'div',
  91                     cls : 'roo-money-amount column col-lg-' + this.inputlg + ' col-md-' + this.inputmd + ' col-sm-' + this.inputsm + ' col-xs-' + this.inputxs,
  92                     cn : [
  93                         {
  94                             tag: 'div',
  95                             cls: this.hasFeedback ? 'has-feedback' : '',
  96                             cn: [
  97                                 input
  98                             ]
  99                         }
 100                     ]
 101                 }
 102             ]
 103
 104         };
 105
 106         if (this.fieldLabel.length) {
 107             var indicator = {
 108                 tag: 'i',
 109                 tooltip: 'This field is required'
 110             };
 111
 112             var label = {
 113                 tag: 'label',
 114                 'for':  id,
 115                 cls: 'control-label',
 116                 cn: []
 117             };
 118
 119             var label_text = {
 120                 tag: 'span',
 121                 html: this.fieldLabel
 122             };
 123
 124             indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star left-indicator';
 125             label.cn = [
 126                 indicator,
 127                 label_text
 128             ];
 129
 130             if(this.indicatorpos == 'right') {
 131                 indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star right-indicator';
 132                 label.cn = [
 133                     label_text,
 134                     indicator
 135                 ];
 136             }
 137
 138             if(align == 'left') {
 139                 container = {
 140                     tag: 'div',
 141                     cn: [
 142                         container
 143                     ]
 144                 };
 145
 146                 if(this.labelWidth > 12){
 147                     label.style = "width: " + this.labelWidth + 'px';
 148                 }
 149                 if(this.labelWidth < 13 && this.labelmd == 0){
 150                     this.labelmd = this.labelWidth;
 151                 }
 152                 if(this.labellg > 0){
 153                     label.cls += ' col-lg-' + this.labellg;
 154                     input.cls += ' col-lg-' + (12 - this.labellg);
 155                 }
 156                 if(this.labelmd > 0){
 157                     label.cls += ' col-md-' + this.labelmd;
 158                     container.cls += ' col-md-' + (12 - this.labelmd);
 159                 }
 160                 if(this.labelsm > 0){
 161                     label.cls += ' col-sm-' + this.labelsm;
 162                     container.cls += ' col-sm-' + (12 - this.labelsm);
 163                 }
 164                 if(this.labelxs > 0){
 165                     label.cls += ' col-xs-' + this.labelxs;
 166                     container.cls += ' col-xs-' + (12 - this.labelxs);
 167                 }
 168             }
 169         }
 170
 171         cfg.cn = [
 172             label,
 173             container
 174         ];
 175
 176         var settings = this;
 177
 178         ['xs','sm','md','lg'].map(function(size){
 179             if (settings[size]) {
 180                 cfg.cls += ' col-' + size + '-' + settings[size];
 181             }
 182         });
 183
 184         return cfg;
 185     },
 186
 187     initEvents : function()
 188     {
 189         if (!this.store) {
 190             throw "can not find store for combo";
 191         }
 192
 193         this.store = Roo.factory(this.store, Roo.data);
 194         this.store.parent = this;
 195
 196         this.createList();
 197
 198         this.indicator = this.indicatorEl();
 199
 200         this.triggerEl = this.el.select('.input-group-addon', true).first();
 201
 202         this.triggerEl.on("click", this.onTriggerClick, this, { preventDefault : true });
 203
 204         this.currencyEl = this.el.select('.roo-money-currency-input', true).first();
 205
 206         this.amountEl = this.el.select('.roo-money-amount-input', true).first();
 207
 208     },
 209
 210     onTriggerClick : function(e)
 211     {
 212         if(this.disabled){
 213             return;
 214         }
 215
 216         this.page = 0;
 217         this.loadNext = false;
 218
 219         if(this.isExpanded()){
 220             this.collapse();
 221             return;
 222         }
 223         Roo.log('run on trigger click');
 224         if(this.triggerAction == 'all') {
 225             this.doQuery(this.allQuery, true);
 226             return;
 227         }
 228
 229         this.doQuery(this.getRawValue());
 230     },
 231
 232     restrictHeight : function()
 233     {
 234         this.list.alignTo(this.currencyEl, this.listAlign);
 235         this.list.alignTo(this.currencyEl, this.listAlign);
 236     }
 237
 238 });