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> 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                                                         }
  98                                                     ]
  99
 100                                                 },
 101                                                 {
 102                                                     '|xns' : 'Roo.bootstrap',
 103                                                     md : 3,
 104                                                     xtype : 'Column',
 105                                                     lg : 3,
 106                                                     xns : Roo.bootstrap,
 107                                                     items : [
 108                                                         {
 109                                                             '|xns' : 'Roo.bootstrap.dash',
 110                                                             bgcolor : 'green',
 111                                                             cls : '',
 112                                                             xtype : 'NumberBox',
 113                                                             headline : 150,
 114                                                             xns : Roo.bootstrap.dash,
 115                                                             width : 'col-md-5',
 116                                                             title : "New Orders",
 117                                                             style : 'col-lg-3',
 118                                                             height : 150
 119                                                         }
 120                                                     ]
 121
 122                                                 },
 123                                                 {
 124                                                     '|xns' : 'Roo.bootstrap',
 125                                                     md : 3,
 126                                                     xtype : 'Column',
 127                                                     lg : 3,
 128                                                     xns : Roo.bootstrap,
 129                                                     items : [
 130                                                         {
 131                                                             '|xns' : 'Roo.bootstrap.dash',
 132                                                             bgcolor : 'yellow',
 133                                                             xtype : 'NumberBox',
 134                                                             headline : 150,
 135                                                             xns : Roo.bootstrap.dash,
 136                                                             width : 'col-md-5',
 137                                                             title : "New Orders",
 138                                                             style : 'col-lg-3',
 139                                                             height : 150
 140                                                         }
 141                                                     ]
 142
 143                                                 },
 144                                                 {
 145                                                     '|xns' : 'Roo.bootstrap',
 146                                                     md : 3,
 147                                                     lg : 3,
 148                                                     xtype : 'Column',
 149                                                     xns : Roo.bootstrap,
 150                                                     items : [
 151                                                         {
 152                                                             '|xns' : 'Roo.bootstrap.dash',
 153                                                             bgcolor : 'red',
 154                                                             xtype : 'NumberBox',
 155                                                             headline : 150,
 156                                                             xns : Roo.bootstrap.dash,
 157                                                             width : '',
 158                                                             title : "New Orders",
 159                                                             style : 'col-lg-3',
 160                                                             height : 150
 161                                                         }
 162                                                     ]
 163
 164                                                 }
 165                                             ]
 166
 167                                         },
 168                                         {
 169                                             '|xns' : 'Roo.bootstrap',
 170                                             xtype : 'Row',
 171                                             xns : Roo.bootstrap,
 172                                             items : [
 173                                                 {
 174                                                     '|xns' : 'Roo.bootstrap',
 175                                                     md : 6,
 176                                                     xtype : 'Column',
 177                                                     lg : 6,
 178                                                     xns : Roo.bootstrap,
 179                                                     style : '',
 180                                                     sm : 12,
 181                                                     items : [
 182                                                         {
 183                                                             '|xns' : 'Roo.bootstrap.dash',
 184                                                             xtype : 'TabBox',
 185                                                             xns : Roo.bootstrap.dash,
 186                                                             title : "test 1",
 187                                                             listeners : {
 188                                                                 render : function (_self)
 189                                                                    {
 190                                                                        _this.testbox = _self;
 191                                                                    }
 192                                                             },
 193                                                             items : [
 194                                                                 {
 195                                                                     '|xns' : 'Roo.bootstrap.dash',
 196                                                                     xtype : 'TabPane',
 197                                                                     xns : Roo.bootstrap.dash,
 198                                                                     title : "tab 1",
 199                                                                     items : [
 200                                                                         {
 201                                                                             '|xns' : 'Roo.bootstrap',
 202                                                                             xtype : 'Column',
 203                                                                             xns : Roo.bootstrap,
 204                                                                             items : [
 205                                                                                 {
 206                                                                                     store : {
 207                                                                                         '|xns' : 'Roo.data',
 208                                                                                         data : [
 209                                                                                           [ 'A TEST', '1', '0' ],
 210
 211                                                                                             [ 'B test', '1', '0' ],
 212                                                                                               [ 'C test', '1', '0' ],
 213                                                                                             [ 'D test', '1', '0' ]
 214                                                                                         ],
 215                                                                                         isLocal : true,
 216                                                                                         fields : [ 'display_name', 'current', 'aspire' ],
 217                                                                                         xtype : 'SimpleStore',
 218                                                                                         xns : Roo.data
 219                                                                                     },
 220                                                                                     '|xns' : 'Roo.bootstrap',
 221                                                                                     xtype : 'Table',
 222                                                                                     CellSelection : true,
 223                                                                                     xns : Roo.bootstrap,
 224                                                                                     RowSelection : true,
 225                                                                                     cm : [
 226                                                                                          {
 227                                                                                                 '|xns' : 'Roo.grid',
 228                                                                                                 header : 'Department',
 229                                                                                                 dataIndex : 'display_name',
 230                                                                                                 xtype : 'ColumnModel',
 231                                                                                                 xns : Roo.grid
 232                                                                                             },
 233 {
 234                                                                                                 '|xns' : 'Roo.grid',
 235                                                                                                 header : 'Current',
 236                                                                                                 dataIndex : 'current',
 237                                                                                                 xtype : 'ColumnModel',
 238                                                                                                 xns : Roo.grid,
 239                                                                                                 renderer : function(v) {
 240
 241                                                                                                     var state = v> 0 ?  '-checked' : '';
 242
 243                                                                                                     return v*1  > 0 ? 'X' : '-';
 244
 245                                                                                                  }
 246                                                                                             },
 247 {
 248                                                                                                 '|xns' : 'Roo.grid',
 249                                                                                                 header : 'Aspire',
 250                                                                                                 dataIndex : 'aspire',
 251                                                                                                 xtype : 'ColumnModel',
 252                                                                                                 xns : Roo.grid,
 253                                                                                                 renderer : function(v) {
 254                                                                                                     var state = v> 0 ?  '-checked' : '';
 255                                                                                                     return v*1  > 0 ? 'X' : '-';
 256                                                                                                  }
 257                                                                                             }
 258                                                                                     ],
 259                                                                                     listeners : {
 260                                                                                         cellclick : function (_self, el, rowIndex, columnIndex, e)
 261                                                                                            {
 262
 263
 264                                                                                                var cm = this.colModel.getColumnById(this.colModel.getColumnId(columnIndex));
 265                                                                                                if (cm.dataIndex == 'current') {
 266                                                                                                    var rec = _this.listTable.ds.getAt(rowIndex);
 267
 268                                                                                                    rec.set('current', rec.data.current * 1 ? '0' : '1');
 269
 270                                                                                                    //_this.listTable.ds.fireEvent("datachanged", this);
 271                                                                                                    rec.commit();
 272                                                                                                    return;
 273                                                                                                }
 274                                                                                                  if (cm.dataIndex == 'aspire') {
 275                                                                                                    var rec = _this.listTable.ds.getAt(rowIndex);
 276
 277                                                                                                    rec.set('aspire', rec.data.aspire * 1 ? '0' : '1');
 278
 279                                                                                                    //_this.listTable.ds.fireEvent("datachanged", this);
 280                                                                                                    rec.commit();
 281                                                                                                    return;
 282                                                                                                }
 283
 284
 285                                                                                            },
 286                                                                                         render : function (_self)
 287                                                                                            {
 288                                                                                                 _this.listTable = _self;
 289                                                                                                (function() { _self.store.load({}); }).defer(100)
 290                                                                                            }
 291                                                                                     },
 292                                                                                     items : [
 293
 294                                                                                     ]
 295
 296                                                                                 }
 297                                                                             ]
 298
 299                                                                         }
 300                                                                     ]
 301
 302                                                                 },
 303                                                                 {
 304                                                                     '|xns' : 'Roo.bootstrap.dash',
 305                                                                     xtype : 'TabPane',
 306                                                                     xns : Roo.bootstrap.dash,
 307                                                                     title : "tab 2",
 308                                                                     items : [
 309                                                                         {
 310                                                                             '|xns' : 'Roo.bootstrap',
 311                                                                             xtype : 'Column',
 312                                                                             xns : Roo.bootstrap,
 313                                                                             html : 'tab 2 content'
 314                                                                         }
 315                                                                     ]
 316
 317                                                                 }
 318                                                             ]
 319
 320                                                         }
 321                                                     ]
 322
 323                                                 },
 324                                                 {
 325                                                     '|xns' : 'Roo.bootstrap',
 326                                                     md : 6,
 327                                                     lg : 6,
 328                                                     xtype : 'Column',
 329                                                     xns : Roo.bootstrap,
 330                                                     style : '',
 331                                                     sm : 12,
 332                                                     items : [
 333                                                         {
 334                                                             '|xns' : 'Roo.bootstrap',
 335                                                             cls : 'nav-tabs-custom',
 336                                                             xtype : 'Container',
 337                                                             xns : Roo.bootstrap,
 338                                                             items : [
 339                                                                 {
 340                                                                     '|xns' : 'Roo.bootstrap',
 341                                                                     xtype : 'Header',
 342                                                                     xns : Roo.bootstrap,
 343                                                                     html : 'income',
 344                                                                     style : 'margin: 10,10,0,0'
 345                                                                 }
 346                                                             ]
 347
 348                                                         }
 349                                                     ]
 350
 351                                                 }
 352                                             ]
 353
 354                                         },
 355                                         {
 356                                             '|xns' : 'Roo.bootstrap',
 357                                             xtype : 'Row',
 358                                             xns : Roo.bootstrap,
 359                                             items : [
 360                                                 {
 361                                                     '|xns' : 'Roo.bootstrap',
 362                                                     cls : 'tab-content',
 363                                                     lg : 12,
 364                                                     xtype : 'Column',
 365                                                     xns : Roo.bootstrap,
 366                                                     height : 500,
 367                                                     items : [
 368                                                         {
 369                                                             '|xns' : 'Roo.bootstrap',
 370                                                             active : true,
 371                                                             cls : 'carousel slide',
 372                                                             xtype : 'TabPanel',
 373                                                             xns : Roo.bootstrap,
 374                                                             tabId : '#first',
 375                                                             navId : '#sample1',
 376                                                             listeners : {
 377                                                                 render : function (_self)
 378                                                                    {
 379                                                                    _this.tab_first = _self;
 380                                                                    }
 381                                                             },
 382                                                             items : [
 383                                                                 {
 384                                                                     '|xns' : 'Roo.bootstrap',
 385                                                                     xtype : 'Header',
 386                                                                     xns : Roo.bootstrap,
 387                                                                     level : 3,
 388                                                                     html : 'some title'
 389                                                                 },
 390                                                                 {
 391                                                                     '|xns' : 'Roo.bootstrap',
 392                                                                     cls : 'carousel-inner',
 393                                                                     xtype : 'Container',
 394                                                                     xns : Roo.bootstrap,
 395                                                                     well : 'md',
 396                                                                     style : 'padding-left:50px;padding-right:50px;',
 397                                                                     items : [
 398                                                                         {
 399                                                                             '|xns' : 'Roo.bootstrap',
 400                                                                             xtype : 'Row',
 401                                                                             xns : Roo.bootstrap,
 402                                                                             items : [
 403                                                                                 {
 404                                                                                     '|xns' : 'Roo.bootstrap',
 405                                                                                     md : 6,
 406                                                                                     xtype : 'Column',
 407                                                                                     xns : Roo.bootstrap,
 408                                                                                     items : [
 409                                                                                         {
 410                                                                                             '|xns' : 'Roo.bootstrap',
 411                                                                                             labelAlign : 'top',
 412                                                                                             fieldLabel : 'This is a label',
 413                                                                                             xtype : 'Input',
 414                                                                                             allowBlank : true,
 415                                                                                             xns : Roo.bootstrap,
 416                                                                                             name : 'chosen_title'
 417                                                                                         }
 418                                                                                     ]
 419
 420                                                                                 }
 421                                                                             ]
 422
 423                                                                         }
 424                                                                     ]
 425
 426                                                                 },
 427                                                                 {
 428                                                                     '|xns' : 'Roo.bootstrap',
 429                                                                     cls : 'carousel-control left',
 430                                                                     preventDefault : true,
 431                                                                     xtype : 'Link',
 432                                                                     xns : Roo.bootstrap,
 433                                                                     html : '<span class=\"glyphicon glyphicon-chevron-left\"></span>'
 434                                                                 },
 435                                                                 {
 436                                                                     '|xns' : 'Roo.bootstrap',
 437                                                                     cls : 'carousel-control right',
 438                                                                     preventDefault : true,
 439                                                                     xtype : 'Link',
 440                                                                     xns : Roo.bootstrap,
 441                                                                     html : '<span class=\"glyphicon glyphicon-chevron-right\"></span>',
 442                                                                     listeners : {
 443                                                                         click : function (e)
 444                                                                            {
 445                                                                              _this.tab_first.setActive(false);
 446                                                                            _this.tab_second.setActive(true);
 447                                                                            }
 448                                                                     }
 449                                                                 }
 450                                                             ]
 451
 452                                                         },
 453                                                         {
 454                                                             '|xns' : 'Roo.bootstrap',
 455                                                             active : false,
 456                                                             cls : 'carousel slide',
 457                                                             xtype : 'TabPanel',
 458                                                             xns : Roo.bootstrap,
 459                                                             tabId : '#second',
 460                                                             navId : '#sample1',
 461                                                             listeners : {
 462                                                                 render : function (_self)
 463                                                                    {
 464                                                                    _this.tab_second = _self;
 465                                                                    }
 466                                                             },
 467                                                             items : [
 468                                                                 {
 469                                                                     '|xns' : 'Roo.bootstrap',
 470                                                                     xtype : 'Header',
 471                                                                     level : 3,
 472                                                                     xns : Roo.bootstrap,
 473                                                                     html : 'next tab'
 474                                                                 },
 475                                                                 {
 476                                                                     '|xns' : 'Roo.bootstrap',
 477                                                                     cls : 'carousel-inner',
 478                                                                     xtype : 'Container',
 479                                                                     xns : Roo.bootstrap,
 480                                                                     well : 'md',
 481                                                                     style : 'padding-left:50px;padding-right:50px;',
 482                                                                     items : [
 483                                                                         {
 484                                                                             '|xns' : 'Roo.bootstrap',
 485                                                                             xtype : 'Row',
 486                                                                             xns : Roo.bootstrap,
 487                                                                             items : [
 488                                                                                 {
 489                                                                                     '|xns' : 'Roo.bootstrap',
 490                                                                                     md : 6,
 491                                                                                     xtype : 'Column',
 492                                                                                     xns : Roo.bootstrap,
 493                                                                                     items : [
 494                                                                                         {
 495                                                                                             '|xns' : 'Roo.bootstrap',
 496                                                                                             labelAlign : 'top',
 497                                                                                             fieldLabel : 'Some input',
 498                                                                                             xtype : 'Input',
 499                                                                                             allowBlank : true,
 500                                                                                             xns : Roo.bootstrap,
 501                                                                                             name : 'chosen_title'
 502                                                                                         }
 503                                                                                     ]
 504
 505                                                                                 }
 506                                                                             ]
 507
 508                                                                         }
 509                                                                     ]
 510
 511                                                                 },
 512                                                                 {
 513                                                                     '|xns' : 'Roo.bootstrap',
 514                                                                     cls : 'carousel-control left',
 515                                                                     xtype : 'Link',
 516                                                                     xns : Roo.bootstrap,
 517                                                                     html : '<span class=\"glyphicon glyphicon-chevron-left\"></span>'
 518                                                                 },
 519                                                                 {
 520                                                                     '|xns' : 'Roo.bootstrap',
 521                                                                     cls : 'carousel-control right',
 522                                                                     xtype : 'Link',
 523                                                                     xns : Roo.bootstrap,
 524                                                                     html : '<span class=\"glyphicon glyphicon-chevron-right\"></span>'
 525                                                                 }
 526                                                             ]
 527
 528                                                         }
 529                                                     ]
 530
 531                                                 }
 532                                             ]
 533
 534                                         }
 535                                     ]
 536
 537                                 }
 538                             ]
 539
 540                         }
 541                     ]
 542
 543                 }
 544             ]
 545
 546         };    }
 547 });