examples/bootstrap/dashboard3.bjs
[roojs1] / examples / bootstrap / dashboard3.bjs
1 {
2     "name" : "dashboard3",
3     "parent" : "",
4     "title" : "",
5     "path" : "/home/alan/gitlive/roojs1/examples/bootstrap/dashboard3.bjs",
6     "permname" : "",
7     "modOrder" : "001",
8     "items" : [
9         {
10             "String cls" : "skin-blue",
11             "xtype" : "Body",
12             "$ xns" : "Roo.bootstrap",
13             "items" : [
14                 {
15                     "String cls" : "header",
16                     "tag" : "header",
17                     "xtype" : "Container",
18                     "* xinclude" : "Dashboard.Header1",
19                     "$ xns" : "Roo.bootstrap"
20                 },
21                 {
22                     "String cls" : "wrapper row-offcanvas row-offcanvas-left",
23                     "xtype" : "Container",
24                     "flexy:include" : "Sidebar.html",
25                     "$ xns" : "Roo.bootstrap",
26                     "items" : [
27                         {
28                             "String tag" : "aside",
29                             "String cls" : "left-side sidebar-offcanvas",
30                             "xtype" : "Container",
31                             "* xinclude" : "Dashboard.Sidebar2",
32                             "$ xns" : "Roo.bootstrap"
33                         },
34                         {
35                             "String tag" : "aside",
36                             "String cls" : "right-side",
37                             "xtype" : "Container",
38                             "$ xns" : "Roo.bootstrap",
39                             "items" : [
40                                 {
41                                     "String tag" : "section",
42                                     "String cls" : "content-header",
43                                     "xtype" : "Container",
44                                     "$ xns" : "Roo.bootstrap",
45                                     "items" : [
46                                         {
47                                             "xtype" : "Header",
48                                             "$ xns" : "Roo.bootstrap",
49                                             "String html" : "Dashboard  <small> Control panel </small>"
50                                         }
51                                     ]
52                                 },
53                                 {
54                                     "String tag" : "section",
55                                     "String cls" : "content",
56                                     "xtype" : "Container",
57                                     "$ xns" : "Roo.bootstrap",
58                                     "items" : [
59                                         {
60                                             "xtype" : "Container",
61                                             "$ xns" : "Roo.bootstrap",
62                                             "items" : [
63                                                 {
64                                                     "Number md" : 3,
65                                                     "xtype" : "Column",
66                                                     "Number lg" : 3,
67                                                     "$ xns" : "Roo.bootstrap",
68                                                     "items" : [
69                                                         {
70                                                             "bgcolor" : "",
71                                                             "String cls" : "",
72                                                             "xtype" : "NumberBox",
73                                                             "String headline" : 150,
74                                                             "$ xns" : "Roo.bootstrap.dash",
75                                                             "width" : "col-md-5",
76                                                             "String title" : "New Orders",
77                                                             "String style" : "col-md-3",
78                                                             "height" : 150
79                                                         }
80                                                     ]
81                                                 },
82                                                 {
83                                                     "Number md" : 3,
84                                                     "xtype" : "Column",
85                                                     "Number lg" : 3,
86                                                     "$ xns" : "Roo.bootstrap",
87                                                     "items" : [
88                                                         {
89                                                             "bgcolor" : "green",
90                                                             "String cls" : "",
91                                                             "xtype" : "NumberBox",
92                                                             "String headline" : 150,
93                                                             "$ xns" : "Roo.bootstrap.dash",
94                                                             "width" : "col-md-5",
95                                                             "String title" : "New Orders",
96                                                             "String style" : "col-lg-3",
97                                                             "height" : 150
98                                                         }
99                                                     ]
100                                                 },
101                                                 {
102                                                     "Number md" : 3,
103                                                     "xtype" : "Column",
104                                                     "Number lg" : 3,
105                                                     "$ xns" : "Roo.bootstrap",
106                                                     "items" : [
107                                                         {
108                                                             "bgcolor" : "yellow",
109                                                             "xtype" : "NumberBox",
110                                                             "String headline" : 150,
111                                                             "$ xns" : "Roo.bootstrap.dash",
112                                                             "width" : "col-md-5",
113                                                             "String title" : "New Orders",
114                                                             "String style" : "col-lg-3",
115                                                             "height" : 150
116                                                         }
117                                                     ]
118                                                 },
119                                                 {
120                                                     "Number md" : 3,
121                                                     "Number lg" : 3,
122                                                     "xtype" : "Column",
123                                                     "$ xns" : "Roo.bootstrap",
124                                                     "items" : [
125                                                         {
126                                                             "bgcolor" : "red",
127                                                             "xtype" : "NumberBox",
128                                                             "String headline" : 150,
129                                                             "$ xns" : "Roo.bootstrap.dash",
130                                                             "width" : "",
131                                                             "String title" : "New Orders",
132                                                             "String style" : "col-lg-3",
133                                                             "height" : 150
134                                                         }
135                                                     ]
136                                                 }
137                                             ]
138                                         },
139                                         {
140                                             "xtype" : "Row",
141                                             "$ xns" : "Roo.bootstrap",
142                                             "items" : [
143                                                 {
144                                                     "Number md" : 6,
145                                                     "xtype" : "Column",
146                                                     "Number lg" : 6,
147                                                     "$ xns" : "Roo.bootstrap",
148                                                     "String style" : "",
149                                                     "Number sm" : 12,
150                                                     "items" : [
151                                                         {
152                                                             "listeners" : {
153                                                                 "render" : "function (_self)\n{\n    _this.testbox = _self;\n}"
154                                                             },
155                                                             "xtype" : "TabBox",
156                                                             "$ xns" : "Roo.bootstrap.dash",
157                                                             "String title" : "test 1",
158                                                             "items" : [
159                                                                 {
160                                                                     "xtype" : "TabPane",
161                                                                     "$ xns" : "Roo.bootstrap.dash",
162                                                                     "string title" : "tab 1",
163                                                                     "items" : [
164                                                                         {
165                                                                             "xtype" : "Column",
166                                                                             "$ xns" : "Roo.bootstrap",
167                                                                             "items" : [
168                                                                                 {
169                                                                                     "listeners" : {
170                                                                                         "cellclick" : "function (_self, el, rowIndex, columnIndex, e)\n{\n    \n\n    var cm = this.colModel.getColumnById(this.colModel.getColumnId(columnIndex));\n    if (cm.dataIndex == 'current') {\n        var rec = _this.listTable.ds.getAt(rowIndex);\n        \n        rec.set('current', rec.data.current * 1 ? '0' : '1');\n\n        //_this.listTable.ds.fireEvent(\"datachanged\", this);\n        rec.commit();\n        return;\n    }\n      if (cm.dataIndex == 'aspire') {\n        var rec = _this.listTable.ds.getAt(rowIndex);\n        \n        rec.set('aspire', rec.data.aspire * 1 ? '0' : '1');\n\n        //_this.listTable.ds.fireEvent(\"datachanged\", this);\n        rec.commit();\n        return;\n    }\n\n     \n}",
171                                                                                         "|render" : "function (_self)\n{\n     _this.listTable = _self;\n    (function() { _self.store.load({}); }).defer(100)\n}"
172                                                                                     },
173                                                                                     "xtype" : "Table",
174                                                                                     "Boolean CellSelection" : true,
175                                                                                     "$ xns" : "Roo.bootstrap",
176                                                                                     "Boolean RowSelection" : true,
177                                                                                     "items" : [
178                                                                                         {
179                                                                                             "$ Array data" : "[\n  [ 'A TEST', '1', '0' ],\n  \n    [ 'B test', '1', '0' ],\n      [ 'C test', '1', '0' ],\n    [ 'D test', '1', '0' ]\n]",
180                                                                                             "boolean isLocal" : true,
181                                                                                             "$ Array fields" : "[ 'display_name', 'current', 'aspire' ]",
182                                                                                             "xtype" : "SimpleStore",
183                                                                                             "$ xns" : "Roo.data",
184                                                                                             "* prop" : "store"
185                                                                                         },
186                                                                                         {
187                                                                                             "String header" : "Department",
188                                                                                             "String dataIndex" : "display_name",
189                                                                                             "xtype" : "ColumnModel",
190                                                                                             "$ xns" : "Roo.grid",
191                                                                                             "* prop" : "cm[]"
192                                                                                         },
193                                                                                         {
194                                                                                             "String header" : "Current",
195                                                                                             "String dataIndex" : "current",
196                                                                                             "xtype" : "ColumnModel",
197                                                                                             "$ xns" : "Roo.grid",
198                                                                                             "$ renderer" : "function(v) {  \n\n    var state = v> 0 ?  '-checked' : '';\n\n    return v*1  > 0 ? 'X' : '-';             \n                \n }",
199                                                                                             "* prop" : "cm[]"
200                                                                                         },
201                                                                                         {
202                                                                                             "String header" : "Aspire",
203                                                                                             "String dataIndex" : "aspire",
204                                                                                             "xtype" : "ColumnModel",
205                                                                                             "$ xns" : "Roo.grid",
206                                                                                             "$ renderer" : "function(v) {  \n    var state = v> 0 ?  '-checked' : '';\n    return v*1  > 0 ? 'X' : '-';             \n }",
207                                                                                             "* prop" : "cm[]"
208                                                                                         }
209                                                                                     ]
210                                                                                 }
211                                                                             ]
212                                                                         }
213                                                                     ]
214                                                                 },
215                                                                 {
216                                                                     "xtype" : "TabPane",
217                                                                     "$ xns" : "Roo.bootstrap.dash",
218                                                                     "string title" : "tab 2",
219                                                                     "items" : [
220                                                                         {
221                                                                             "xtype" : "Column",
222                                                                             "$ xns" : "Roo.bootstrap",
223                                                                             "String html" : "tab 2 content"
224                                                                         }
225                                                                     ]
226                                                                 }
227                                                             ]
228                                                         }
229                                                     ]
230                                                 },
231                                                 {
232                                                     "Number md" : 6,
233                                                     "Number lg" : 6,
234                                                     "xtype" : "Column",
235                                                     "$ xns" : "Roo.bootstrap",
236                                                     "String style" : "",
237                                                     "Number sm" : 12,
238                                                     "items" : [
239                                                         {
240                                                             "String cls" : "nav-tabs-custom",
241                                                             "xtype" : "Container",
242                                                             "$ xns" : "Roo.bootstrap",
243                                                             "items" : [
244                                                                 {
245                                                                     "xtype" : "Header",
246                                                                     "$ xns" : "Roo.bootstrap",
247                                                                     "String html" : "income",
248                                                                     "String style" : "margin: 10,10,0,0"
249                                                                 }
250                                                             ]
251                                                         }
252                                                     ]
253                                                 }
254                                             ]
255                                         },
256                                         {
257                                             "xtype" : "Row",
258                                             "$ xns" : "Roo.bootstrap",
259                                             "items" : [
260                                                 {
261                                                     "Number lg" : 6,
262                                                     "xtype" : "Column",
263                                                     "$ xns" : "Roo.bootstrap",
264                                                     "height" : 500,
265                                                     "items" : [
266                                                         {
267                                                             "Boolean active" : true,
268                                                             "xtype" : "TabPanel",
269                                                             "$ xns" : "Roo.bootstrap",
270                                                             "items" : [
271                                                                 {
272                                                                     "xtype" : "Header",
273                                                                     "$ xns" : "Roo.bootstrap",
274                                                                     "Number level" : 3,
275                                                                     "String html" : "some title"
276                                                                 },
277                                                                 {
278                                                                     "xtype" : "Container",
279                                                                     "$ xns" : "Roo.bootstrap",
280                                                                     "String well" : "md",
281                                                                     "items" : [
282                                                                         {
283                                                                             "xtype" : "Row",
284                                                                             "$ xns" : "Roo.bootstrap",
285                                                                             "items" : [
286                                                                                 {
287                                                                                     "Number md" : 6,
288                                                                                     "xtype" : "Column",
289                                                                                     "$ xns" : "Roo.bootstrap",
290                                                                                     "items" : [
291                                                                                         {
292                                                                                             "labelAlign" : "top",
293                                                                                             "fieldLabel" : "Job Title (for your reference)",
294                                                                                             "xtype" : "Input",
295                                                                                             "allowBlank" : true,
296                                                                                             "$ xns" : "Roo.bootstrap",
297                                                                                             "name" : "chosen_title"
298                                                                                         }
299                                                                                     ]
300                                                                                 }
301                                                                             ]
302                                                                         }
303                                                                     ]
304                                                                 }
305                                                             ]
306                                                         }
307                                                     ]
308                                                 }
309                                             ]
310                                         }
311                                     ]
312                                 }
313                             ]
314                         }
315                     ]
316                 }
317             ]
318         }
319     ]
320 }