git.roojs.org Git - roojs1/blob - examples/bootstrap/TabPanel-ComboBox.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                     '|xns' : 'Roo.bootstrap',
  32                     xtype : 'Container',
  33                     cls : 'content',
  34                     xns : Roo.bootstrap,
  35                     style : 'margin-top:100px',
  36                     items : [
  37                         {
  38                             '|xns' : 'Roo.bootstrap',
  39                             xtype : 'Container',
  40                             cls : 'pad-wrapper',
  41                             xns : Roo.bootstrap,
  42                             items : [
  43                                 {
  44                                     '|xns' : 'Roo.bootstrap',
  45                                     xtype : 'Container',
  46                                     cls : 'container alpha',
  47                                     xns : Roo.bootstrap,
  48                                     items : [
  49                                         {
  50                                             '|xns' : 'Roo.bootstrap',
  51                                             xtype : 'Container',
  52                                             xns : Roo.bootstrap,
  53                                             items : [
  54                                                 {
  55                                                     '|xns' : 'Roo.bootstrap',
  56                                                     xtype : 'NavSimplebar',
  57                                                     xns : Roo.bootstrap,
  58                                                     items : [
  59                                                         {
  60                                                             '|xns' : 'Roo.bootstrap',
  61                                                             navId : '#top',
  62                                                             xtype : 'NavGroup',
  63                                                             xns : Roo.bootstrap,
  64                                                             type : 'pills',
  65                                                             listeners : {
  66                                                                 render : function (_self)
  67                                                                    {
  68                                                                         _this.navGroup = this;
  69                                                                    }
  70                                                             },
  71                                                             items : [
  72                                                                 {
  73                                                                     '|xns' : 'Roo.bootstrap',
  74                                                                     tabId : '#one',
  75                                                                     xtype : 'NavItem',
  76                                                                     preventDefault : true,
  77                                                                     html : 1,
  78                                                                     xns : Roo.bootstrap,
  79                                                                     active : true,
  80                                                                     listeners : {
  81                                                                         render : function (_self)
  82                                                                            {
  83                                                                               _this.one = this;
  84
  85                                                                            }
  86                                                                     }
  87                                                                 },
  88                                                                 {
  89                                                                     '|xns' : 'Roo.bootstrap',
  90                                                                     tabId : '#two',
  91                                                                     xtype : 'NavItem',
  92                                                                     preventDefault : true,
  93                                                                     html : 2,
  94                                                                     xns : Roo.bootstrap,
  95                                                                     active : false,
  96                                                                     listeners : {
  97                                                                         render : function (_self)
  98                                                                            {
  99                                                                               _this.two = this;
 100
 101                                                                            }
 102                                                                     }
 103                                                                 }
 104                                                             ]
 105
 106                                                         }
 107                                                     ]
 108
 109                                                 },
 110                                                 {
 111                                                     '|xns' : 'Roo.bootstrap',
 112                                                     xtype : 'TabGroup',
 113                                                     style : 'margin-top:20px;',
 114                                                     xns : Roo.bootstrap,
 115                                                     navId : '#top',
 116                                                     carousel : true,
 117                                                     items : [
 118                                                         {
 119                                                             '|xns' : 'Roo.bootstrap',
 120                                                             tabId : '#one',
 121                                                             xtype : 'TabPanel',
 122                                                             xns : Roo.bootstrap,
 123                                                             navId : '#top',
 124                                                             active : true,
 125                                                             items : [
 126                                                                 {
 127                                                                     '|xns' : 'Roo.bootstrap',
 128                                                                     level : 4,
 129                                                                     xtype : 'Header',
 130                                                                     html : 'First TabPanel With ComboBox',
 131                                                                     xns : Roo.bootstrap
 132                                                                 },
 133                                                                 {
 134                                                                     '|xns' : 'Roo.bootstrap',
 135                                                                     xtype : 'Container',
 136                                                                     well : 'md',
 137                                                                     xns : Roo.bootstrap,
 138                                                                     items : [
 139                                                                         {
 140                                                                             '|xns' : 'Roo.bootstrap',
 141                                                                             xtype : 'Row',
 142                                                                             xns : Roo.bootstrap,
 143                                                                             items : [
 144                                                                                 {
 145                                                                                     '|xns' : 'Roo.bootstrap',
 146                                                                                     md : 12,
 147                                                                                     xtype : 'Column',
 148                                                                                     xns : Roo.bootstrap,
 149                                                                                     items : [
 150                                                                                         {
 151                                                                                             '|xns' : 'Roo.bootstrap',
 152                                                                                             labelAlign : 'top',
 153                                                                                             fieldLabel : 'Family Name',
 154                                                                                             xtype : 'Input',
 155                                                                                             allowBlank : true,
 156                                                                                             xns : Roo.bootstrap,
 157                                                                                             name : 'lastname'
 158                                                                                         }
 159                                                                                     ]
 160
 161                                                                                 }
 162                                                                             ]
 163
 164                                                                         }
 165                                                                     ]
 166
 167                                                                 }
 168                                                             ]
 169
 170                                                         },
 171                                                         {
 172                                                             '|xns' : 'Roo.bootstrap',
 173                                                             tabId : '#two',
 174                                                             xtype : 'TabPanel',
 175                                                             xns : Roo.bootstrap,
 176                                                             navId : '#top',
 177                                                             active : false,
 178                                                             items : [
 179                                                                 {
 180                                                                     '|xns' : 'Roo.bootstrap',
 181                                                                     level : 4,
 182                                                                     xtype : 'Header',
 183                                                                     html : 'Country and Languages',
 184                                                                     xns : Roo.bootstrap
 185                                                                 },
 186                                                                 {
 187                                                                     '|xns' : 'Roo.bootstrap',
 188                                                                     xtype : 'Container',
 189                                                                     well : 'md',
 190                                                                     xns : Roo.bootstrap,
 191                                                                     items : [
 192                                                                         {
 193                                                                             '|xns' : 'Roo.bootstrap',
 194                                                                             xtype : 'Row',
 195                                                                             xns : Roo.bootstrap,
 196                                                                             items : [
 197                                                                                 {
 198                                                                                     '|xns' : 'Roo.bootstrap',
 199                                                                                     md : 6,
 200                                                                                     xtype : 'Column',
 201                                                                                     xns : Roo.bootstrap,
 202                                                                                     items : [
 203                                                                                         {
 204                                                                                             store : {
 205                                                                                                 proxy : {
 206                                                                                                     '|xns' : 'Roo.data',
 207                                                                                                     xtype : 'HttpProxy',
 208                                                                                                     xns : Roo.data,
 209                                                                                                     method : 'GET',
 210                                                                                                     url : baseURL+'/Geoip/Country'
 211                                                                                                 },
 212                                                                                                 reader : {
 213                                                                                                     '|xns' : 'Roo.data',
 214                                                                                                     xtype : 'JsonReader',
 215                                                                                                     xns : Roo.data,
 216                                                                                                     fields : [
 217                                                                                                         {
 218                                                                                                             'name': 'id',
 219                                                                                                             'type': 'int'
 220                                                                                                         },
 221                                                                                                         {
 222                                                                                                             'name': 'name',
 223                                                                                                             'type': 'string'
 224                                                                                                         }
 225                                                                                                     ]
 226                                                                                                 },
 227                                                                                                 '|xns' : 'Roo.data',
 228                                                                                                 xtype : 'Store',
 229                                                                                                 xns : Roo.data,
 230                                                                                                 sortInfo : {field:"name",direction:"ASC"},
 231                                                                                                 listeners : {
 232                                                                                                         beforeload : function (_self, options)
 233                                                                                                            {
 234
 235                                                                                                            }
 236                                                                                                 },
 237                                                                                                 items : [
 238
 239                                                                                                 ]
 240
 241                                                                                             },
 242                                                                                             '|xns' : 'Roo.bootstrap',
 243                                                                                             name : 'country',
 244                                                                                             minChars : 2,
 245                                                                                             valueField : 'id',
 246                                                                                             queryParam : 'query[name]',
 247                                                                                             typeAhead : true,
 248                                                                                             xtype : 'ComboBox',
 249                                                                                             triggerAction : 'all',
 250                                                                                             editable : true,
 251                                                                                             alwaysQuery : true,
 252                                                                                             listWidth : 500,
 253                                                                                             xns : Roo.bootstrap,
 254                                                                                             tpl : '<div class=\"select2-result\"><b>{name}</b></div>',
 255                                                                                             fieldLabel : 'Country of Residence',
 256                                                                                             hiddenName : 'country',
 257                                                                                             displayField : 'name',
 258                                                                                             append : true,
 259                                                                                             listeners : {
 260                                                                                                 render : function (_self)
 261                                                                                                    {
 262                                                                                                       this.el.select('span').removeClass('btn');
 263                                                                                                    },
 264                                                                                                 select : function (combo, record, index)
 265                                                                                                    {
 266                                                                                                        this.opt_id = record.data.id;
 267                                                                                                        _this.country = this;
 268                                                                                                    }
 269                                                                                             },
 270                                                                                             items : [
 271
 272                                                                                             ]
 273
 274                                                                                         }
 275                                                                                     ]
 276
 277                                                                                 },
 278                                                                                 {
 279                                                                                     '|xns' : 'Roo.bootstrap',
 280                                                                                     md : 6,
 281                                                                                     xtype : 'Column',
 282                                                                                     xns : Roo.bootstrap,
 283                                                                                     items : [
 284                                                                                         {
 285                                                                                             store : {
 286                                                                                                 proxy : {
 287                                                                                                     '|xns' : 'Roo.data',
 288                                                                                                     xtype : 'HttpProxy',
 289                                                                                                     xns : Roo.data,
 290                                                                                                     method : 'GET',
 291                                                                                                     url : baseURL+'/Geoip/City'
 292                                                                                                 },
 293                                                                                                 reader : {
 294                                                                                                     '|xns' : 'Roo.data',
 295                                                                                                     xtype : 'JsonReader',
 296                                                                                                     fields : [
 297                                                                                                         {
 298                                                                                                             'name': 'id',
 299                                                                                                             'type': 'int'
 300                                                                                                         },
 301                                                                                                         {
 302                                                                                                             'name': 'name',
 303                                                                                                             'type': 'string'
 304                                                                                                         }
 305
 306                                                                                                     ],
 307                                                                                                     xns : Roo.data
 308                                                                                                 },
 309                                                                                                 '|xns' : 'Roo.data',
 310                                                                                                 xtype : 'Store',
 311                                                                                                 xns : Roo.data,
 312                                                                                                 sortInfo : {field:"name",direction:"ASC"},
 313                                                                                                 listeners : {
 314                                                                                                         beforeload : function (_self, options)
 315                                                                                                            {
 316                                                                                                                    options.params.country_id = _this.country.opt_id;
 317                                                                                                            }
 318                                                                                                 },
 319                                                                                                 items : [
 320
 321                                                                                                 ]
 322
 323                                                                                             },
 324                                                                                             '|xns' : 'Roo.bootstrap',
 325                                                                                             name : 'city',
 326                                                                                             minChars : 2,
 327                                                                                             valueField : 'id',
 328                                                                                             queryParam : 'query[name]',
 329                                                                                             typeAhead : true,
 330                                                                                             xtype : 'ComboBox',
 331                                                                                             triggerAction : 'all',
 332                                                                                             editable : true,
 333                                                                                             alwaysQuery : true,
 334                                                                                             listWidth : 500,
 335                                                                                             xns : Roo.bootstrap,
 336                                                                                             tpl : '<div class=\"select2-result\"><b>{name}</b></div>',
 337                                                                                             fieldLabel : 'City',
 338                                                                                             hiddenName : 'city',
 339                                                                                             displayField : 'name',
 340                                                                                             append : true,
 341                                                                                             listeners : {
 342                                                                                                 render : function (_self)
 343                                                                                                    {
 344                                                                                                       this.el.select('span').removeClass('btn');
 345                                                                                                    }
 346                                                                                             },
 347                                                                                             items : [
 348
 349                                                                                             ]
 350
 351                                                                                         }
 352                                                                                     ]
 353
 354                                                                                 }
 355                                                                             ]
 356
 357                                                                         },
 358                                                                         {
 359                                                                             '|xns' : 'Roo.bootstrap',
 360                                                                             xtype : 'Row',
 361                                                                             xns : Roo.bootstrap,
 362                                                                             items : [
 363                                                                                 {
 364                                                                                     '|xns' : 'Roo.bootstrap',
 365                                                                                     md : 6,
 366                                                                                     xtype : 'Column',
 367                                                                                     xns : Roo.bootstrap,
 368                                                                                     items : [
 369                                                                                         {
 370                                                                                             store : {
 371                                                                                                 proxy : {
 372                                                                                                     '|xns' : 'Roo.data',
 373                                                                                                     xtype : 'HttpProxy',
 374                                                                                                     xns : Roo.data,
 375                                                                                                     method : 'GET',
 376                                                                                                     url : baseURL+'/Roo/Core_enum'
 377                                                                                                 },
 378                                                                                                 reader : {
 379                                                                                                     '|xns' : 'Roo.data',
 380                                                                                                     xtype : 'JsonReader',
 381                                                                                                     xns : Roo.data,
 382                                                                                                     fields : [
 383                                                                                                         {
 384                                                                                                             'name': 'id',
 385                                                                                                             'type': 'int'
 386                                                                                                         },
 387                                                                                                         {
 388                                                                                                             'name': 'name',
 389                                                                                                             'type': 'string'
 390                                                                                                         },
 391                                                                                                         {
 392                                                                                                             'name': 'display_name',
 393                                                                                                             'type': 'string'
 394                                                                                                         }
 395                                                                                                     ]
 396                                                                                                 },
 397                                                                                                 '|xns' : 'Roo.data',
 398                                                                                                 xtype : 'Store',
 399                                                                                                 sortInfo : {field:"display_name",direction:"ASC"},
 400                                                                                                 xns : Roo.data,
 401                                                                                                 listeners : {
 402                                                                                                         beforeload : function (_self, options)
 403                                                                                                            {
 404                                                                                                                    options.params.etype='Hydra.LanguageSpoken';
 405
 406                                                                                                                    var selected = _this.lang.getValue();
 407                                                                                                                    if(selected.length){
 408                                                                                                                        options.params._skip = selected;
 409                                                                                                                    }
 410                                                                                                            }
 411                                                                                                 },
 412                                                                                                 items : [
 413
 414                                                                                                 ]
 415
 416                                                                                             },
 417                                                                                             '|xns' : 'Roo.bootstrap',
 418                                                                                             minChars : 2,
 419                                                                                             name : '',
 420                                                                                             valueField : 'id',
 421                                                                                             queryParam : 'query[search]',
 422                                                                                             xtype : 'ComboBox',
 423                                                                                             triggerAction : 'all',
 424                                                                                             editable : false,
 425                                                                                             alwaysQuery : true,
 426                                                                                             listWidth : 500,
 427                                                                                             xns : Roo.bootstrap,
 428                                                                                             tpl : '<div class=\"select2-result\"><b>{display_name}</b></div>',
 429                                                                                             fieldLabel : 'First (Native) Language',
 430                                                                                             hiddenName : 'lang',
 431                                                                                             displayField : 'display_name',
 432                                                                                             forceSelection : true,
 433                                                                                             listeners : {
 434                                                                                                 render : function (_self)
 435                                                                                                    {
 436                                                                                                           this.el.select('span').removeClass('btn');
 437                                                                                                    }
 438                                                                                             },
 439                                                                                             items : [
 440
 441                                                                                             ]
 442
 443                                                                                         }
 444                                                                                     ]
 445
 446                                                                                 },
 447                                                                                 {
 448                                                                                     '|xns' : 'Roo.bootstrap',
 449                                                                                     md : 6,
 450                                                                                     xtype : 'Column',
 451                                                                                     xns : Roo.bootstrap,
 452                                                                                     items : [
 453                                                                                         {
 454                                                                                             store : {
 455                                                                                                 proxy : {
 456                                                                                                     '|xns' : 'Roo.data',
 457                                                                                                     xtype : 'HttpProxy',
 458                                                                                                     xns : Roo.data,
 459                                                                                                     method : 'GET',
 460                                                                                                     url : baseURL+'/Roo/Core_enum'
 461                                                                                                 },
 462                                                                                                 reader : {
 463                                                                                                     '|xns' : 'Roo.data',
 464                                                                                                     xtype : 'JsonReader',
 465                                                                                                     fields : [
 466                                                                                                         {
 467                                                                                                             'name': 'id',
 468                                                                                                             'type': 'int'
 469                                                                                                         },
 470                                                                                                         {
 471                                                                                                             'name': 'display_name',
 472                                                                                                             'type': 'string'
 473                                                                                                         }
 474                                                                                                     ],
 475                                                                                                     xns : Roo.data
 476                                                                                                 },
 477                                                                                                 '|xns' : 'Roo.data',
 478                                                                                                 xtype : 'Store',
 479                                                                                                 xns : Roo.data,
 480                                                                                                 sortInfo : {field:"display_name",direction:"ASC"},
 481                                                                                                 listeners : {
 482                                                                                                         beforeload : function (_self, options)
 483                                                                                                            {
 484                                                                                                                    options.params.etype='Hydra.LanguageSpoken';
 485
 486                                                                                                                    /*var selected = _this.lang.getValue();
 487                                                                                                                    if(selected.length){
 488                                                                                                                        options.params._skip = selected;
 489                                                                                                                    }*/
 490                                                                                                            }
 491                                                                                                 },
 492                                                                                                 items : [
 493
 494                                                                                                 ]
 495
 496                                                                                             },
 497                                                                                             '|xns' : 'Roo.bootstrap',
 498                                                                                             minChars : 2,
 499                                                                                             cls : 'col-md-12',
 500                                                                                             name : '',
 501                                                                                             valueField : 'id',
 502                                                                                             editNotList : true,
 503                                                                                             queryParam : 'query[search]',
 504                                                                                             xtype : 'ComboBox',
 505                                                                                             triggerAction : 'all',
 506                                                                                             editable : true,
 507                                                                                             alwaysQuery : true,
 508                                                                                             listWidth : 400,
 509                                                                                             xns : Roo.bootstrap,
 510                                                                                             fieldLabel : 'Other Languages Spoken',
 511                                                                                             hiddenName : 'lang_multi',
 512                                                                                             multiple : true,
 513                                                                                             tickable : true,
 514                                                                                             displayField : 'display_name',
 515                                                                                             forceSelection : true,
 516                                                                                             listeners : {
 517                                                                                                 render : function (_self)
 518                                                                                                    {
 519                                                                                                        _this.lang = this;
 520                                                                                                    }
 521                                                                                             },
 522                                                                                             items : [
 523
 524                                                                                             ]
 525
 526                                                                                         }
 527                                                                                     ]
 528
 529                                                                                 }
 530                                                                             ]
 531
 532                                                                         }
 533                                                                     ]
 534
 535                                                                 }
 536                                                             ]
 537
 538                                                         }
 539                                                     ]
 540
 541                                                 }
 542                                             ]
 543
 544                                         }
 545                                     ]
 546
 547                                 }
 548                             ]
 549
 550                         }
 551                     ]
 552
 553                 }
 554             ]
 555         };
 556     }
 557 });