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

   1 //<script type="text/javascript">
   2
   3 // Auto generated file - created by app.Builder.js- do not edit directly (at present!)
   4
   5 dashboard3 = new Roo.XComponent({
   6   part     :  ["bootstrap", "dashboard3" ],
   7   order    : '001-dashboard-',
   8   region   : 'center',
   9   parent   : false,
  10   name     : "unnamed module",
  11   disabled : false,
  12   permname : '',
  13   _tree : function()
  14   {
  15    var _this = this;
  16    var MODULE = this;
  17    return {
  18    '|xns' : 'Roo.bootstrap',
  19    cls : 'skin-blue',
  20    xtype : 'Body',
  21    xns : Roo.bootstrap,
  22    items : [
  23     Roo.apply(Dashboard.Header1._tree(), {
  24      '|xns' : 'Roo.bootstrap',
  25      cls : 'header',
  26      tag : 'header',
  27      xtype : 'Container',
  28      xns : Roo.bootstrap
  29     }),
  30     {
  31      '|xns' : 'Roo.bootstrap',
  32      cls : 'wrapper row-offcanvas row-offcanvas-left',
  33      xtype : 'Container',
  34      'flexy:include' : 'Sidebar.html',
  35      xns : Roo.bootstrap,
  36      items : [
  37       Roo.apply(Dashboard.Sidebar2._tree(), {
  38        '|xns' : 'Roo.bootstrap',
  39        tag : 'aside',
  40        cls : 'left-side sidebar-offcanvas',
  41        xtype : 'Container',
  42        xns : Roo.bootstrap
  43       }),
  44       {
  45        '|xns' : 'Roo.bootstrap',
  46        tag : 'aside',
  47        cls : 'right-side',
  48        xtype : 'Container',
  49        xns : Roo.bootstrap,
  50        items : [
  51         {
  52          '|xns' : 'Roo.bootstrap',
  53          tag : 'section',
  54          cls : 'content-header',
  55          xtype : 'Container',
  56          xns : Roo.bootstrap,
  57          items : [
  58           {
  59            '|xns' : 'Roo.bootstrap',
  60            xtype : 'Header',
  61            xns : Roo.bootstrap,
  62            html : 'Dashboard  <small>  Example Control panel </small>'
  63           }
  64          ]
  65
  66         },
  67         {
  68          '|xns' : 'Roo.bootstrap',
  69          tag : 'section',
  70          cls : 'content',
  71          xtype : 'Container',
  72          xns : Roo.bootstrap,
  73          items : [
  74           {
  75            '|xns' : 'Roo.bootstrap',
  76            xtype : 'Container',
  77            xns : Roo.bootstrap,
  78            items : [
  79             {
  80              '|xns' : 'Roo.bootstrap',
  81              md : 3,
  82              xtype : 'Column',
  83              lg : 3,
  84              xns : Roo.bootstrap,
  85              items : [
  86               {
  87                '|xns' : 'Roo.bootstrap.dash',
  88                bgcolor : '',
  89                cls : '',
  90                xtype : 'NumberBox',
  91                headline : 160,
  92                xns : Roo.bootstrap.dash,
  93                width : 'col-md-5',
  94                title : "New Orders ",
  95                style : 'col-md-3',
  96                height : 150,
  97                _aformat : 'This is a random string'
  98               }
  99              ]
 100
 101             },
 102             {
 103              '|xns' : 'Roo.bootstrap',
 104              md : 3,
 105              xtype : 'Column',
 106              lg : 3,
 107              xns : Roo.bootstrap,
 108              items : [
 109               {
 110                '|xns' : 'Roo.bootstrap.dash',
 111                bgcolor : 'green',
 112                cls : '',
 113                xtype : 'NumberBox',
 114                headline : 150,
 115                xns : Roo.bootstrap.dash,
 116                width : 'col-md-5',
 117                title : "New Orders",
 118                style : 'col-lg-3',
 119                height : 150
 120               }
 121              ]
 122
 123             },
 124             {
 125              '|xns' : 'Roo.bootstrap',
 126              md : 3,
 127              xtype : 'Column',
 128              lg : 3,
 129              xns : Roo.bootstrap,
 130              items : [
 131               {
 132                '|xns' : 'Roo.bootstrap.dash',
 133                bgcolor : 'yellow',
 134                xtype : 'NumberBox',
 135                headline : 150,
 136                xns : Roo.bootstrap.dash,
 137                width : 'col-md-5',
 138                title : "New Orders",
 139                style : 'col-lg-3',
 140                height : 150
 141               }
 142              ]
 143
 144             },
 145             {
 146              '|xns' : 'Roo.bootstrap',
 147              md : 3,
 148              lg : 3,
 149              xtype : 'Column',
 150              xns : Roo.bootstrap,
 151              items : [
 152               {
 153                '|xns' : 'Roo.bootstrap.dash',
 154                bgcolor : 'red',
 155                xtype : 'NumberBox',
 156                headline : 150,
 157                xns : Roo.bootstrap.dash,
 158                width : '',
 159                title : "New Orders",
 160                style : 'col-lg-3',
 161                height : 150
 162               }
 163              ]
 164
 165             }
 166            ]
 167
 168           },
 169           {
 170            '|xns' : 'Roo.bootstrap',
 171            xtype : 'Row',
 172            xns : Roo.bootstrap,
 173            items : [
 174             {
 175              '|xns' : 'Roo.bootstrap',
 176              alert : 'danger',
 177              fa : 'ban',
 178              xtype : 'Container',
 179              xns : Roo.bootstrap,
 180              html : '<b> Alert </b> test allert\n'
 181             }
 182            ]
 183
 184           },
 185           {
 186            '|xns' : 'Roo.bootstrap',
 187            xtype : 'Row',
 188            xns : Roo.bootstrap,
 189            items : [
 190             {
 191              '|xns' : 'Roo.bootstrap',
 192              md : 6,
 193              xtype : 'Column',
 194              lg : 6,
 195              xns : Roo.bootstrap,
 196              style : '',
 197              sm : 12,
 198              items : [
 199               {
 200                '|xns' : 'Roo.bootstrap.dash',
 201                xtype : 'TabBox',
 202                xns : Roo.bootstrap.dash,
 203                title : "test 1",
 204                listeners : {
 205                 render : function (_self)
 206                  {
 207                      _this.testbox = _self;
 208                  }
 209                },
 210                items : [
 211                 {
 212                  '|xns' : 'Roo.bootstrap.dash',
 213                  xtype : 'TabPane',
 214                  xns : Roo.bootstrap.dash,
 215                  title : "tab 1",
 216                  items : [
 217                   {
 218                    '|xns' : 'Roo.bootstrap',
 219                    xtype : 'Column',
 220                    xns : Roo.bootstrap,
 221                    items : [
 222                     {
 223                      store : {
 224                       '|xns' : 'Roo.data',
 225                       fields : [ 'display_name', 'current', 'aspire' ],
 226                       data : [
 227                         [ 'A TEST', '1', '0' ],
 228
 229                           [ 'B test', '1', '0' ],
 230                             [ 'C test', '1', '0' ],
 231                           [ 'D test', '1', '0' ]
 232                       ],
 233                       isLocal : true,
 234                       xtype : 'SimpleStore',
 235                       xns : Roo.data
 236                      },
 237                      '|xns' : 'Roo.bootstrap',
 238                      xtype : 'Table',
 239                      CellSelection : true,
 240                      xns : Roo.bootstrap,
 241                      RowSelection : true,
 242                      cm : [
 243                        {
 244                         '|xns' : 'Roo.grid',
 245                         header : 'Department',
 246                         dataIndex : 'display_name',
 247                         xtype : 'ColumnModel',
 248                         xns : Roo.grid
 249                        },
 250 {
 251                         '|xns' : 'Roo.grid',
 252                         header : 'Current',
 253                         dataIndex : 'current',
 254                         xtype : 'ColumnModel',
 255                         xns : Roo.grid,
 256                         renderer : function(v) {
 257
 258                             var state = v> 0 ?  '-checked' : '';
 259
 260                             return v*1  > 0 ? 'X' : '-';
 261
 262                          }
 263                        },
 264 {
 265                         '|xns' : 'Roo.grid',
 266                         header : 'Aspire',
 267                         dataIndex : 'aspire',
 268                         xtype : 'ColumnModel',
 269                         xns : Roo.grid,
 270                         renderer : function(v) {
 271                             var state = v> 0 ?  '-checked' : '';
 272                             return v*1  > 0 ? 'X' : '-';
 273                          }
 274                        }
 275                      ],
 276                      listeners : {
 277                       cellclick : function (_self, el, rowIndex, columnIndex, e)
 278                        {
 279
 280
 281                            var cm = this.colModel.getColumnById(this.colModel.getColumnId(columnIndex));
 282                            if (cm.dataIndex == 'current') {
 283                                var rec = _this.listTable.ds.getAt(rowIndex);
 284
 285                                rec.set('current', rec.data.current * 1 ? '0' : '1');
 286
 287                                //_this.listTable.ds.fireEvent("datachanged", this);
 288                                rec.commit();
 289                                return;
 290                            }
 291                              if (cm.dataIndex == 'aspire') {
 292                                var rec = _this.listTable.ds.getAt(rowIndex);
 293
 294                                rec.set('aspire', rec.data.aspire * 1 ? '0' : '1');
 295
 296                                //_this.listTable.ds.fireEvent("datachanged", this);
 297                                rec.commit();
 298                                return;
 299                            }
 300
 301
 302                        },
 303                       render : function (_self)
 304                        {
 305                             _this.listTable = _self;
 306                            (function() { _self.store.load({}); }).defer(100)
 307                        }
 308                      },
 309                      items : [
 310
 311                      ]
 312
 313                     }
 314                    ]
 315
 316                   }
 317                  ]
 318
 319                 },
 320                 {
 321                  '|xns' : 'Roo.bootstrap.dash',
 322                  xtype : 'TabPane',
 323                  xns : Roo.bootstrap.dash,
 324                  title : "tab 2",
 325                  items : [
 326                   {
 327                    '|xns' : 'Roo.bootstrap',
 328                    xtype : 'Column',
 329                    xns : Roo.bootstrap,
 330                    html : 'tab 2 content'
 331                   }
 332                  ]
 333
 334                 }
 335                ]
 336
 337               }
 338              ]
 339
 340             },
 341             {
 342              '|xns' : 'Roo.bootstrap',
 343              md : 6,
 344              lg : 6,
 345              xtype : 'Column',
 346              xns : Roo.bootstrap,
 347              style : '',
 348              sm : 12,
 349              items : [
 350               {
 351                '|xns' : 'Roo.bootstrap',
 352                cls : 'nav-tabs-custom',
 353                xtype : 'Container',
 354                xns : Roo.bootstrap,
 355                items : [
 356                 {
 357                  '|xns' : 'Roo.bootstrap',
 358                  xtype : 'Header',
 359                  xns : Roo.bootstrap,
 360                  html : 'income',
 361                  style : 'margin: 10,10,0,0'
 362                 }
 363                ]
 364
 365               }
 366              ]
 367
 368             }
 369            ]
 370
 371           },
 372           {
 373            '|xns' : 'Roo.bootstrap',
 374            xtype : 'Row',
 375            xns : Roo.bootstrap,
 376            items : [
 377             {
 378              '|xns' : 'Roo.bootstrap',
 379              lg : 12,
 380              xtype : 'TabGroup',
 381              carousel : true,
 382              xns : Roo.bootstrap,
 383              navId : '#sample1',
 384              listeners : {
 385               render : function (_self)
 386                {
 387                    _this.tabgroup = _self;
 388                }
 389              },
 390              items : [
 391               {
 392                '|xns' : 'Roo.bootstrap',
 393                active : true,
 394                cls : 'item',
 395                xtype : 'TabPanel',
 396                xns : Roo.bootstrap,
 397                tabId : '#second',
 398                navId : '#sample1',
 399                listeners : {
 400                 render : function (_self)
 401                  {
 402                  _this.tab_second = _self;
 403                  }
 404                },
 405                items : [
 406                 {
 407                  '|xns' : 'Roo.bootstrap',
 408                  xtype : 'Header',
 409                  xns : Roo.bootstrap,
 410                  level : 3,
 411                  html : 'first tab'
 412                 },
 413                 {
 414                  '|xns' : 'Roo.bootstrap',
 415                  xtype : 'Container',
 416                  xns : Roo.bootstrap,
 417                  well : 'md',
 418                  style : 'padding-left:50px;padding-right:50px;',
 419                  items : [
 420                   {
 421                    '|xns' : 'Roo.bootstrap',
 422                    xtype : 'Row',
 423                    xns : Roo.bootstrap,
 424                    items : [
 425                     {
 426                      '|xns' : 'Roo.bootstrap',
 427                      md : 6,
 428                      xtype : 'Column',
 429                      xns : Roo.bootstrap,
 430                      items : [
 431                       {
 432                        '|xns' : 'Roo.bootstrap',
 433                        labelAlign : 'top',
 434                        fieldLabel : 'Some input',
 435                        xtype : 'Input',
 436                        allowBlank : true,
 437                        xns : Roo.bootstrap,
 438                        name : 'chosen_title'
 439                       }
 440                      ]
 441
 442                     }
 443                    ]
 444
 445                   }
 446                  ]
 447
 448                 }
 449                ]
 450
 451               },
 452               {
 453                '|xns' : 'Roo.bootstrap',
 454                active : false,
 455                cls : 'item',
 456                xtype : 'TabPanel',
 457                xns : Roo.bootstrap,
 458                tabId : '#first',
 459                navId : '#sample1',
 460                listeners : {
 461                 render : function (_self)
 462                  {
 463                  _this.tab_first = _self;
 464                  }
 465                },
 466                items : [
 467                 {
 468                  '|xns' : 'Roo.bootstrap',
 469                  xtype : 'Header',
 470                  level : 3,
 471                  xns : Roo.bootstrap,
 472                  html : 'second tab'
 473                 },
 474                 {
 475                  '|xns' : 'Roo.bootstrap',
 476                  xtype : 'Container',
 477                  xns : Roo.bootstrap,
 478                  well : 'md',
 479                  style : 'padding-left:50px;padding-right:50px;',
 480                  items : [
 481                   {
 482                    '|xns' : 'Roo.bootstrap',
 483                    xtype : 'Row',
 484                    xns : Roo.bootstrap,
 485                    items : [
 486                     {
 487                      '|xns' : 'Roo.bootstrap',
 488                      md : 6,
 489                      xtype : 'Column',
 490                      xns : Roo.bootstrap,
 491                      items : [
 492                       {
 493                        '|xns' : 'Roo.bootstrap',
 494                        labelAlign : 'top',
 495                        fieldLabel : 'This is a label',
 496                        xtype : 'Input',
 497                        allowBlank : true,
 498                        xns : Roo.bootstrap,
 499                        name : 'chosen_title'
 500                       }
 501                      ]
 502
 503                     }
 504                    ]
 505
 506                   }
 507                  ]
 508
 509                 }
 510                ]
 511
 512               },
 513               {
 514                '|xns' : 'Roo.bootstrap',
 515                cls : 'carousel-control left',
 516                preventDefault : true,
 517                xtype : 'Link',
 518                xns : Roo.bootstrap,
 519                html : '<span class=\"glyphicon glyphicon-chevron-left\"></span>',
 520                listeners : {
 521                 click : function (e)
 522                  {
 523                      _this.tabgroup.showPanelPrev();
 524                  }
 525                }
 526               },
 527               {
 528                '|xns' : 'Roo.bootstrap',
 529                cls : 'carousel-control right',
 530                preventDefault : true,
 531                xtype : 'Link',
 532                xns : Roo.bootstrap,
 533                html : '<span class=\"glyphicon glyphicon-chevron-right\"></span>',
 534                listeners : {
 535                 click : function (e)
 536                  {
 537                        _this.tabgroup.showPanelNext();
 538                  }
 539                }
 540               }
 541              ]
 542
 543             }
 544            ]
 545
 546           }
 547          ]
 548
 549         }
 550        ]
 551
 552       }
 553      ]
 554
 555     }
 556    ]
 557
 558   };  }
 559 });