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
  17         var _this = this;
  18         var MODULE = this;
  19
  20         return {
  21             xtype: 'Body',
  22             xns: Roo.bootstrap,
  23             items : [
  24                  {
  25                     xtype : 'Container',
  26                     cls : 'content',
  27                     xns : Roo.bootstrap,
  28                     style : 'margin-top:100px',
  29                     items : [
  30                         {
  31                             xtype : 'Container',
  32                             cls : 'pad-wrapper',
  33                             xns : Roo.bootstrap,
  34                             items : [
  35                                 {
  36                                     xtype : 'Container',
  37                                     cls : 'container alpha',
  38                                     xns : Roo.bootstrap,
  39                                     items : [
  40                                         {
  41                                             xtype : 'Container',
  42                                             xns : Roo.bootstrap,
  43                                             items : [
  44                                                 {
  45                                                     xtype : 'NavSimplebar',
  46                                                     xns : Roo.bootstrap,
  47                                                     items : [
  48                                                         {
  49                                                             navId : '#top',
  50                                                             xtype : 'NavGroup',
  51                                                             xns : Roo.bootstrap,
  52                                                             type : 'pills',
  53                                                             listeners : {
  54                                                                 render : function (_self)
  55                                                                    {
  56                                                                         _this.navGroup = this;
  57                                                                    }
  58                                                             },
  59                                                             items : [
  60                                                                 {
  61                                                                     tabId : '#normal',
  62                                                                     xtype : 'NavItem',
  63                                                                     preventDefault : true,
  64                                                                     html : 'Normal',
  65                                                                     xns : Roo.bootstrap,
  66                                                                     active : true,
  67                                                                     listeners : {
  68                                                                         render : function (_self)
  69                                                                            {
  70                                                                               _this.normal = this;
  71
  72                                                                            }
  73                                                                     }
  74                                                                 },
  75                                                                 {
  76                                                                     tabId : '#multiple',
  77                                                                     xtype : 'NavItem',
  78                                                                     preventDefault : true,
  79                                                                     html : 'Multiple',
  80                                                                     xns : Roo.bootstrap,
  81                                                                     active : false,
  82                                                                     listeners : {
  83                                                                         render : function (_self)
  84                                                                            {
  85                                                                               _this.multiple = this;
  86
  87                                                                            }
  88                                                                     }
  89                                                                 },
  90                                                                 {
  91                                                                     tabId : '#tickable',
  92                                                                     xtype : 'NavItem',
  93                                                                     preventDefault : true,
  94                                                                     html : 'Tickable',
  95                                                                     xns : Roo.bootstrap,
  96                                                                     active : false,
  97                                                                     listeners : {
  98                                                                         render : function (_self)
  99                                                                            {
 100                                                                               _this.tickable = this;
 101
 102                                                                            }
 103                                                                     }
 104                                                                 }
 105                                                             ]
 106
 107                                                         }
 108                                                     ]
 109
 110                                                 },
 111                                                 {
 112                                                     xtype : 'TabGroup',
 113                                                     style : 'margin-top:20px;',
 114                                                     xns : Roo.bootstrap,
 115                                                     navId : '#top',
 116                                                     carousel : true,
 117                                                     items : [
 118                                                         {
 119                                                             tabId : '#normal',
 120                                                             xtype : 'TabPanel',
 121                                                             xns : Roo.bootstrap,
 122                                                             navId : '#top',
 123                                                             active : true,
 124                                                             items : [
 125                                                                 {
 126                                                                     level : 4,
 127                                                                     xtype : 'Header',
 128                                                                     html : 'First TabPanel With ComboBox',
 129                                                                     xns : Roo.bootstrap
 130                                                                 },
 131                                                                 {
 132                                                                     xtype : 'Container',
 133                                                                     well : 'md',
 134                                                                     xns : Roo.bootstrap,
 135                                                                     items : [
 136                                                                         {
 137                                                                             xtype : 'Row',
 138                                                                             xns : Roo.bootstrap,
 139                                                                             items : [
 140                                                                                 {
 141                                                                                     md : 12,
 142                                                                                     xtype : 'Column',
 143                                                                                     xns : Roo.bootstrap,
 144                                                                                     items : [
 145                                                                                         {
 146                                                                                             xtype: 'ComboBox',
 147                                                                                             xns: Roo.bootstrap,
 148                                                                                             placeholder : 'Select a country',
 149                                                                                             displayField : 'title',
 150                                                                                             hiddenName : 'country_id',
 151                                                                                             md : '12',
 152                                                                                             size : 'sm',
 153                                                                                             name : 'country_id_name',
 154                                                                                             triggerAction : 'all',
 155                                                                                             minChars : '1',
 156                                                                                             tpl : '<li class="roo-select2-result"><b>{title}</b></div>',
 157                                                                                             style : 'margin-top:20px;',
 158                                                                                             listeners : {
 159                                                                                                 render : function (_self) {
 160                                                                                                     _this.normalSel = _self;
 161                                                                                                 }
 162                                                                                             },
 163                                                                                             forceSelection : true,
 164                                                                                             valueField : 'id',
 165                                                                                             queryParam : 'query[name]',
 166                                                                                             editable : true,
 167                                                                                             alwaysQuery : true,
 168                                                                                             allowBlank : false,
 169                                                                                             fieldLabel : 'Country Normal',
 170                                                                                             store : {
 171                                                                                                 xtype: 'Store',
 172                                                                                                 xns: Roo.data,
 173                                                                                                 listeners : {
 174                                                                                                     beforeload : function (_self, o) {
 175                                                                                                         o.params = o.params || {};
 176
 177                                                                                                     }
 178                                                                                                 },
 179                                                                                                 remoteSort : true,
 180                                                                                                 sortInfo : { direction : 'ASC', field: 'title' },
 181                                                                                                 proxy : {
 182                                                                                                     xtype: 'HttpProxy',
 183                                                                                                     xns: Roo.data,
 184                                                                                                     url : '../bootstrap/data.country.js',
 185                                                                                                     method : 'GET'
 186                                                                                                 },
 187                                                                                                 reader : {
 188                                                                                                     xtype: 'JsonReader',
 189                                                                                                     xns: Roo.data,
 190                                                                                                     fields : [
 191                                                                                                         {
 192                                                                                                             'name': 'id',
 193                                                                                                             'type': 'int'
 194                                                                                                         },
 195                                                                                                         {
 196                                                                                                             'name': 'code',
 197                                                                                                             'type': 'string'
 198                                                                                                         },
 199                                                                                                         {
 200                                                                                                             'name': 'title',
 201                                                                                                             'type': 'string'
 202                                                                                                         }
 203                                                                                                     ]
 204                                                                                                 }
 205                                                                                             }
 206                                                                                         }
 207                                                                                     ]
 208
 209                                                                                 }
 210                                                                             ]
 211
 212                                                                         }
 213                                                                     ]
 214
 215                                                                 }
 216                                                             ]
 217
 218                                                         },
 219                                                         {
 220                                                             tabId : '#multiple',
 221                                                             xtype : 'TabPanel',
 222                                                             xns : Roo.bootstrap,
 223                                                             navId : '#top',
 224                                                             active : false,
 225                                                             listeners : {
 226                                                                    changed : function (_self, state)
 227                                                                    {
 228                                                                        if(state){
 229                                                                             _this.multipleSel.list.setWidth(Math.max(_this.multipleSel.inputEl().getWidth(), _this.multipleSel.minListWidth));
 230                                                                         }
 231                                                                    }
 232                                                             },
 233                                                             items : [
 234                                                                 {
 235                                                                     level : 4,
 236                                                                     xtype : 'Header',
 237                                                                     html : 'First TabPanel With ComboBox',
 238                                                                     xns : Roo.bootstrap
 239                                                                 },
 240                                                                 {
 241                                                                     xtype : 'Container',
 242                                                                     well : 'md',
 243                                                                     xns : Roo.bootstrap,
 244                                                                     items : [
 245                                                                         {
 246                                                                             xtype : 'Row',
 247                                                                             xns : Roo.bootstrap,
 248                                                                             items : [
 249                                                                                 {
 250                                                                                     md : 12,
 251                                                                                     xtype : 'Column',
 252                                                                                     xns : Roo.bootstrap,
 253                                                                                     items : [
 254                                                                                         {
 255                                                                                             xtype: 'ComboBox',
 256                                                                                             xns: Roo.bootstrap,
 257                                                                                             placeholder : 'Select a country',
 258                                                                                             displayField : 'title',
 259                                                                                             hiddenName : 'country_id',
 260                                                                                             md : '12',
 261                                                                                             size : 'sm',
 262                                                                                             name : 'country_id_name',
 263                                                                                             triggerAction : 'all',
 264                                                                                             minChars : '1',
 265                                                                                             tpl : '<li class="roo-select2-result"><b>{title}</b></div>',
 266                                                                                             style : 'margin-top:20px;',
 267                                                                                             multiple: true,
 268                                                                                             listeners : {
 269                                                                                                 render : function (_self) {
 270                                                                                                     _this.multipleSel = _self;
 271                                                                                                 }
 272                                                                                             },
 273                                                                                             forceSelection : true,
 274                                                                                             valueField : 'id',
 275                                                                                             queryParam : 'query[name]',
 276                                                                                             editable : true,
 277                                                                                             alwaysQuery : true,
 278                                                                                             allowBlank : false,
 279                                                                                             fieldLabel : 'Country Multiple',
 280                                                                                             store : {
 281                                                                                                 xtype: 'Store',
 282                                                                                                 xns: Roo.data,
 283                                                                                                 listeners : {
 284                                                                                                     beforeload : function (_self, o) {
 285                                                                                                         o.params = o.params || {};
 286
 287                                                                                                     }
 288                                                                                                 },
 289                                                                                                 remoteSort : false,
 290                                                                                                 sortInfo : { direction : 'ASC', field: 'title' },
 291                                                                                                 proxy : {
 292                                                                                                     xtype: 'HttpProxy',
 293                                                                                                     xns: Roo.data,
 294                                                                                                     url : '../bootstrap/data.country.js',
 295                                                                                                     method : 'GET'
 296                                                                                                 },
 297                                                                                                 reader : {
 298                                                                                                     xtype: 'JsonReader',
 299                                                                                                     xns: Roo.data,
 300                                                                                                     fields : [
 301                                                                                                         {
 302                                                                                                             'name': 'id',
 303                                                                                                             'type': 'int'
 304                                                                                                         },
 305                                                                                                         {
 306                                                                                                             'name': 'code',
 307                                                                                                             'type': 'string'
 308                                                                                                         },
 309                                                                                                         {
 310                                                                                                             'name': 'title',
 311                                                                                                             'type': 'string'
 312                                                                                                         }
 313                                                                                                     ]
 314                                                                                                 }
 315                                                                                             }
 316                                                                                         }
 317                                                                                     ]
 318
 319                                                                                 }
 320                                                                             ]
 321
 322                                                                         }
 323                                                                     ]
 324
 325                                                                 }
 326                                                             ]
 327
 328                                                         },
 329                                                         {
 330                                                             tabId : '#tickable',
 331                                                             xtype : 'TabPanel',
 332                                                             xns : Roo.bootstrap,
 333                                                             navId : '#top',
 334                                                             active : false,
 335                                                             listeners : {
 336                                                                    changed : function (_self, state)
 337                                                                    {
 338                                                                        if(state){
 339                                                                             _this.tickableSel.list.setWidth(Math.max(_this.tickableSel.inputEl().getWidth(), _this.tickableSel.minListWidth));
 340                                                                         }
 341                                                                    }
 342                                                             },
 343                                                             items : [
 344                                                                 {
 345                                                                     level : 4,
 346                                                                     xtype : 'Header',
 347                                                                     html : 'Second TabPanel With ComboBox',
 348                                                                     xns : Roo.bootstrap
 349                                                                 },
 350                                                                 {
 351                                                                     xtype : 'Container',
 352                                                                     well : 'md',
 353                                                                     xns : Roo.bootstrap,
 354                                                                     items : [
 355                                                                         {
 356                                                                             xtype : 'Row',
 357                                                                             xns : Roo.bootstrap,
 358                                                                             items : [
 359                                                                                 {
 360                                                                                     xtype: 'ComboBox',
 361                                                                                     xns: Roo.bootstrap,
 362                                                                                     placeholder : 'Select a country',
 363                                                                                     displayField : 'title',
 364                                                                                     hiddenName : 'country_id',
 365                                                                                     md : '12',
 366                                                                                     size : 'sm',
 367                                                                                     name : 'country_id_name',
 368                                                                                     triggerAction : 'all',
 369                                                                                     minChars : '1',
 370                                                                 //                    tpl : '<li class="roo-select2-result"><b>{name}</b></div>',
 371                                                                                     style : 'margin-top:20px;',
 372                                                                                     multiple: true,
 373                                                                                     tickable: true,
 374                                                                                     listeners : {
 375                                                                                         render : function (_self) {
 376                                                                                             _this.tickableSel = _self;
 377                                                                                         }
 378                                                                                     },
 379                                                                                     forceSelection : true,
 380                                                                                     valueField : 'id',
 381                                                                                     queryParam : 'query[name]',
 382                                                                                     editable : true,
 383                                                                                     alwaysQuery : true,
 384                                                                                     allowBlank : false,
 385                                                                                     fieldLabel : 'Country With Tickable',
 386                                                                                     store : {
 387                                                                                         xtype: 'Store',
 388                                                                                         xns: Roo.data,
 389                                                                                         listeners : {
 390                                                                                             beforeload : function (_self, o) {
 391                                                                                                 o.params = o.params || {};
 392
 393                                                                                             }
 394                                                                                         },
 395                                                                                         remoteSort : false,
 396                                                                                         sortInfo : { direction : 'ASC', field: 'title' },
 397                                                                                         proxy : {
 398                                                                                             xtype: 'HttpProxy',
 399                                                                                             xns: Roo.data,
 400                                                                                             url : '../bootstrap/data.country.js',
 401                                                                                             method : 'GET'
 402                                                                                         },
 403                                                                                         reader : {
 404                                                                                             xtype: 'JsonReader',
 405                                                                                             xns: Roo.data,
 406                                                                                             fields : [
 407                                                                                                 {
 408                                                                                                     'name': 'id',
 409                                                                                                     'type': 'int'
 410                                                                                                 },
 411                                                                                                 {
 412                                                                                                     'name': 'code',
 413                                                                                                     'type': 'string'
 414                                                                                                 },
 415                                                                                                 {
 416                                                                                                     'name': 'title',
 417                                                                                                     'type': 'string'
 418                                                                                                 }
 419                                                                                             ]
 420                                                                                         }
 421                                                                                     }
 422                                                                                 }
 423                                                                             ]
 424
 425                                                                         }
 426                                                                     ]
 427
 428                                                                 }
 429                                                             ]
 430
 431                                                         }
 432                                                     ]
 433
 434                                                 }
 435                                             ]
 436
 437                                         }
 438                                     ]
 439
 440                                 }
 441                             ]
 442
 443                         }
 444                     ]
 445
 446                 }
 447             ]
 448         };
 449     }
 450 });