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

   1
   2
   3 Roo.example = Roo.example || {};
   4
   5 Roo.example.combobox = new Roo.XComponent({
   6     part     :  ["example","combobox"],
   7     order    : '001-viewpanel',
   8     region   : '',
   9     parent   : false,
  10     name     : "unnamed module",
  11     disabled : false,
  12     permname : '',
  13     _tree : function()
  14     {
  15
  16         this.parent = {
  17             el : new Roo.bootstrap.Body()
  18         }
  19         this.parent.el.layout = false;
  20         this.parent.el.render(document.body);
  21
  22         var _this = this;
  23         var MODULE = this;
  24
  25         return {
  26             xtype: 'Body',
  27             xns: Roo.bootstrap,
  28             items : [
  29                  {
  30                     xtype: 'ComboBox',
  31                     xns: Roo.bootstrap,
  32                     placeholder : 'Select a country',
  33                     displayField : 'title',
  34                     hiddenName : 'country_id',
  35                     md : '12',
  36                     size : 'sm',
  37                     name : 'title',
  38                     triggerAction : 'all',
  39                     minChars : '1',
  40                     tpl : '<li class="roo-select2-result"><b>{title}</b></div>',
  41                     listWidth : '400',
  42                     multiple: true,
  43                     listeners : {
  44                         render : function (_self) {
  45                             _this.countrySel = _self;
  46                         }
  47                     },
  48                     forceSelection : true,
  49                     valueField : 'id',
  50                     queryParam : 'query[name]',
  51                     editable : true,
  52                     alwaysQuery : true,
  53                     allowBlank : false,
  54                     fieldLabel : 'Country',
  55                     pageSize : '10',
  56                     append: true,
  57                     store : {
  58                         xtype: 'Store',
  59                         xns: Roo.data,
  60                         listeners : {
  61                             beforeload : function (_self, o) {
  62                                 o.params = o.params || {};
  63
  64                                 var selected = _this.countrySel.getValue();
  65
  66                                 if(selected.length){
  67                                     o.params._skip = selected;
  68                                 }
  69
  70                             }
  71                         },
  72                         remoteSort : true,
  73                         sortInfo : { direction : 'ASC', field: 'name' },
  74                         proxy : {
  75                             xtype: 'HttpProxy',
  76                             xns: Roo.data,
  77                             url : '../boostrap/data.country.js',
  78                             method : 'GET'
  79                         },
  80                         reader : {
  81                             xtype: 'JsonReader',
  82                             xns: Roo.data,
  83                             fields : [
  84                                 {
  85                                     'name': 'id',
  86                                     'type': 'int'
  87                                 },
  88                                 {
  89                                     'name': 'code',
  90                                     'type': 'string'
  91                                 },
  92                                 {
  93                                     'name': 'title',
  94                                     'type': 'string'
  95                                 }
  96                             ]
  97                         }
  98                     }
  99                 }
 100             ]
 101         };
 102     }
 103 });