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

   1
   2
   3 Roo.example = Roo.example || {};
   4
   5 Roo.example.TabPanelCombobox = 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 : 'Container',
  32                     cls : 'content',
  33                     xns : Roo.bootstrap,
  34                     style : 'margin-top:100px',
  35                     items : [
  36                         {
  37                             xtype : 'Container',
  38                             cls : 'pad-wrapper',
  39                             xns : Roo.bootstrap,
  40                             items : [
  41                                 {
  42                                     xtype : 'Container',
  43                                     cls : 'container alpha',
  44                                     xns : Roo.bootstrap,
  45                                     items : [
  46                                         {
  47                                             xtype : 'Container',
  48                                             xns : Roo.bootstrap,
  49                                             items : [
  50                                                 {
  51                                                     xtype : 'NavSimplebar',
  52                                                     xns : Roo.bootstrap,
  53                                                     items : [
  54                                                         {
  55                                                             navId : '#top',
  56                                                             xtype : 'NavGroup',
  57                                                             xns : Roo.bootstrap,
  58                                                             type : 'pills',
  59                                                             listeners : {
  60                                                                 render : function (_self)
  61                                                                    {
  62                                                                         _this.navGroup = this;
  63                                                                    }
  64                                                             },
  65                                                             items : [
  66                                                                 {
  67                                                                     tabId : '#one',
  68                                                                     xtype : 'NavItem',
  69                                                                     preventDefault : true,
  70                                                                     html : 1,
  71                                                                     xns : Roo.bootstrap,
  72                                                                     active : true,
  73                                                                     listeners : {
  74                                                                         render : function (_self)
  75                                                                            {
  76                                                                               _this.one = this;
  77
  78                                                                            }
  79                                                                     }
  80                                                                 },
  81                                                                 {
  82                                                                     tabId : '#two',
  83                                                                     xtype : 'NavItem',
  84                                                                     preventDefault : true,
  85                                                                     html : 2,
  86                                                                     xns : Roo.bootstrap,
  87                                                                     active : false,
  88                                                                     listeners : {
  89                                                                         render : function (_self)
  90                                                                            {
  91                                                                               _this.two = this;
  92
  93                                                                            }
  94                                                                     }
  95                                                                 }
  96                                                             ]
  97
  98                                                         }
  99                                                     ]
 100
 101                                                 },
 102                                                 {
 103                                                     xtype : 'TabGroup',
 104                                                     style : 'margin-top:20px;',
 105                                                     xns : Roo.bootstrap,
 106                                                     navId : '#top',
 107                                                     carousel : true,
 108                                                     items : [
 109                                                         {
 110                                                             tabId : '#one',
 111                                                             xtype : 'TabPanel',
 112                                                             xns : Roo.bootstrap,
 113                                                             navId : '#top',
 114                                                             active : true,
 115                                                             items : [
 116                                                                 {
 117                                                                     level : 4,
 118                                                                     xtype : 'Header',
 119                                                                     html : 'First TabPanel With ComboBox',
 120                                                                     xns : Roo.bootstrap
 121                                                                 },
 122                                                                 {
 123                                                                     xtype : 'Container',
 124                                                                     well : 'md',
 125                                                                     xns : Roo.bootstrap,
 126                                                                     items : [
 127                                                                         {
 128                                                                             xtype : 'Row',
 129                                                                             xns : Roo.bootstrap,
 130                                                                             items : [
 131                                                                                 {
 132                                                                                     md : 12,
 133                                                                                     xtype : 'Column',
 134                                                                                     xns : Roo.bootstrap,
 135                                                                                     items : [
 136                                                                                         {
 137                                                                                             xtype: 'ComboBox',
 138                                                                                             xns: Roo.bootstrap,
 139                                                                                             placeholder : 'Select a country',
 140                                                                                             displayField : 'name',
 141                                                                                             hiddenName : 'country_id',
 142                                                                                             md : '12',
 143                                                                                             size : 'sm',
 144                                                                                             name : 'country_id_name',
 145                                                                                             triggerAction : 'all',
 146                                                                                             minChars : '1',
 147                                                                                             tpl : '<li class="select2-result"><b>{name}</b></div>',
 148                                                                                             listWidth : '400',
 149                                                                                             style : 'margin-top:20px;',
 150                                                                                             multiple: true,
 151                                                                                             listeners : {
 152                                                                                                 render : function (_self) {
 153                                                                                                     _this.normalSel = _self;
 154                                                                                                 }
 155                                                                                             },
 156                                                                                             forceSelection : true,
 157                                                                                             valueField : 'id',
 158                                                                                             queryParam : 'query[name]',
 159                                                                                             editable : true,
 160                                                                                             alwaysQuery : true,
 161                                                                                             allowBlank : false,
 162                                                                                             fieldLabel : 'Country Normal',
 163                                                                                             pageSize : '10',
 164                                                                                             append: true,
 165                                                                                             store : {
 166                                                                                                 xtype: 'Store',
 167                                                                                                 xns: Roo.data,
 168                                                                                                 listeners : {
 169                                                                                                     beforeload : function (_self, o) {
 170                                                                                                         o.params = o.params || {};
 171
 172                                                                                                     }
 173                                                                                                 },
 174                                                                                                 remoteSort : true,
 175                                                                                                 sortInfo : { direction : 'ASC', field: 'name' },
 176                                                                                                 proxy : {
 177                                                                                                     xtype: 'HttpProxy',
 178                                                                                                     xns: Roo.data,
 179                                                                                                     url : baseURL + '/Geoip/Core_geoip_country',
 180                                                                                                     method : 'GET'
 181                                                                                                 },
 182                                                                                                 reader : {
 183                                                                                                     xtype: 'JsonReader',
 184                                                                                                     xns: Roo.data,
 185                                                                                                     fields : [
 186                                                                                                         {
 187                                                                                                             'name': 'id',
 188                                                                                                             'type': 'int'
 189                                                                                                         },
 190                                                                                                         {
 191                                                                                                             'name': 'code',
 192                                                                                                             'type': 'string'
 193                                                                                                         },
 194                                                                                                         {
 195                                                                                                             'name': 'name',
 196                                                                                                             'type': 'string'
 197                                                                                                         }
 198                                                                                                     ]
 199                                                                                                 }
 200                                                                                             }
 201                                                                                     ]
 202
 203                                                                                 }
 204                                                                             ]
 205
 206                                                                         }
 207                                                                     ]
 208
 209                                                                 }
 210                                                             ]
 211
 212                                                         },
 213                                                         {
 214                                                             tabId : '#two',
 215                                                             xtype : 'TabPanel',
 216                                                             xns : Roo.bootstrap,
 217                                                             navId : '#top',
 218                                                             active : false,
 219                                                             items : [
 220                                                                 {
 221                                                                     level : 4,
 222                                                                     xtype : 'Header',
 223                                                                     html : 'Second TabPanel With ComboBox',
 224                                                                     xns : Roo.bootstrap
 225                                                                 },
 226                                                                 {
 227                                                                     xtype : 'Container',
 228                                                                     well : 'md',
 229                                                                     xns : Roo.bootstrap,
 230                                                                     items : [
 231                                                                         {
 232                                                                             xtype : 'Row',
 233                                                                             xns : Roo.bootstrap,
 234                                                                             items : [
 235                                                                                 {
 236                                                                                     xtype: 'ComboBox',
 237                                                                                     xns: Roo.bootstrap,
 238                                                                                     placeholder : 'Select a country',
 239                                                                                     displayField : 'name',
 240                                                                                     hiddenName : 'country_id',
 241                                                                                     md : '12',
 242                                                                                     size : 'sm',
 243                                                                                     name : 'country_id_name',
 244                                                                                     triggerAction : 'all',
 245                                                                                     minChars : '1',
 246                                                                 //                    tpl : '<li class="select2-result"><b>{name}</b></div>',
 247                                                                                     style : 'margin-top:20px;',
 248                                                                                     multiple: true,
 249                                                                                     tickable: true,
 250                                                                                     listeners : {
 251                                                                                         render : function (_self) {
 252                                                                                             _this.tickableSel = _self;
 253                                                                                         }
 254                                                                                     },
 255                                                                                     forceSelection : true,
 256                                                                                     valueField : 'id',
 257                                                                                     queryParam : 'query[name]',
 258                                                                                     editable : true,
 259                                                                                     alwaysQuery : true,
 260                                                                                     allowBlank : false,
 261                                                                                     fieldLabel : 'Country With Tickable',
 262                                                                 //                    pageSize : '10',
 263                                                                 //                    append: true,
 264                                                                                     store : {
 265                                                                                         xtype: 'Store',
 266                                                                                         xns: Roo.data,
 267                                                                                         listeners : {
 268                                                                                             beforeload : function (_self, o) {
 269                                                                                                 o.params = o.params || {};
 270
 271                                                                                             }
 272                                                                                         },
 273                                                                                         remoteSort : true,
 274                                                                                         sortInfo : { direction : 'ASC', field: 'name' },
 275                                                                                         proxy : {
 276                                                                                             xtype: 'HttpProxy',
 277                                                                                             xns: Roo.data,
 278                                                                                             url : baseURL + '/Geoip/Core_geoip_country',
 279                                                                                             method : 'GET'
 280                                                                                         },
 281                                                                                         reader : {
 282                                                                                             xtype: 'JsonReader',
 283                                                                                             xns: Roo.data,
 284                                                                                             fields : [
 285                                                                                                 {
 286                                                                                                     'name': 'id',
 287                                                                                                     'type': 'int'
 288                                                                                                 },
 289                                                                                                 {
 290                                                                                                     'name': 'code',
 291                                                                                                     'type': 'string'
 292                                                                                                 },
 293                                                                                                 {
 294                                                                                                     'name': 'name',
 295                                                                                                     'type': 'string'
 296                                                                                                 }
 297                                                                                             ]
 298                                                                                         }
 299                                                                                     }
 300                                                                                 }
 301                                                                             ]
 302
 303                                                                         }
 304                                                                     ]
 305
 306                                                                 }
 307                                                             ]
 308
 309                                                         }
 310                                                     ]
 311
 312                                                 }
 313                                             ]
 314
 315                                         }
 316                                     ]
 317
 318                                 }
 319                             ]
 320
 321                         }
 322                     ]
 323
 324                 }
 325             ]
 326         };
 327     }
 328 });