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

   1
   2
   3 Roo.example = Roo.example || {};
   4
   5 Roo.example.bootstrap = 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         this.parent = {
  16             el : new Roo.bootstrap.Body(),
  17         }
  18         this.parent.el.layout = false;
  19         this.parent.el.render(document.body);
  20
  21         var _this = this;
  22         var MODULE = this;
  23         return {
  24             xtype: 'Body',
  25             xns: Roo.bootstrap,
  26             items : [
  27                  {
  28                     xtype: 'Navbar',
  29                     role : 'navigation',
  30                     position : 'static-top',
  31                     bar: true,
  32                     inverse : true,
  33                     xns: Roo.bootstrap,
  34                     items : [
  35
  36                         {
  37                             xtype: 'Item',
  38                             xns: Roo.bootstrap.Navbar,
  39                             href: '#',
  40                             html: "hello",
  41                             badge: 'test',
  42                             active: true
  43                         },
  44                         {
  45                             xtype: 'Button',
  46                             xns: Roo.bootstrap,
  47                             html: "hello",
  48                             menu:  {
  49                                     xtype: 'Menu',
  50                                     xns: Roo.bootstrap,
  51                                     items : [
  52                                         {
  53                                             xtype: 'MenuItem',
  54                                             xns: Roo.bootstrap,
  55                                             html: "hello aaa",
  56                                             href : 'http://roojs.com'
  57                                         },
  58                                         {
  59                                             xtype: 'MenuItem',
  60                                             xns: Roo.bootstrap,
  61                                             html: "hello",
  62                                             href : 'http://roojs.com'
  63                                         }
  64                                     ]
  65                                 }
  66                         },
  67                         {
  68                             xtype: 'Button',
  69                             xns: Roo.bootstrap,
  70
  71                             html: "dialog",
  72                             listeners : {
  73                                 click : function() {
  74                                     Roo.ComponentMgr.get('test-modal-1').show()
  75
  76                                 }
  77                             }
  78
  79                         },
  80
  81                          {
  82                             xtype: 'Modal',
  83                             id: 'test-modal-1',
  84                             xns: Roo.bootstrap,
  85                             title : 'test1',
  86                             html: "dialog"
  87
  88
  89                         },
  90
  91
  92
  93
  94
  95                     ]
  96
  97                 },
  98                 {
  99                     xtype: 'Container',
 100                     xns: Roo.bootstrap,
 101                     jumbotron : true,
 102                      style :  'padding: 30px 15px 40px',
 103                     html : '<h1> hello world </h1><p>test</p>'
 104                 },
 105                 {
 106                     xtype: 'Container',
 107                     xns: Roo.bootstrap,
 108                     style :  'margin-top:50px',
 109                     items : [
 110                         {
 111                             xtype: 'Row',
 112                             xns: Roo.bootstrap,
 113                             items : [
 114
 115                                 {
 116                                     xtype: 'Column',
 117                                     xns: Roo.bootstrap,
 118                                     colspan : 12,
 119                                     items : [
 120
 121                                         {
 122                                             xtype: 'Navbar',
 123                                             xns: Roo.bootstrap,
 124                                             bar: true,
 125                                             items : [
 126                                                 {
 127                                                     xtype: 'Item',
 128                                                     xns: Roo.bootstrap.Navbar,
 129                                                     html: "nav",
 130                                                     href : 'http://roojs.com',
 131
 132                                                     menu:    {
 133                                                         xtype: 'Menu',
 134                                                         xns: Roo.bootstrap,
 135                                                         items : [
 136                                                             {
 137                                                                 xtype: 'MenuItem',
 138                                                                 xns: Roo.bootstrap,
 139                                                                 html: "hello",
 140                                                                 href : 'http://roojs.com'
 141                                                             },
 142                                                             {
 143                                                                 xtype: 'MenuSeparator',
 144                                                                 xns: Roo.bootstrap,
 145                                                             },
 146                                                             {
 147                                                                 xtype: 'MenuItem',
 148                                                                 xns: Roo.bootstrap,
 149                                                                 html: "hello",
 150                                                                 href: 'http://roojs.com'
 151                                                             }
 152                                                         ]
 153                                                     }
 154                                                 }
 155                                             ]
 156
 157
 158                                         },
 159                                         {
 160                                             xtype: 'NavGroup',
 161                                             xns: Roo.bootstrap,
 162                                             items: [
 163                                                 {
 164                                                     xtype: 'Button',
 165                                                     xns: Roo.bootstrap,
 166                                                     html: "hello",
 167                                                     menu:  {
 168                                                             xtype: 'Menu',
 169                                                             xns: Roo.bootstrap,
 170                                                             items : [
 171                                                                 {
 172                                                                     xtype: 'MenuItem',
 173                                                                     xns: Roo.bootstrap,
 174                                                                     html: "hello aaa",
 175                                                                     href : 'http://roojs.com'
 176                                                                 },
 177                                                                 {
 178                                                                     xtype: 'MenuItem',
 179                                                                     xns: Roo.bootstrap,
 180                                                                     html: "hello",
 181                                                                     href : 'http://roojs.com'
 182                                                                 }
 183                                                             ]
 184                                                         }
 185                                                 }
 186                                             ]
 187
 188
 189                                         }
 190
 191
 192                                     ]
 193                                 }
 194                             ]
 195                         }
 196                     ]
 197                 },
 198                 {
 199                     xtype: 'Container',
 200                     xns: Roo.bootstrap,
 201                     style :  'margin-top:60px',
 202                     items : [
 203                         {
 204                             xtype: 'Button',
 205                             xns : Roo.bootstrap,
 206                             html: 'default'
 207                         },
 208                          {
 209                             xtype: 'Button',
 210                             xns : Roo.bootstrap,
 211                             active: true,
 212                             html: 'active'
 213                         },
 214                         {
 215                             xtype: 'Button',
 216                             xns : Roo.bootstrap,
 217                             weight: 'primary',
 218                             html: 'primary'
 219                         },
 220                         {
 221                             xtype: 'Button',
 222                             xns : Roo.bootstrap,
 223                             weight: 'success',
 224                             html: 'success'
 225                         },
 226                         {
 227                             xtype: 'Button',
 228                             xns : Roo.bootstrap,
 229                             weight: 'info',
 230                             size : 'lg',
 231                             html: 'info lg'
 232                         },
 233                         {
 234                             xtype: 'Button',
 235                             xns : Roo.bootstrap,
 236                             weight: 'warning',
 237                             html: 'warning'
 238                         },
 239                         {
 240                             xtype: 'Button',
 241                             xns : Roo.bootstrap,
 242                             weight: 'danger',
 243                             size : 'sm',
 244                             html: 'danger sm'
 245                         },
 246                         {
 247                             xtype: 'Button',
 248                             xns : Roo.bootstrap,
 249                             weight: 'danger',
 250                             size : 'xs',
 251                             html: 'danger xs'
 252                         },
 253                         {
 254                             xtype: 'Button',
 255                             xns : Roo.bootstrap,
 256                             weight: 'link',
 257                             tag: 'a',
 258                             href: 'http://www.roojs.com',
 259                             html: 'link a'
 260                         },
 261                         {
 262                             xtype: 'Button',
 263                             xns : Roo.bootstrap,
 264                             disabled: true,
 265                             html: 'disabled'
 266                         },
 267                         {
 268                             xtype: 'Button',
 269                             xns : Roo.bootstrap,
 270                             isClose: true,
 271                         },
 272                         {
 273                             xtype: 'Button',
 274                             xns : Roo.bootstrap,
 275                             glyphicon: 'volume-up',
 276                             html: 'glyphicon'
 277                         },
 278                         {
 279                             xtype: 'Button',
 280                             xns : Roo.bootstrap,
 281                             badge: '42',
 282                             href: '#'
 283                         }
 284                     ]
 285                 },
 286                 {
 287                     xtype: 'Container',
 288                     xns: Roo.bootstrap,
 289                     style :  'margin-top:60px',
 290                     items : [
 291                         {
 292                             xtype: 'ButtonGroup',
 293                             xns : Roo.bootstrap,
 294                             items: [
 295                                 {
 296                                     xtype: 'Button',
 297                                     xns : Roo.bootstrap,
 298                                 },
 299                                 {
 300                                     xtype: 'Button',
 301                                     xns : Roo.bootstrap,
 302                                 },
 303                                 {
 304                                     xtype: 'Button',
 305                                     xns : Roo.bootstrap,
 306                                 }
 307                             ]
 308                         },
 309                         {
 310                             xtype: 'ButtonGroup',
 311                             xns : Roo.bootstrap,
 312                             align: 'vertical',
 313                             items: [
 314                                 {
 315                                     xtype: 'Button',
 316                                     xns : Roo.bootstrap,
 317                                 },
 318                                 {
 319                                     xtype: 'Button',
 320                                     xns : Roo.bootstrap,
 321                                 },
 322                                 {
 323                                     xtype: 'Button',
 324                                     xns : Roo.bootstrap,
 325                                 }
 326                             ]
 327                         },
 328                         {
 329                             xtype: 'ButtonGroup',
 330                             xns : Roo.bootstrap,
 331                             size: 'lg',
 332                             align: 'justified',
 333                             items: [
 334                                 {
 335                                     xtype: 'Button',
 336                                     xns : Roo.bootstrap,
 337                                     tag : 'a'
 338                                 },
 339                                 {
 340                                     xtype: 'Button',
 341                                     xns : Roo.bootstrap,
 342                                     tag : 'a'
 343                                 },
 344                                 {
 345                                     xtype: 'Button',
 346                                     xns : Roo.bootstrap,
 347                                     tag : 'a'
 348                                 }
 349                             ]
 350                         }
 351                     ]
 352                 },
 353                 {
 354                     xtype: 'Container',
 355                     xns: Roo.bootstrap,
 356                     style :  'margin-top:60px',
 357                     items : [
 358                         {
 359                             xtype: 'Form',
 360                             xns: Roo.bootstrap,
 361                             items : [
 362                                 {
 363                                     xtype: 'Input',
 364                                     xns: Roo.bootstrap,
 365                                     name : 'test',
 366                                     fieldLabel : 'test'
 367                                 },
 368                                 {
 369                                     xtype: 'Button',
 370                                     xns: Roo.bootstrap,
 371                                     html : 'Submit'
 372
 373                                 },
 374                             ]
 375                         }
 376                     ]
 377                 },{
 378                     xtype: 'Container',
 379                     xns: Roo.bootstrap,
 380                     style :  'margin-top:60px',
 381
 382                     items : [
 383                         {
 384                             xtype: 'Form',
 385                             xns: Roo.bootstrap,
 386                             labelAlign : 'left',
 387                             items : [
 388                                 {
 389                                     xtype: 'Input',
 390                                     xns: Roo.bootstrap,
 391                                     name : 'test',
 392                                     fieldLabel : 'test'
 393                                 },
 394                                 {
 395                                     xtype: 'Button',
 396                                     xns: Roo.bootstrap,
 397                                     html : 'Submit'
 398
 399                                 },
 400                             ]
 401                         }
 402                     ]
 403                 },
 404                 {
 405                     xtype: 'Container',
 406                     xns: Roo.bootstrap,
 407                     style :  'margin-top:60px',
 408
 409                     items : [
 410                         {
 411                             xtype: 'ButtonGroup',
 412                             xns: Roo.bootstrap,
 413                             items : [
 414                                 {
 415                                     xtype: 'Button',
 416                                     xns: Roo.bootstrap,
 417                                     html : '',
 418                                     glyphicon: 'align-left'
 419                                 },
 420                                 {
 421                                     xtype: 'Button',
 422                                     xns: Roo.bootstrap,
 423                                     html : '',
 424                                     glyphicon: 'align-center'
 425                                 },
 426                                 {
 427                                     xtype: 'Button',
 428                                     xns: Roo.bootstrap,
 429                                     html : '',
 430                                     glyphicon: 'align-right'
 431                                 },
 432                                 {
 433                                     xtype: 'Button',
 434                                     xns: Roo.bootstrap,
 435                                     html : '',
 436                                     glyphicon: 'align-justify'
 437                                 }
 438                             ]
 439                         }
 440                     ]
 441                 },
 442                 {
 443                     xtype: 'Container',
 444                     xns: Roo.bootstrap,
 445                     style :  'margin-top:60px',
 446
 447                     items : [
 448                         {
 449                             xtype: 'ButtonGroup',
 450                             xns: Roo.bootstrap,
 451                             items : [
 452                                 {
 453                                     xtype: 'Button',
 454                                     xns: Roo.bootstrap,
 455                                     html : '',
 456                                     glyphicon: 'align-left',
 457                                     menu: [
 458                                         {
 459                                             xtype: 'Menu',
 460                                             xns: Roo.bootstrap,
 461                                             items: [
 462                                                 {
 463                                                     xtype: 'MenuItem',
 464                                                     xns: Roo.bootstrap,
 465                                                     html: "hello",
 466                                                     href : 'http://roojs.com'
 467                                                 },
 468                                                 {
 469                                                     xtype: 'MenuItem',
 470                                                     xns: Roo.bootstrap,
 471                                                     html: "hello",
 472                                                     href : 'http://roojs.com'
 473                                                 }
 474                                             ]
 475                                         }
 476                                     ]
 477                                 }
 478                             ]
 479                         }
 480                     ]
 481                 }
 482             ]
 483         };
 484     }
 485 });