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                         }
 161                     ]
 162                 },
 163                 {
 164                     xtype: 'Container',
 165                     xns: Roo.bootstrap,
 166                     style :  'margin-top:60px',
 167                     items : [
 168                         {
 169                             xtype: 'Button',
 170                             xns : Roo.bootstrap,
 171                             html: 'default'
 172                         },
 173                          {
 174                             xtype: 'Button',
 175                             xns : Roo.bootstrap,
 176                             active: true,
 177                             html: 'active'
 178                         },
 179                         {
 180                             xtype: 'Button',
 181                             xns : Roo.bootstrap,
 182                             weight: 'primary',
 183                             html: 'primary'
 184                         },
 185                         {
 186                             xtype: 'Button',
 187                             xns : Roo.bootstrap,
 188                             weight: 'success',
 189                             html: 'success'
 190                         },
 191                         {
 192                             xtype: 'Button',
 193                             xns : Roo.bootstrap,
 194                             weight: 'info',
 195                             size : 'lg',
 196                             html: 'info lg'
 197                         },
 198                         {
 199                             xtype: 'Button',
 200                             xns : Roo.bootstrap,
 201                             weight: 'warning',
 202                             html: 'warning'
 203                         },
 204                         {
 205                             xtype: 'Button',
 206                             xns : Roo.bootstrap,
 207                             weight: 'danger',
 208                             size : 'sm',
 209                             html: 'danger sm'
 210                         },
 211                         {
 212                             xtype: 'Button',
 213                             xns : Roo.bootstrap,
 214                             weight: 'danger',
 215                             size : 'xs',
 216                             html: 'danger xs'
 217                         },
 218                         {
 219                             xtype: 'Button',
 220                             xns : Roo.bootstrap,
 221                             weight: 'link',
 222                             tag: 'a',
 223                             href: 'http://www.roojs.com',
 224                             html: 'link a'
 225                         },
 226                         {
 227                             xtype: 'Button',
 228                             xns : Roo.bootstrap,
 229                             disabled: true,
 230                             html: 'disabled'
 231                         },
 232                         {
 233                             xtype: 'Button',
 234                             xns : Roo.bootstrap,
 235                             isClose: true,
 236                         },
 237                         {
 238                             xtype: 'Button',
 239                             xns : Roo.bootstrap,
 240                             glyphicon: 'volume-up',
 241                             html: 'glyphicon'
 242                         },
 243                         {
 244                             xtype: 'Button',
 245                             xns : Roo.bootstrap,
 246                             badge: '42',
 247                             href: '#'
 248                         }
 249                     ]
 250                 },
 251                 {
 252                     xtype: 'Container',
 253                     xns: Roo.bootstrap,
 254                     style :  'margin-top:60px',
 255
 256                     items : [
 257                         {
 258                             xtype: 'ButtonGroup',
 259                             xns: Roo.bootstrap,
 260                             items : [
 261                                 {
 262                                     xtype: 'Button',
 263                                     xns: Roo.bootstrap,
 264                                     html: "hello",
 265                                     menu:  {
 266                                             xtype: 'Menu',
 267                                             xns: Roo.bootstrap,
 268                                             items : [
 269                                                 {
 270                                                     xtype: 'MenuItem',
 271                                                     xns: Roo.bootstrap,
 272                                                     html: "hello aaa",
 273                                                     href : 'http://roojs.com'
 274                                                 },
 275                                                 {
 276                                                     xtype: 'MenuItem',
 277                                                     xns: Roo.bootstrap,
 278                                                     html: "hello",
 279                                                     href : 'http://roojs.com'
 280                                                 }
 281                                             ]
 282                                         }
 283                                 }
 284                             ]
 285                         }
 286                     ]
 287                 },
 288                 {
 289                     xtype: 'Container',
 290                     xns: Roo.bootstrap,
 291                     style :  'margin-top:60px',
 292                     items : [
 293                         {
 294                             xtype: 'ButtonGroup',
 295                             xns : Roo.bootstrap,
 296                             items: [
 297                                 {
 298                                     xtype: 'Button',
 299                                     xns : Roo.bootstrap,
 300                                 },
 301                                 {
 302                                     xtype: 'Button',
 303                                     xns : Roo.bootstrap,
 304                                 },
 305                                 {
 306                                     xtype: 'Button',
 307                                     xns : Roo.bootstrap,
 308                                 }
 309                             ]
 310                         },
 311                         {
 312                             xtype: 'ButtonGroup',
 313                             xns : Roo.bootstrap,
 314                             align: 'vertical',
 315                             items: [
 316                                 {
 317                                     xtype: 'Button',
 318                                     xns : Roo.bootstrap,
 319                                 },
 320                                 {
 321                                     xtype: 'Button',
 322                                     xns : Roo.bootstrap,
 323                                 },
 324                                 {
 325                                     xtype: 'Button',
 326                                     xns : Roo.bootstrap,
 327                                 }
 328                             ]
 329                         },
 330                         {
 331                             xtype: 'ButtonGroup',
 332                             xns : Roo.bootstrap,
 333                             size: 'lg',
 334                             align: 'justified',
 335                             items: [
 336                                 {
 337                                     xtype: 'Button',
 338                                     xns : Roo.bootstrap,
 339                                     tag : 'a'
 340                                 },
 341                                 {
 342                                     xtype: 'Button',
 343                                     xns : Roo.bootstrap,
 344                                     tag : 'a'
 345                                 },
 346                                 {
 347                                     xtype: 'Button',
 348                                     xns : Roo.bootstrap,
 349                                     tag : 'a'
 350                                 }
 351                             ]
 352                         }
 353                     ]
 354                 },
 355                 {
 356                     xtype: 'Container',
 357                     xns: Roo.bootstrap,
 358                     style :  'margin-top:60px',
 359                     items : [
 360                         {
 361                             xtype: 'Form',
 362                             xns: Roo.bootstrap,
 363                             items : [
 364                                 {
 365                                     xtype: 'Input',
 366                                     xns: Roo.bootstrap,
 367                                     name : 'test',
 368                                     fieldLabel : 'test'
 369                                 },
 370                                 {
 371                                     xtype: 'Button',
 372                                     xns: Roo.bootstrap,
 373                                     html : 'Submit'
 374
 375                                 },
 376                             ]
 377                         }
 378                     ]
 379                 },{
 380                     xtype: 'Container',
 381                     xns: Roo.bootstrap,
 382                     style :  'margin-top:60px',
 383
 384                     items : [
 385                         {
 386                             xtype: 'Form',
 387                             xns: Roo.bootstrap,
 388                             labelAlign : 'left',
 389                             items : [
 390                                 {
 391                                     xtype: 'Input',
 392                                     xns: Roo.bootstrap,
 393                                     name : 'test',
 394                                     fieldLabel : 'test'
 395                                 },
 396                                 {
 397                                     xtype: 'Button',
 398                                     xns: Roo.bootstrap,
 399                                     html : 'Submit'
 400
 401                                 },
 402                             ]
 403                         }
 404                     ]
 405                 },
 406                 {
 407                     xtype: 'ButtonToolbar',
 408                     xns: Roo.bootstrap,
 409                     items: [
 410                         {
 411                             xtype: 'Container',
 412                             xns: Roo.bootstrap,
 413                             style :  'margin-top:60px',
 414
 415                             items : [
 416                                 {
 417                                     xtype: 'ButtonGroup',
 418                                     xns: Roo.bootstrap,
 419                                     items : [
 420                                         {
 421                                             xtype: 'Button',
 422                                             xns: Roo.bootstrap,
 423                                             html : '',
 424                                             glyphicon: 'align-left'
 425                                         },
 426                                         {
 427                                             xtype: 'Button',
 428                                             xns: Roo.bootstrap,
 429                                             html : '',
 430                                             glyphicon: 'align-center'
 431                                         },
 432                                         {
 433                                             xtype: 'Button',
 434                                             xns: Roo.bootstrap,
 435                                             html : '',
 436                                             glyphicon: 'align-right'
 437                                         },
 438                                         {
 439                                             xtype: 'Button',
 440                                             xns: Roo.bootstrap,
 441                                             html : '',
 442                                             glyphicon: 'align-justify'
 443                                         }
 444                                     ]
 445                                 }
 446                             ]
 447                         }
 448                     ]
 449                 }
 450             ]
 451         };
 452     }
 453 });