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.eventmanager/demo.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 : 'name',
  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="select2-result"><b>{name}</b></div>',
  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 : baseURL + '/Geoip/Core_geoip_country',
  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': 'name',
  90                                     'type': 'string'
  91                                 }
  92                             ]
  93                         }
  94                     }
  95                 },
  96                 {
  97                     '|xns' : 'Roo.bootstrap',
  98                     xtype : 'Container',
  99                     xns : Roo.bootstrap,
 100                     well : 'md',
 101                     items : [
 102                         {
 103                             '|xns' : 'Roo.bootstrap',
 104                             xtype : 'Row',
 105                             xns : Roo.bootstrap,
 106                             items : [
 107                                 {
 108                                     '|xns' : 'Roo.bootstrap',
 109                                     md : 6,
 110                                     xtype : 'Column',
 111                                     xns : Roo.bootstrap,
 112                                     items : [
 113                                         {
 114                                             store : {
 115                                                 '|xns' : 'Roo.data',
 116                                                 data : [
 117                                                     ['I am actively looking for work','YES'],
 118                                                     [
 119                                                         'Would consider a relivant offer',
 120                                                         'MAYBE'
 121                                                     ],
 122                                                     [
 123                                                        'Not currently interesetd unless meets aspirational goals',
 124                                                        'ASPIRE'
 125                                                     ]
 126                                                 ],
 127                                                 xtype : 'SimpleStore',
 128                                                 xns : Roo.data,
 129                                                 fields : [ 'label','value' ]
 130                                             },
 131                                             '|xns' : 'Roo.bootstrap',
 132                                             selectOnFocus : true,
 133                                             mode : 'local',
 134                                             name : '',
 135                                             valueField : 'value',
 136                                             xtype : 'ComboBox',
 137                                             editable : false,
 138                                             triggerAction : 'all',
 139                                             alwaysQuery : true,
 140                                             placeholder : '',
 141                                             listWidth : 400,
 142                                             xns : Roo.bootstrap,
 143                                             tpl : '<div class=\"select2-result\"><b>{label}</b></div>',
 144                                             fieldLabel : 'How would you describe your career plans',
 145                                             hiddenName : 'employ_plan',
 146                                             displayField : 'label',
 147                                             forceSelection : true,
 148                                             listeners : {
 149                                                 render : function (_self)
 150                                                    {
 151                                                       // this.setValue('Individual');
 152                                                       this.el.select('span').removeClass('btn');
 153                                                    },
 154                                                 select : function (combo, record, index)
 155                                                    {
 156
 157                                                    }
 158                                             },
 159                                             items : [
 160
 161                                             ]
 162
 163                                         }
 164                                     ]
 165
 166                                 }
 167                             ]
 168
 169                         }
 170                     ]
 171
 172                 }
 173             ]
 174         };
 175     }
 176 });