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

   1
   2
   3 Roo.example = Roo.example || {};
   4
   5 Roo.example.combobox = new Roo.XComponent({
   6     part     :  ["layout","viewpanel"],
   7     order    : '001-viewpanel',
   8     region   : '',
   9     parent   : '#bootstrap',
  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         var baseURL = '/web.roojsolutions/index.local.php';
  25
  26         return {
  27             xtype: 'Body',
  28             xns: Roo.bootstrap,
  29             items : [
  30                  {
  31                     xtype: 'ComboBox',
  32                     xns: Roo.bootstrap,
  33                     placeholder : 'Select a country',
  34                     displayField : 'title',
  35                     hiddenName : 'country_id',
  36                     md : '12',
  37                     size : 'sm',
  38                     name : 'country_id_name',
  39                     triggerAction : 'all',
  40                     minChars : '1',
  41                     tpl : '<li class="dropdown-item  roo-select2-result "><b>{title}</b></li>',
  42                     listWidth : '400',
  43                     style : 'margin-top:20px;',
  44                     multiple: true,
  45                     listeners : {
  46                         render : function (_self) {
  47                             _this.normalSel = _self;
  48                         }
  49                     },
  50                     forceSelection : true,
  51                     valueField : 'id',
  52                     queryParam : 'query[name]',
  53                     editable : true,
  54                     alwaysQuery : true,
  55                     allowBlank : false,
  56                     fieldLabel : 'Country Normal',
  57                     pageSize : '10',
  58                     append: true,
  59                     store : {
  60                         xtype: 'Store',
  61                         xns: Roo.data,
  62                         listeners : {
  63                             beforeload : function (_self, o) {
  64                                 o.params = o.params || {};
  65
  66                             }
  67                         },
  68                         remoteSort : true,
  69                         sortInfo : { direction : 'ASC', field: 'name' },
  70                         proxy : {
  71                             xtype: 'HttpProxy',
  72                             xns: Roo.data,
  73                             url : '../bootstrap/data.country.js',
  74                             method : 'GET'
  75                         },
  76                         reader : {
  77                             xtype: 'JsonReader',
  78                             xns: Roo.data,
  79                             fields : [
  80                                 {
  81                                     'name': 'id',
  82                                     'type': 'int'
  83                                 },
  84                                 {
  85                                     'name': 'code',
  86                                     'type': 'string'
  87                                 },
  88                                 {
  89                                     'name': 'title',
  90                                     'type': 'string'
  91                                 }
  92                             ]
  93                         }
  94                     }
  95                 },
  96                 {
  97                     xtype: 'ComboBox',
  98                     xns: Roo.bootstrap,
  99                     placeholder : 'Select a country',
 100                     displayField : 'title',
 101                     hiddenName : 'country_id',
 102                     md : '12',
 103                     size : 'sm',
 104                     name : 'country_id_name',
 105                     triggerAction : 'all',
 106                     minChars : '1',
 107 //                    tpl : '<li class="roo-select2-result"><b>{name}</b></div>',
 108                     style : 'margin-top:20px;',
 109                     multiple: true,
 110                     tickable: true,
 111                     listeners : {
 112                         render : function (_self) {
 113                             _this.tickableSel = _self;
 114                         }
 115                     },
 116                     forceSelection : true,
 117                     valueField : 'id',
 118                     queryParam : 'query[title]',
 119                     editable : true,
 120                     alwaysQuery : true,
 121                     allowBlank : false,
 122                     fieldLabel : 'Country With Tickable',
 123                     store : {
 124                         xtype: 'Store',
 125                         xns: Roo.data,
 126                         listeners : {
 127                             beforeload : function (_self, o) {
 128                                 o.params = o.params || {};
 129
 130                             }
 131                         },
 132                         remoteSort : true,
 133                         sortInfo : { direction : 'ASC', field: 'name' },
 134                         proxy : {
 135                             xtype: 'HttpProxy',
 136                             xns: Roo.data,
 137                             url : '../bootstrap/data.country.js',
 138                             method : 'GET'
 139                         },
 140                         reader : {
 141                             xtype: 'JsonReader',
 142                             xns: Roo.data,
 143                             fields : [
 144                                 {
 145                                     'name': 'id',
 146                                     'type': 'int'
 147                                 },
 148                                 {
 149                                     'name': 'code',
 150                                     'type': 'string'
 151                                 },
 152                                 {
 153                                     'name': 'title',
 154                                     'type': 'string'
 155                                 }
 156                             ]
 157                         }
 158                     }
 159                 }
 160             ]
 161         };
 162     }
 163 });