examples/bootstrap/dashboard1.bjs.GF13LX
[roojs1] / examples / bootstrap / dashboard1.js
1 //<script type="text/javascript">
2
3 // Auto generated file - created by app.Builder.js- do not edit directly (at present!)
4
5 dashboard1 = new Roo.XComponent({
6     part     :  ["bootstrap", "dashboard1" ],
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             cls : 'skin-blue',
19             xtype : 'Body',
20             xns : Roo.bootstrap,
21             items : [
22                 Roo.apply(Dashboard.Header1._tree(), {
23                     cls : 'header',
24                     xtype : 'Container',
25                     tag : 'header',
26                     xns : Roo.bootstrap
27                 }),
28                 {
29                     cls : 'wrapper row-offcanvas row-offcanvas-left',
30                     xtype : 'Container',
31                     'flexy:include' : 'Sidebar.html',
32                     xns : Roo.bootstrap,
33                     items : [
34                         Roo.apply(Dashboard.Sidebar2._tree(), {
35                             tag : 'aside',
36                             cls : 'left-side sidebar-offcanvas',
37                             xtype : 'Container',
38                             xns : Roo.bootstrap
39                         }),
40                         {
41                             tag : 'aside',
42                             cls : 'right-side',
43                             xtype : 'Container',
44                             xns : Roo.bootstrap,
45                             items : [
46                                 {
47                                     tag : 'section',
48                                     cls : 'content-header',
49                                     xtype : 'Container',
50                                     xns : Roo.bootstrap,
51                                     items : [
52                                         {
53                                             xtype : 'Header',
54                                             xns : Roo.bootstrap,
55                                             html : 'General Form Elements  <small> Preview </small>'
56                                         }
57                                     ]
58
59                                 },
60                                 {
61                                     tag : 'section',
62                                     cls : 'content',
63                                     xtype : 'Container',
64                                     xns : Roo.bootstrap,
65                                     items : [
66                                         {
67                                             xtype : 'Row',
68                                             xns : Roo.bootstrap,
69                                             items : [
70                                                 {
71                                                     md : 6,
72                                                     xtype : 'Column',
73                                                     xns : Roo.bootstrap,
74                                                     sm : 12,
75                                                     items : [
76                                                         {
77                                                             cls : 'box box-primary',
78                                                             xtype : 'Container',
79                                                             xns : Roo.bootstrap,
80                                                             items : [
81                                                                 {
82                                                                     cls : 'box-header',
83                                                                     xtype : 'Container',
84                                                                     xns : Roo.bootstrap,
85                                                                     items : [
86                                                                         {
87                                                                             cls : 'box-title',
88                                                                             xtype : 'Header',
89                                                                             xns : Roo.bootstrap,
90                                                                             level : 3,
91                                                                             html : 'Quick Example'
92                                                                         }
93                                                                     ]
94
95                                                                 },
96                                                                 {
97                                                                     xtype : 'Form',
98                                                                     labelAlign : 'top',
99                                                                     xns : Roo.bootstrap,
100                                                                     items : [
101                                                                         {
102                                                                             cls : 'box-body',
103                                                                             xtype : 'Container',
104                                                                             xns : Roo.bootstrap,
105                                                                             items : [
106                                                                                 {
107                                                                                     xtype : 'Input',
108                                                                                     placeholder : 'Enter email',
109                                                                                     fieldLabel : 'Email Address',
110                                                                                     xns : Roo.bootstrap,
111                                                                                     vtype : 'email'
112                                                                                 },
113                                                                                 {
114                                                                                     xtype : 'Input',
115                                                                                     placeholder : 'Enter password',
116                                                                                     inputType : 'password',
117                                                                                     fieldLabel : 'Password',
118                                                                                     xns : Roo.bootstrap
119                                                                                 },
120                                                                                 {
121                                                                                     xtype : 'Input',
122                                                                                     placeholder : 'Enter email',
123                                                                                     inputType : 'file',
124                                                                                     fieldLabel : 'File Input',
125                                                                                     xns : Roo.bootstrap
126                                                                                 },
127                                                                                 {
128                                                                                     xtype : 'CheckBox',
129                                                                                     xns : Roo.bootstrap
130                                                                                 },
131                                                                                 {
132                                                                                     weight : 'primary',
133                                                                                     xtype : 'Button',
134                                                                                     xns : Roo.bootstrap,
135                                                                                     html : 'Submit'
136                                                                                 }
137                                                                             ]
138
139                                                                         }
140                                                                     ]
141
142                                                                 }
143                                                             ]
144
145                                                         },
146                                                         {
147                                                             cls : 'box box-success',
148                                                             xtype : 'Container',
149                                                             xns : Roo.bootstrap,
150                                                             items : [
151                                                                 {
152                                                                     cls : 'box-header',
153                                                                     xtype : 'Container',
154                                                                     xns : Roo.bootstrap,
155                                                                     items : [
156                                                                         {
157                                                                             cls : 'box-title',
158                                                                             xtype : 'Header',
159                                                                             xns : Roo.bootstrap,
160                                                                             level : 3,
161                                                                             html : 'Different Height'
162                                                                         }
163                                                                     ]
164
165                                                                 },
166                                                                 {
167                                                                     xtype : 'Form',
168                                                                     labelAlign : 'top',
169                                                                     xns : Roo.bootstrap,
170                                                                     items : [
171                                                                         {
172                                                                             cls : 'box-body',
173                                                                             xtype : 'Container',
174                                                                             xns : Roo.bootstrap,
175                                                                             items : [
176                                                                                 {
177                                                                                     xtype : 'Input',
178                                                                                     placeholder : 'size lg',
179                                                                                     xns : Roo.bootstrap,
180                                                                                     size : 'lg'
181                                                                                 },
182                                                                                 {
183                                                                                     xtype : 'Input',
184                                                                                     placeholder : 'size md',
185                                                                                     xns : Roo.bootstrap,
186                                                                                     size : 'md'
187                                                                                 },
188                                                                                 {
189                                                                                     xtype : 'Input',
190                                                                                     placeholder : 'size sm',
191                                                                                     xns : Roo.bootstrap,
192                                                                                     size : 'sm'
193                                                                                 }
194                                                                             ]
195
196                                                                         }
197                                                                     ]
198
199                                                                 }
200                                                             ]
201
202                                                         },
203                                                         {
204                                                             cls : 'box box-danger',
205                                                             xtype : 'Container',
206                                                             xns : Roo.bootstrap,
207                                                             items : [
208                                                                 {
209                                                                     cls : 'box-header',
210                                                                     xtype : 'Container',
211                                                                     xns : Roo.bootstrap,
212                                                                     items : [
213                                                                         {
214                                                                             cls : 'box-title',
215                                                                             xtype : 'Header',
216                                                                             xns : Roo.bootstrap,
217                                                                             level : 3,
218                                                                             html : 'Different Width'
219                                                                         }
220                                                                     ]
221
222                                                                 },
223                                                                 {
224                                                                     xtype : 'Form',
225                                                                     labelAlign : 'top',
226                                                                     xns : Roo.bootstrap,
227                                                                     items : [
228                                                                         {
229                                                                             cls : 'box-body',
230                                                                             xtype : 'Container',
231                                                                             xns : Roo.bootstrap,
232                                                                             items : [
233                                                                                 {
234                                                                                     xtype : 'Row',
235                                                                                     xns : Roo.bootstrap,
236                                                                                     items : [
237                                                                                         {
238                                                                                             md : 3,
239                                                                                             xtype : 'Input',
240                                                                                             placeholder : 'md 3',
241                                                                                             xns : Roo.bootstrap,
242                                                                                             size : 'md'
243                                                                                         },
244                                                                                         {
245                                                                                             md : 3,
246                                                                                             xtype : 'Input',
247                                                                                             placeholder : 'md 4',
248                                                                                             xns : Roo.bootstrap,
249                                                                                             size : 'md'
250                                                                                         },
251                                                                                         {
252                                                                                             md : 5,
253                                                                                             xtype : 'Input',
254                                                                                             placeholder : 'md 3',
255                                                                                             xns : Roo.bootstrap,
256                                                                                             size : 'md'
257                                                                                         }
258                                                                                     ]
259
260                                                                                 }
261                                                                             ]
262
263                                                                         }
264                                                                     ]
265
266                                                                 }
267                                                             ]
268
269                                                         },
270                                                         {
271                                                             cls : 'box box-info',
272                                                             xtype : 'Container',
273                                                             xns : Roo.bootstrap,
274                                                             items : [
275                                                                 {
276                                                                     cls : 'box-header',
277                                                                     xtype : 'Container',
278                                                                     xns : Roo.bootstrap,
279                                                                     items : [
280                                                                         {
281                                                                             cls : 'box-title',
282                                                                             xtype : 'Header',
283                                                                             xns : Roo.bootstrap,
284                                                                             level : 3,
285                                                                             html : 'Input Addon'
286                                                                         }
287                                                                     ]
288
289                                                                 },
290                                                                 {
291                                                                     xtype : 'Form',
292                                                                     labelAlign : 'top',
293                                                                     xns : Roo.bootstrap,
294                                                                     items : [
295                                                                         {
296                                                                             cls : 'box-body',
297                                                                             xtype : 'Container',
298                                                                             xns : Roo.bootstrap,
299                                                                             items : [
300                                                                                 {
301                                                                                     xtype : 'Input',
302                                                                                     placeholder : 'before : @',
303                                                                                     xns : Roo.bootstrap,
304                                                                                     before : '@',
305                                                                                     size : 'md'
306                                                                                 },
307                                                                                 {
308                                                                                     xtype : 'Input',
309                                                                                     placeholder : 'after: .00',
310                                                                                     xns : Roo.bootstrap,
311                                                                                     size : 'md',
312                                                                                     after : 0
313                                                                                 },
314                                                                                 {
315                                                                                     xtype : 'Input',
316                                                                                     placeholder : 'before $, after: .00',
317                                                                                     xns : Roo.bootstrap,
318                                                                                     before : '$',
319                                                                                     size : 'md',
320                                                                                     after : 0
321                                                                                 },
322                                                                                 {
323                                                                                     xtype : 'Header',
324                                                                                     xns : Roo.bootstrap,
325                                                                                     level : 4,
326                                                                                     html : 'With Icons'
327                                                                                 },
328                                                                                 {
329                                                                                     xtype : 'Input',
330                                                                                     placeholder : 'before : &lt;i class=&quot;fa fa-envelope&quot;&gt;&lt;/i&gt;',
331                                                                                     xns : Roo.bootstrap,
332                                                                                     before : '<i class=\"fa fa-envelope\"></i>',
333                                                                                     size : 'md'
334                                                                                 },
335                                                                                 {
336                                                                                     xtype : 'Input',
337                                                                                     placeholder : 'after : &lt;i class=&quot;fa fa-after&quot;&gt;&lt;/i&gt;',
338                                                                                     xns : Roo.bootstrap,
339                                                                                     size : 'md',
340                                                                                     after : '<i class=\"fa fa-check\"></i>'
341                                                                                 },
342                                                                                 {
343                                                                                     xtype : 'Input',
344                                                                                     placeholder : 'after : &lt;i class=&quot;fa fa-ambulance&quot;&gt;&lt;/i&gt; before : &lt;i class=&quot;fa fa-dollar&quot;&gt;&lt;/i&gt;',
345                                                                                     xns : Roo.bootstrap,
346                                                                                     before : '<i class=\"fa fa-dollar\"></i>',
347                                                                                     size : 'md',
348                                                                                     after : '<i class=\"fa fa-ambulance\"></i>'
349                                                                                 },
350                                                                                 {
351                                                                                     xtype : 'Header',
352                                                                                     level : 4,
353                                                                                     xns : Roo.bootstrap,
354                                                                                     html : 'With checkbox and radio'
355                                                                                 },
356                                                                                 {
357                                                                                     xtype : 'Row',
358                                                                                     xns : Roo.bootstrap,
359                                                                                     items : [
360                                                                                         {
361                                                                                             md : 6,
362                                                                                             xtype : 'Input',
363                                                                                             placeholder : '?',
364                                                                                             xns : Roo.bootstrap,
365                                                                                             before : 'fixme',
366                                                                                             size : 'md'
367                                                                                         },
368                                                                                         {
369                                                                                             md : 6,
370                                                                                             xtype : 'Input',
371                                                                                             placeholder : 'md 4',
372                                                                                             xns : Roo.bootstrap,
373                                                                                             size : 'md'
374                                                                                         }
375                                                                                     ]
376
377                                                                                 },
378                                                                                 {
379                                                                                     xtype : 'Header',
380                                                                                     xns : Roo.bootstrap,
381                                                                                     level : 4,
382                                                                                     html : 'With buttons'
383                                                                                 },
384                                                                                 {
385                                                                                     before : {
386                                                                                         menu : {
387                                                                                             xtype : 'Menu',
388                                                                                             xns : Roo.bootstrap,
389                                                                                             items : [
390                                                                                                 {
391                                                                                                     xtype : 'MenuItem',
392                                                                                                     xns : Roo.bootstrap,
393                                                                                                     html : 'http://',
394                                                                                                     listeners : {
395                                                                                                         click : function (e)
396                                                                                                            {
397                                                                                                                _this.httpButton.setText("http://");
398                                                                                                            }
399                                                                                                     }
400                                                                                                 },
401                                                                                                 {
402                                                                                                     xtype : 'MenuItem',
403                                                                                                     xns : Roo.bootstrap,
404                                                                                                     html : 'https://',
405                                                                                                     listeners : {
406                                                                                                         click : function (e)
407                                                                                                            {
408                                                                                                                _this.httpButton.setText("https://");
409                                                                                                            }
410                                                                                                     }
411                                                                                                 }
412                                                                                             ]
413
414                                                                                         },
415                                                                                         weight : 'primary',
416                                                                                         xtype : 'Button',
417                                                                                         xns : Roo.bootstrap,
418                                                                                         html : 'http://',
419                                                                                         listeners : {
420                                                                                                 render : function (_self)
421                                                                                                    {
422                                                                                                        _this.httpButton = _self;
423                                                                                                    }
424                                                                                         },
425                                                                                         items : [
426
427                                                                                         ]
428
429                                                                                     },
430                                                                                     xtype : 'Input',
431                                                                                     placeholder : 'before :  - an object...    ',
432                                                                                     xns : Roo.bootstrap,
433                                                                                     size : 'md',
434                                                                                     items : [
435
436                                                                                     ]
437
438                                                                                 },
439                                                                                 {
440                                                                                     after : {
441                                                                                         weight : 'success',
442                                                                                         xtype : 'Button',
443                                                                                         xns : Roo.bootstrap,
444                                                                                         html : 'Go'
445                                                                                     },
446                                                                                     xtype : 'Input',
447                                                                                     placeholder : 'after - a button',
448                                                                                     xns : Roo.bootstrap,
449                                                                                     size : 'md',
450                                                                                     items : [
451
452                                                                                     ]
453
454                                                                                 }
455                                                                             ]
456
457                                                                         }
458                                                                     ]
459
460                                                                 }
461                                                             ]
462
463                                                         }
464                                                     ]
465
466                                                 },
467                                                 {
468                                                     md : 6,
469                                                     xtype : 'Column',
470                                                     xns : Roo.bootstrap,
471                                                     sm : 12,
472                                                     items : [
473                                                         {
474                                                             cls : 'box box-warning',
475                                                             xtype : 'Container',
476                                                             xns : Roo.bootstrap,
477                                                             items : [
478                                                                 {
479                                                                     cls : 'box-header',
480                                                                     xtype : 'Container',
481                                                                     xns : Roo.bootstrap,
482                                                                     items : [
483                                                                         {
484                                                                             cls : 'box-title',
485                                                                             xtype : 'Header',
486                                                                             xns : Roo.bootstrap,
487                                                                             level : 3,
488                                                                             html : 'General Elements'
489                                                                         }
490                                                                     ]
491
492                                                                 },
493                                                                 {
494                                                                     xtype : 'Form',
495                                                                     labelAlign : 'top',
496                                                                     xns : Roo.bootstrap,
497                                                                     items : [
498                                                                         {
499                                                                             cls : 'box-body',
500                                                                             xtype : 'Container',
501                                                                             xns : Roo.bootstrap,
502                                                                             items : [
503                                                                                 {
504                                                                                     xtype : 'Input',
505                                                                                     placeholder : 'Enter ...',
506                                                                                     fieldLabel : 'Text',
507                                                                                     xns : Roo.bootstrap
508                                                                                 },
509                                                                                 {
510                                                                                     xtype : 'Input',
511                                                                                     placeholder : 'disabled = true',
512                                                                                     disabled : true,
513                                                                                     fieldLabel : 'Text',
514                                                                                     xns : Roo.bootstrap
515                                                                                 },
516                                                                                 {
517                                                                                     xtype : 'TextArea',
518                                                                                     xns : Roo.bootstrap,
519                                                                                     fieldLabel : 'Textarea'
520                                                                                 },
521                                                                                 {
522                                                                                     xtype : 'TextArea',
523                                                                                     placeholder : 'disabled=true',
524                                                                                     disabled : true,
525                                                                                     xns : Roo.bootstrap,
526                                                                                     fieldLabel : 'Textarea'
527                                                                                 },
528                                                                                 {
529                                                                                     cls : 'has-success',
530                                                                                     xtype : 'Input',
531                                                                                     placeholder : 'cls = has-success',
532                                                                                     fieldLabel : 'Input with Success',
533                                                                                     xns : Roo.bootstrap
534                                                                                 },
535                                                                                 {
536                                                                                     cls : 'has-warning',
537                                                                                     xtype : 'Input',
538                                                                                     placeholder : 'cls = has-warning',
539                                                                                     fieldLabel : 'Input with Warning',
540                                                                                     xns : Roo.bootstrap
541                                                                                 },
542                                                                                 {
543                                                                                     cls : 'has-error',
544                                                                                     xtype : 'Input',
545                                                                                     placeholder : 'cls = has-error',
546                                                                                     fieldLabel : 'Input with Error',
547                                                                                     xns : Roo.bootstrap
548                                                                                 },
549                                                                                 {
550                                                                                     xtype : 'CheckBox',
551                                                                                     boxLabel : 'Checkbox 1',
552                                                                                     xns : Roo.bootstrap
553                                                                                 }
554                                                                             ]
555
556                                                                         }
557                                                                     ]
558
559                                                                 }
560                                                             ]
561
562                                                         }
563                                                     ]
564
565                                                 }
566                                             ]
567
568                                         }
569                                     ]
570
571                                 }
572                             ]
573
574                         }
575                     ]
576
577                 }
578             ]
579
580         };    }
581 });