projects / extjs.git / blame
| Commit | Line | Data |
|---|---|---|
| 6527f429 DM |
1 | Ext.define('KitchenSink.store.Navigation', {\r |
| 2 | extend: 'Ext.data.TreeStore',\r | |
| 3 | alias: 'store.navigation',\r | |
| 4 | \r | |
| 5 | constructor: function(config) {\r | |
| 6 | var me = this,\r | |
| 7 | queryParams = Ext.Object.fromQueryString(location.search),\r | |
| 8 | charts = ('charts' in queryParams) && !/0|false|no/i.test(queryParams.charts);\r | |
| 9 | \r | |
| 10 | me.callParent([Ext.apply({\r | |
| 11 | root: {\r | |
| 12 | text: 'All',\r | |
| 13 | id: 'all',\r | |
| 14 | expanded: true,\r | |
| 15 | children: charts ? me.getChartNavItems() : me.getNavItems()\r | |
| 16 | }\r | |
| 17 | }, config)]);\r | |
| 18 | },\r | |
| 19 | \r | |
| 20 | addIconClasses: function (items) {\r | |
| 21 | for (var item, i = items.length; i-- > 0; ) {\r | |
| 22 | item = items[i];\r | |
| 23 | \r | |
| 24 | if (!('iconCls' in item)) {\r | |
| 25 | item.iconCls = 'icon-' + item.id;\r | |
| 26 | }\r | |
| 27 | \r | |
| 28 | if (!('glyph' in item)) {\r | |
| 29 | // sets the font-family\r | |
| 30 | item.glyph = '32@Sencha-Examples';\r | |
| 31 | }\r | |
| 32 | \r | |
| 33 | if (item.children) {\r | |
| 34 | this.addIconClasses(item.children);\r | |
| 35 | }\r | |
| 36 | }\r | |
| 37 | \r | |
| 38 | return items;\r | |
| 39 | },\r | |
| 40 | \r | |
| 41 | getChartNavItems: function() {\r | |
| 42 | var combinationExamples,\r | |
| 43 | drawExamples,\r | |
| 44 | items = this.addIconClasses([\r | |
| 45 | {\r | |
| 46 | text: 'Column Charts',\r | |
| 47 | id: 'column-charts',\r | |
| 48 | expanded: true,\r | |
| 49 | description: 'Column charts provide a visual comparison of numbers or frequency against different discrete ' +\r | |
| 50 | 'categories or groups. These charts display vertical bars to represent information in a way + ' +\r | |
| 51 | 'that allows for quick generalizations regarding your data.',\r | |
| 52 | children: [\r | |
| 53 | { id: 'column-basic', text: 'Basic', leaf: true },\r | |
| 54 | { id: 'column-stacked', text: 'Stacked', leaf: true },\r | |
| 55 | { id: 'column-stacked-100', text: '100% Stacked', leaf: true },\r | |
| 56 | { id: 'column-renderer', text: 'With Renderer', leaf: true },\r | |
| 57 | { id: 'column-multi-axis', text: 'Multiaxis', leaf: true }\r | |
| 58 | ]\r | |
| 59 | },\r | |
| 60 | {\r | |
| 61 | text: '3D Column Charts',\r | |
| 62 | id: 'column-charts-3d',\r | |
| 63 | expanded: true,\r | |
| 64 | description: '3D Column charts provide a visual comparison of numbers or frequency against different discrete ' +\r | |
| 65 | 'categories or groups. These charts display vertical bars to represent information in a way + ' +\r | |
| 66 | 'that allows for quick generalizations regarding your data.',\r | |
| 67 | children: [\r | |
| 68 | { id: 'column-basic-3d', text: 'Basic', leaf: true },\r | |
| 69 | { id: 'column-grouped-3d', text: 'Grouped', leaf: true },\r | |
| 70 | { id: 'column-stacked-3d', text: 'Stacked', leaf: true },\r | |
| 71 | { id: 'column-stacked-100-3d', text: '100% Stacked', leaf: true },\r | |
| 72 | { id: 'column-negative-3d', text: 'Negative values', leaf: true },\r | |
| 73 | { id: 'column-renderer-3d', text: 'With Renderer', leaf: true }\r | |
| 74 | ]\r | |
| 75 | },\r | |
| 76 | {\r | |
| 77 | text: 'Bar Charts',\r | |
| 78 | id: 'bar-charts',\r | |
| 79 | expanded: true,\r | |
| 80 | description: 'Bar charts provide a visual comparison of numbers or frequency against different discrete ' +\r | |
| 81 | 'categories or groups. These charts display horizontal bars to represent information in a way + ' +\r | |
| 82 | 'that allows for quick generalizations regarding your data.',\r | |
| 83 | children: [\r | |
| 84 | { id: 'bar-basic', text: 'Basic', leaf: true },\r | |
| 85 | { id: 'bar-stacked', text: 'Stacked', leaf: true },\r | |
| 86 | { id: 'bar-stacked-100', text: '100% Stacked', leaf: true }\r | |
| 87 | ]\r | |
| 88 | },\r | |
| 89 | {\r | |
| 90 | text: '3D Bar Charts',\r | |
| 91 | id: 'bar-charts-3d',\r | |
| 92 | expanded: true,\r | |
| 93 | description: '3D Bar charts provide a visual comparison of numbers or frequency against different discrete ' +\r | |
| 94 | 'categories or groups. These charts display horizontal bars to represent information in a way + ' +\r | |
| 95 | 'that allows for quick generalizations regarding your data.',\r | |
| 96 | children: [\r | |
| 97 | { id: 'bar-basic-3d', text: 'Basic', leaf: true },\r | |
| 98 | { id: 'bar-stacked-3d', text: 'Stacked', leaf: true },\r | |
| 99 | { id: 'bar-stacked-100-3d', text: '100% Stacked', leaf: true },\r | |
| 100 | { id: 'bar-negative-3d', text: 'Negative values', leaf: true }\r | |
| 101 | ]\r | |
| 102 | },\r | |
| 103 | {\r | |
| 104 | text: 'Line Charts',\r | |
| 105 | id: 'line-charts',\r | |
| 106 | expanded: true,\r | |
| 107 | description: 'Line charts display information as a series of markers that are connected by lines.' +\r | |
| 108 | 'These charts are excellent for showing underlying patterns between data points.',\r | |
| 109 | children: [\r | |
| 110 | { id: 'line-basic', text: 'Basic', leaf: true },\r | |
| 111 | { id: 'line-marked', text: 'Basic + Markers', leaf: true },\r | |
| 112 | { id: 'line-spline', text: 'Spline', leaf: true },\r | |
| 113 | { id: 'line-marked-spline', text: 'Spline + Markers', leaf: true },\r | |
| 114 | { id: 'line-plot', text: 'Plot', leaf: true },\r | |
| 115 | { id: 'line-markers', text: 'With Image Markers', leaf: true },\r | |
| 116 | { id: 'line-crosszoom', text: 'With Zoom', leaf: true },\r | |
| 117 | { id: 'line-renderer', text: 'With Renderer', leaf: true },\r | |
| 118 | { id: 'line-real-time', text: 'Real-time', leaf: true }\r | |
| 119 | ]\r | |
| 120 | },\r | |
| 121 | {\r | |
| 122 | text: 'Area Charts',\r | |
| 123 | id: 'area-charts',\r | |
| 124 | expanded: true,\r | |
| 125 | description: 'Area charts display data by differentiating the area between lines. They are often ' +\r | |
| 126 | 'used to measure trends by representing totals over time.',\r | |
| 127 | children: [\r | |
| 128 | { id: 'area-basic', text: 'Basic', leaf: true },\r | |
| 129 | { id: 'area-stacked', text: 'Stacked', leaf: true },\r | |
| 130 | { id: 'area-stacked-100', text: '100% Stacked', leaf: true },\r | |
| 131 | { id: 'area-negative', text: 'Negative Values', leaf: true }\r | |
| 132 | ]\r | |
| 133 | },\r | |
| 134 | {\r | |
| 135 | text: 'Scatter Charts',\r | |
| 136 | id: 'scatter-charts',\r | |
| 137 | expanded: true,\r | |
| 138 | description: 'Scatter charts are diagrams that are used to display data as a collection of points.' +\r | |
| 139 | 'They are perfect for showing multiple measurements to aid in finding correlation ' +\r | |
| 140 | 'between variables.',\r | |
| 141 | children: [\r | |
| 142 | { id: 'scatter-basic', text: 'Basic', leaf: true },\r | |
| 143 | { id: 'scatter-custom-icons', text: 'Custom Icons', leaf: true },\r | |
| 144 | { id: 'scatter-bubble', text: 'Bubble', leaf: true }\r | |
| 145 | ]\r | |
| 146 | },\r | |
| 147 | {\r | |
| 148 | text: 'Financial Charts',\r | |
| 149 | id: 'financial-charts',\r | |
| 150 | expanded: true,\r | |
| 151 | description : 'Financial charts provide a simple method for showing the change in price over time. ' +\r | |
| 152 | 'A quick look at these charts provides information regarding financial highs, lows, ' +\r | |
| 153 | 'opens, and closes.',\r | |
| 154 | children: [\r | |
| 155 | { id: 'financial-candlestick', text: 'Candlestick', leaf: true },\r | |
| 156 | { id: 'financial-ohlc', text: 'OHLC', leaf: true }\r | |
| 157 | ]\r | |
| 158 | },\r | |
| 159 | {\r | |
| 160 | text: 'Pie Charts',\r | |
| 161 | id: 'pie-charts',\r | |
| 162 | expanded: true,\r | |
| 163 | description: 'Pie charts show sectors of data proportional to the whole. They are excellent for ' +\r | |
| 164 | 'providing a quick and simple comparison of a category to the whole.',\r | |
| 165 | children: [\r | |
| 166 | { id: 'pie-basic', text: 'Basic', leaf: true },\r | |
| 167 | { id: 'pie-custom', text: 'Spie', leaf: true },\r | |
| 168 | { id: 'pie-donut', text: 'Donut', leaf: true },\r | |
| 169 | { id: 'pie-3d', text: '3D Pie', leaf: true }\r | |
| 170 | ]\r | |
| 171 | },\r | |
| 172 | {\r | |
| 173 | text: 'Radar Charts',\r | |
| 174 | id: 'radar-charts',\r | |
| 175 | expanded: true,\r | |
| 176 | description: 'Radar charts offer a flat view of data involving multiple variable quantities. They are ' +\r | |
| 177 | 'generally used to show performance metrics because they easily emphasize strengths and ' +\r | |
| 178 | 'weaknesses from a simple two-dimensional perspective.',\r | |
| 179 | children: [\r | |
| 180 | { id: 'radar-basic', text: 'Basic', leaf: true },\r | |
| 181 | { id: 'radar-filled', text: 'Filled', leaf: true },\r | |
| 182 | { id: 'radar-marked', text: 'Marked', leaf: true },\r | |
| 183 | { id: 'radar-multi-axis', text: 'Multiaxis', leaf: true }\r | |
| 184 | ]\r | |
| 185 | },\r | |
| 186 | {\r | |
| 187 | text: 'Gauge Charts',\r | |
| 188 | id: 'guage-charts',\r | |
| 189 | expanded: true,\r | |
| 190 | description: 'Gauge charts contain a single value axis that provides simple visualization for dashboards.' +\r | |
| 191 | 'They are generally used to show the current status or heartbeat with a single point of data.',\r | |
| 192 | children: [\r | |
| 193 | { id: 'gauge-basic', text: 'Basic', leaf: true }\r | |
| 194 | ]\r | |
| 195 | },\r | |
| 196 | {\r | |
| 197 | text: 'Combination Charts',\r | |
| 198 | id: 'combination-charts',\r | |
| 199 | expanded: true,\r | |
| 200 | description: 'Sencha Charts gives you the ability to easily join several chart types into one chart. ' +\r | |
| 201 | 'This gives developers the ability to show multiple series in a single view.',\r | |
| 202 | children: combinationExamples = [\r | |
| 203 | { id: 'combination-pareto', text: 'Pareto', leaf: true },\r | |
| 204 | { id: 'combination-dashboard', text: 'Interactive Dashboard', leaf: true },\r | |
| 205 | { id: 'unemployment', text: 'Infographic', leaf: true },\r | |
| 206 | { id: 'combination-theme', text: 'Custom Theme', leaf: true },\r | |
| 207 | { id: 'combination-bindingtabs', text: 'Binding & Tabs', leaf: true}\r | |
| 208 | ]\r | |
| 209 | },\r | |
| 210 | {\r | |
| 211 | text: 'Drawing',\r | |
| 212 | id: 'drawing',\r | |
| 213 | expanded: true,\r | |
| 214 | description: 'The Sencha Draw package allows developers to create cross-browser compatible and mobile ' +\r | |
| 215 | 'friendly graphics, text, and shapes. You can even create a standalone drawing tool!',\r | |
| 216 | children: drawExamples = [\r | |
| 217 | { id: 'free-paint', text: 'Free Paint', leaf: true },\r | |
| 218 | { id: 'draw-bounce', text: 'Bouncing Logo', leaf: true },\r | |
| 219 | { id: 'hit-test', text: 'Hit Testing', leaf: true },\r | |
| 220 | { id: 'intersections', text: 'Path Intersections', leaf: true },\r | |
| 221 | { id: 'draw-composite', text: 'Composite', leaf: true },\r | |
| 222 | { id: 'sprite-events', text: 'Sprite Events', leaf: true},\r | |
| 223 | { id: 'easing-functions', text: 'Easing Functions', leaf: true }\r | |
| 224 | ]\r | |
| 225 | }\r | |
| 226 | ]);\r | |
| 227 | if (Ext.isIE8) {\r | |
| 228 | combinationExamples.splice(2, 1);\r | |
| 229 | drawExamples.splice(1, 1);\r | |
| 230 | }\r | |
| 231 | return items;\r | |
| 232 | },\r | |
| 233 | \r | |
| 234 | getNavItems: function() {\r | |
| 235 | return this.addIconClasses([\r | |
| 236 | {\r | |
| 237 | text: 'Panels',\r | |
| 238 | id: 'panels',\r | |
| 239 | expanded: true,\r | |
| 240 | description: 'Panels are the basic container that makes up the structure ' +\r | |
| 241 | 'of most applications. Panels have a header and body, and can be arranged ' +\r | |
| 242 | 'in various ways using layouts. These examples provide a few common use cases of Ext JS Panels.',\r | |
| 243 | children: [\r | |
| 244 | { id: 'basic-panels', text: 'Basic Panel', leaf: true },\r | |
| 245 | { id: 'framed-panels', text: 'Framed Panel', leaf: true },\r | |
| 246 | { id: 'panel-header-position', text: 'Header Positioning', leaf: true }\r | |
| 247 | ]\r | |
| 248 | },\r | |
| 249 | {\r | |
| 250 | text: 'Grids',\r | |
| 251 | id: 'grids',\r | |
| 252 | expanded: true,\r | |
| 253 | description: 'Grids are one of the centerpieces of Ext JS. They are incredibly versatile components ' +\r | |
| 254 | 'that provide an easy path to display, sort, group, and edit data. These examples show a ' +\r | |
| 255 | 'number of the most often used grids in Ext JS.',\r | |
| 256 | children: [\r | |
| 257 | { id: 'array-grid', text: 'Array Grid', leaf: true },\r | |
| 258 | { id: 'grouped-grid', text: 'Grouped Grid', leaf: true },\r | |
| 259 | { id: 'locking-grid', text: 'Locking Grid', leaf: true },\r | |
| 260 | { id: 'grouped-header-grid', text: 'Grouped Header Grid', leaf: true },\r | |
| 261 | { id: 'multi-sort-grid', text: 'Multiple Sort Grid', leaf: true },\r | |
| 262 | { id: 'spreadsheet', text: 'Spreadsheet with locking', leaf: true},\r | |
| 263 | { id: 'spreadsheet-checked', text: 'Spreadsheet with Checked Rows', leaf: true },\r | |
| 264 | { id: 'progress-bar-pager', text: 'Progress Bar Pager', leaf: true },\r | |
| 265 | { id: 'sliding-pager', text: 'Sliding Pager', leaf: true },\r | |
| 266 | { id: 'xml-grid', text: 'XML Grid', leaf: true },\r | |
| 267 | { id: 'paging-grid', text: 'Paging', leaf: true },\r | |
| 268 | {\r | |
| 269 | id: 'grid-plugins',\r | |
| 270 | expanded: true,\r | |
| 271 | text: 'Grid Plugins',\r | |
| 272 | leaf: false,\r | |
| 273 | description: 'Grid panels can extend their functionality with the use of our Grid Plugins. ' +\r | |
| 274 | 'Our plugins offer various accoutrements to basic Grid functionality, such as ' +\r | |
| 275 | 'row numbering, row expanding, and checkbox selection models.',\r | |
| 276 | children: [\r | |
| 277 | {id: 'expander-lockable', text: 'Row Expander, lockable columns', leaf: true },\r | |
| 278 | {id: 'checkbox-selection', text: 'Checkbox Selection Model', leaf: true },\r | |
| 279 | {id: 'row-numberer', text: 'Row Numberer', leaf: true },\r | |
| 280 | {id: 'framing-buttons', text: 'Framed with docked toolbars', leaf: true }\r | |
| 281 | ]\r | |
| 282 | },\r | |
| 283 | { id: 'grid-filtering', text: 'Grid Filtering', leaf: true },\r | |
| 284 | { id: 'reconfigure-grid', text: 'Reconfigure Grid', leaf: true },\r | |
| 285 | { id: 'property-grid', text: 'Property Grid', leaf: true },\r | |
| 286 | { id: 'cell-editing', text: 'Cell Editing', leaf: true },\r | |
| 287 | { id: 'row-expander-grid', text: 'Row Expander', leaf: true },\r | |
| 288 | { id: 'big-data-grid', text: 'Big Data', leaf: true },\r | |
| 289 | { id: 'widget-grid', text: 'Widget grid', leaf: true },\r | |
| 290 | { id: 'customer-grid', text: 'Customer/Order grid', leaf: true }\r | |
| 291 | ]\r | |
| 292 | },\r | |
| 293 | {\r | |
| 294 | text: 'Pivot Grids',\r | |
| 295 | id: 'pivot-grids',\r | |
| 296 | expanded: true,\r | |
| 297 | description: 'The Pivot Grid component enables rapid summarization of large sets of data. ' +\r | |
| 298 | 'It provides a simple way to condense many data points into a format that ' +\r | |
| 299 | 'makes trends and insights more apparent.',\r | |
| 300 | children: [\r | |
| 301 | { id: 'outline-pivot-grid', text: 'Outline layout', leaf: true },\r | |
| 302 | { id: 'compact-pivot-grid', text: 'Compact layout', leaf: true },\r | |
| 303 | { id: 'drilldown-pivot-grid', text: 'DrillDown plugin', leaf: true },\r | |
| 304 | { id: 'configurable-pivot-grid', text: 'Configurator plugin', leaf: true },\r | |
| 305 | { id: 'rangeeditor-pivot-grid', text: 'RangeEditor plugin', leaf: true },\r | |
| 306 | { id: 'excel-pivot-grid', text: 'Exporter plugin', leaf: true },\r | |
| 307 | { id: 'chart-pivot-grid', text: 'Chart integration', leaf: true },\r | |
| 308 | { id: 'remote-pivot-grid', text: 'Remote calculations', leaf: true }\r | |
| 309 | ]\r | |
| 310 | },\r | |
| 311 | {\r | |
| 312 | text: 'Data Binding',\r | |
| 313 | id: 'data-binding',\r | |
| 314 | expanded: true,\r | |
| 315 | description: 'Data binding, and the ViewModel that powers it, are powerful pieces of Ext JS 5. ' +\r | |
| 316 | 'Together, they enable you to create a seamless connection between your application UI ' +\r | |
| 317 | 'and your business logic.',\r | |
| 318 | children: [\r | |
| 319 | { id: 'binding-hello-world', text: 'Hello World', leaf: true },\r | |
| 320 | { id: 'binding-dynamic', text: 'Dynamic', leaf: true },\r | |
| 321 | { id: 'binding-two-way', text: 'Two Way', leaf: true },\r | |
| 322 | { id: 'binding-formulas', text: 'Formulas', leaf: true },\r | |
| 323 | { id: 'binding-associations', text: 'Associations', leaf: true },\r | |
| 324 | { id: 'binding-component-state', text: 'Component State', leaf: true },\r | |
| 325 | { id: 'binding-chained-stores', text: 'Chaining Stores', leaf: true},\r | |
| 326 | { id: 'binding-combo-chaining', text: 'Chained ComboBoxes', leaf: true },\r | |
| 327 | { id: 'binding-selection', text: 'Chaining Selection', leaf: true },\r | |
| 328 | // { id: 'binding-gridform', text: 'Grid + Form', leaf: true },\r | |
| 329 | { id: 'binding-model-validation', text: 'Model Validation', leaf: true },\r | |
| 330 | { id: 'binding-field-validation', text: 'Field Validation', leaf: true },\r | |
| 331 | { id: 'binding-two-way-formulas', text: 'Two-Way Formulas', leaf: true },\r | |
| 332 | { id: 'binding-slider-form', text: 'Slider and Form Fields', leaf: true },\r | |
| 333 | { id: 'binding-child-session', text: 'Isolated Child Sessions', leaf: true }\r | |
| 334 | ]\r | |
| 335 | },\r | |
| 336 | {\r | |
| 337 | text: 'Trees',\r | |
| 338 | id: 'trees',\r | |
| 339 | expanded: true,\r | |
| 340 | description: 'Tree Panels provide a tree-structured UI representation of tree-structured data.' +\r | |
| 341 | 'Tree Panel\'s built-in expand/collapse nodes offer a whole new set of opportunities' +\r | |
| 342 | 'for user interface and data display.',\r | |
| 343 | children: [\r | |
| 344 | { id: 'basic-trees', text: 'Basic Trees', leaf: true },\r | |
| 345 | { id: 'tree-reorder', text: 'Tree Reorder', leaf: true },\r | |
| 346 | { id: 'tree-grid', text: 'Tree Grid', leaf: true },\r | |
| 347 | { id: 'tree-two', text: 'Two Trees', leaf: true },\r | |
| 348 | { id: 'check-tree', text: 'Check Tree', leaf: true },\r | |
| 349 | { id: 'tree-xml', text: 'XML Tree', leaf: true },\r | |
| 350 | { id: 'filtered-tree', text: 'Filtered Tree', leaf: true },\r | |
| 351 | { id: 'heterogeneous-tree', text: 'Heterogeneous Tree', leaf: true },\r | |
| 352 | { id: 'lineardata-tree', text: 'Linear Data Geographical Tree', leaf: true },\r | |
| 353 | \r | |
| 354 | { id: 'tree-list', text: 'Tree List', leaf: true }\r | |
| 355 | ]\r | |
| 356 | },\r | |
| 357 | {\r | |
| 358 | text: 'Tabs',\r | |
| 359 | id: 'tabs',\r | |
| 360 | expanded: true,\r | |
| 361 | description: 'Tab Panels are panels that have extended support for containing and displaying children ' +\r | |
| 362 | 'items. These children are managed using a Card Layout and are shown as tabulated content.',\r | |
| 363 | children: [\r | |
| 364 | { id: 'basic-tabs', text: 'Basic Tabs', leaf: true },\r | |
| 365 | { id: 'plain-tabs', text: 'Plain Tabs', leaf: true },\r | |
| 366 | { id: 'framed-tabs', text: 'Framed Tabs', leaf: true },\r | |
| 367 | { id: 'icon-tabs', text: 'Icon Tabs', leaf: true },\r | |
| 368 | { id: 'ajax-tabs', text: 'Ajax Tabs', leaf: true },\r | |
| 369 | { id: 'advanced-tabs', text: 'Advanced Tabs', leaf: true },\r | |
| 370 | { id: 'lazy-tabs', text: 'Lazy Instantiating Tabs', leaf: true},\r | |
| 371 | { id: 'navigation-tabs', text: 'Navigation Tabs', leaf: true },\r | |
| 372 | { id: 'side-navigation-tabs', text: 'Side Navigation Tabs', leaf: true },\r | |
| 373 | { id: 'header-tabs', text: 'Header Tabs', leaf: true },\r | |
| 374 | { id: 'reorderable-tabs', text: 'Reorderable Tabs', leaf: true }\r | |
| 375 | ]\r | |
| 376 | },\r | |
| 377 | {\r | |
| 378 | text: 'Windows',\r | |
| 379 | id: 'windows',\r | |
| 380 | expanded: true,\r | |
| 381 | description: 'Windows are specialized panels, intended to be used as application windows. ' +\r | |
| 382 | 'Windows are floating, resizable, and draggable by default and can add an OS flair' +\r | |
| 383 | 'to your application.',\r | |
| 384 | children: [\r | |
| 385 | { id: 'basic-window', text: 'Basic Window', leaf: true },\r | |
| 386 | { id: 'message-box', text: 'Message Box', leaf: true }\r | |
| 387 | ]\r | |
| 388 | },\r | |
| 389 | {\r | |
| 390 | text: 'Buttons',\r | |
| 391 | id: 'buttons',\r | |
| 392 | expanded: true,\r | |
| 393 | description: 'Buttons are a utilitarian component of Ext JS. From forms to grid row widgets, ' +\r | |
| 394 | 'they can be used in nearly any application for user interaction and directing usability.',\r | |
| 395 | children: [\r | |
| 396 | { id: 'basic-buttons', text: 'Basic Buttons', leaf: true },\r | |
| 397 | { id: 'toggle-buttons', text: 'Toggle Buttons', leaf: true },\r | |
| 398 | { id: 'menu-buttons', text: 'Menu Buttons', leaf: true },\r | |
| 399 | { id: 'menu-bottom-buttons', text: 'Menu Bottom Buttons', leaf: true },\r | |
| 400 | { id: 'split-buttons', text: 'Split Buttons', leaf: true },\r | |
| 401 | { id: 'split-bottom-buttons', text: 'Split Bottom Buttons', leaf: true },\r | |
| 402 | { id: 'left-text-buttons', text: 'Left Text Buttons', leaf: true },\r | |
| 403 | { id: 'right-text-buttons', text: 'Right Text Buttons', leaf: true },\r | |
| 404 | { id: 'link-buttons', text: 'Link Buttons', leaf: true },\r | |
| 405 | { id: 'segmented-buttons', text: 'Segmented Buttons', leaf: true },\r | |
| 406 | { id: 'vertical-segmented-buttons', text: 'Vertical Segmented Buttons', leaf: true }\r | |
| 407 | ]\r | |
| 408 | },\r | |
| 409 | {\r | |
| 410 | text: 'DataView',\r | |
| 411 | id: 'data-view',\r | |
| 412 | expanded: true,\r | |
| 413 | description: 'Dataviews are an XTemplate based mechanism for displaying data using custom layout' +\r | |
| 414 | 'templates and formatting. They can connect to any store and display data in any way' +\r | |
| 415 | 'you see fit.',\r | |
| 416 | children: [\r | |
| 417 | { id: 'dataview-multisort', text: 'Multisort DataView', leaf: true }\r | |
| 418 | ]\r | |
| 419 | },\r | |
| 420 | {\r | |
| 421 | text: 'Form Fields',\r | |
| 422 | id: 'form-fields',\r | |
| 423 | expanded: true,\r | |
| 424 | description: 'Form Fields offer developers standard HTML form fields with built-in event handling, ' +\r | |
| 425 | 'rendering, and other common functionality you may require. Variations of fields include: ' +\r | |
| 426 | 'textfields, textareas, htmleditors, radio groups, checkboxes, and more!',\r | |
| 427 | children: [\r | |
| 428 | { id: 'form-number', text: 'Number Field', leaf: true },\r | |
| 429 | { id: 'form-date', text: 'Date/Month Picker', leaf: true },\r | |
| 430 | {\r | |
| 431 | id: 'combo-boxes',\r | |
| 432 | expanded: true,\r | |
| 433 | text: 'ComboBoxes',\r | |
| 434 | leaf: false,\r | |
| 435 | description: 'These examples demonstrate that ComboBoxes can use any type of ' +\r | |
| 436 | 'Ext.data.Store as a data souce. This means your data can be XML, JSON, '+\r | |
| 437 | 'arrays or any other supported format. It can be loaded using Ajax, JSONP or locally.',\r | |
| 438 | children: [\r | |
| 439 | {id: 'simple-combo', text: 'Simple ComboBox', leaf: true },\r | |
| 440 | {id: 'remote-combo', text: 'Remote Query ComboBox', leaf: true },\r | |
| 441 | {id: 'remote-loaded-combo', text: 'Remote loaded ComboBox', leaf: true },\r | |
| 442 | {id: 'custom-template-combo', text: 'Custom Template ComboBox', leaf: true }\r | |
| 443 | ]\r | |
| 444 | },\r | |
| 445 | { id: 'form-fileuploads', text: 'File Uploads', leaf: true },\r | |
| 446 | { id: 'form-fieldreplicator', text: 'Field Replicator', leaf: true },\r | |
| 447 | { id: 'form-grid', text: 'Form with Grid', leaf: true },\r | |
| 448 | { id: 'form-tag', text: 'Tag Field', leaf: true },\r | |
| 449 | { id: 'multi-selector', text: 'Multi-Selector Grid', leaf: true },\r | |
| 450 | { id: 'form-fieldtypes', text: 'Field Types', leaf: true},\r | |
| 451 | { id: 'form-fieldcontainer', text: 'Field Container', leaf: true},\r | |
| 452 | { id: 'form-checkboxgroup', text: 'Checkbox Groups', leaf: true },\r | |
| 453 | { id: 'form-radiogroup', text: 'Radio Groups', leaf: true },\r | |
| 454 | { id: 'slider-field', text: 'Slider Field', leaf: true }\r | |
| 455 | ]\r | |
| 456 | },\r | |
| 457 | {\r | |
| 458 | text: 'Forms',\r | |
| 459 | id: 'forms',\r | |
| 460 | expanded: true,\r | |
| 461 | description: 'Form Panel extends panel to offer developers the ability to manage data collection in a ' +\r | |
| 462 | 'simple and straightforward manner. Field display and handling can be configured in almost ' +\r | |
| 463 | 'any conceivable fashion and offers default objects to minimize repetitive code.',\r | |
| 464 | children: [\r | |
| 465 | { id: 'form-login', text: 'Login Form', leaf: true },\r | |
| 466 | { id: 'form-contact', text: 'Contact Form', leaf: true },\r | |
| 467 | { id: 'form-register', text: 'Register Form', leaf: true },\r | |
| 468 | { id: 'form-checkout', text: 'Checkout Form', leaf: true },\r | |
| 469 | { id: 'form-color-picker', text: 'Color Picker', leaf: true},\r | |
| 470 | { id: 'form-rating', text: 'Rating Form', leaf: true},\r | |
| 471 | { id: 'form-vboxlayout', text: 'VBox Layout', leaf: true },\r | |
| 472 | { id: 'form-hboxlayout', text: 'HBox Layout', leaf: true },\r | |
| 473 | { id: 'form-multicolumn', text: 'Multi Column Form', leaf: true },\r | |
| 474 | { id: 'form-xml', text: 'XML Form', leaf: true },\r | |
| 475 | { id: 'form-advtypes', text: 'Custom VTypes', leaf: true },\r | |
| 476 | { id: 'form-customfields', text: 'Custom fields', leaf: true },\r | |
| 477 | { id: 'form-forumsearch', text: 'Forum Search', leaf: true },\r | |
| 478 | { id: 'form-customerrors', text: 'Custom Error Handling', leaf: true }\r | |
| 479 | ]\r | |
| 480 | },\r | |
| 481 | {\r | |
| 482 | text: 'Toolbars',\r | |
| 483 | id: 'toolbars',\r | |
| 484 | expanded: true,\r | |
| 485 | description: 'Toolbars are easily customizable components that give developers a simple way to display ' +\r | |
| 486 | 'a variety of user interfaces.',\r | |
| 487 | children: [\r | |
| 488 | { id: 'basic-toolbar', text: 'Basic Toolbar', leaf: true },\r | |
| 489 | { id: 'docked-toolbars', text: 'Docked Toolbar', leaf: true },\r | |
| 490 | { id: 'breadcrumb-toolbar', text: 'Breadcrumb Toolbar', leaf: true },\r | |
| 491 | { id: 'toolbar-overflow', text: 'Toolbar Overflow', leaf: true }\r | |
| 492 | ]\r | |
| 493 | },\r | |
| 494 | {\r | |
| 495 | text: 'Layouts',\r | |
| 496 | id: 'layouts',\r | |
| 497 | expanded: true,\r | |
| 498 | description: 'Layouts can be considered the heart and soul of Ext JS. They manage the DOM flow and ' +\r | |
| 499 | 'display of your content. There are multiple layout options that should satisfy almost' +\r | |
| 500 | 'any application wireframe.',\r | |
| 501 | children: [\r | |
| 502 | { id: 'layout-absolute', text: 'Absolute Layout', leaf: true },\r | |
| 503 | { id: 'layout-accordion', text: 'Accordion Layout', leaf: true },\r | |
| 504 | { id: 'layout-border', text: 'Border Layout', leaf: true },\r | |
| 505 | { id: 'layout-card', text: 'Card Layout', leaf: true },\r | |
| 506 | { id: 'layout-cardtabs', text: 'Card (Tabs)', leaf: true },\r | |
| 507 | { id: 'layout-center', text: 'Center Layout', leaf: true },\r | |
| 508 | { id: 'layout-column', text: 'Column Layout', leaf: true },\r | |
| 509 | { id: 'layout-fit', text: 'Fit Layout', leaf: true },\r | |
| 510 | { id: 'layout-horizontal-box', text: 'HBox Layout', leaf: true },\r | |
| 511 | { id: 'layout-table', text: 'Table Layout', leaf: true },\r | |
| 512 | { id: 'layout-vertical-box', text: 'VBox Layout', leaf: true }\r | |
| 513 | ]\r | |
| 514 | },\r | |
| 515 | {\r | |
| 516 | text: 'Drag & Drop',\r | |
| 517 | id: 'drag-drop',\r | |
| 518 | expanded: true,\r | |
| 519 | description: 'Drag and Drop functionality gives developers the ability to create interesting ' +\r | |
| 520 | 'and useful interfaces for their users.',\r | |
| 521 | children: [\r | |
| 522 | { id: 'dd-field-to-grid', text: 'Field to Grid', leaf: true },\r | |
| 523 | { id: 'dd-grid-to-form', text: 'Grid to Form', leaf: true },\r | |
| 524 | { id: 'dd-grid-to-grid', text: 'Grid to Grid', leaf: true }\r | |
| 525 | ]\r | |
| 526 | },\r | |
| 527 | {\r | |
| 528 | text: 'Ext Direct',\r | |
| 529 | id: 'direct',\r | |
| 530 | expanded: true,\r | |
| 531 | description: 'Ext Direct streamlines communication between the client and server by providing a single ' +\r | |
| 532 | 'interface that reduces much of the common code required to validate and handle data.',\r | |
| 533 | children: [\r | |
| 534 | { id: 'direct-grid', text: 'Grid with Direct store', leaf: true },\r | |
| 535 | { id: 'direct-tree', text: 'Tree with dynamic nodes', leaf: true },\r | |
| 536 | { id: 'direct-form', text: 'Form load and submit actions', leaf: true },\r | |
| 537 | { id: 'direct-generic', text: 'Generic remoting and polling', leaf: true },\r | |
| 538 | { id: 'direct-named', text: 'Custom form processing', leaf: true }\r | |
| 539 | ]\r | |
| 540 | },\r | |
| 541 | {\r | |
| 542 | text: 'Enterprise',\r | |
| 543 | id: 'enterprise',\r | |
| 544 | description: 'Our Enterprise tools offer developers the ability to easily utilize data interfaces such' +\r | |
| 545 | 'as SOAP and AMF. These enterprise tools are available via our Sencha Complete package.',\r | |
| 546 | expanded: true,\r | |
| 547 | children: [\r | |
| 548 | { id: 'amf-grid', text: 'AMF Grid', leaf: true },\r | |
| 549 | { id: 'soap-grid', text: 'Soap Grid', leaf: true }\r | |
| 550 | ]\r | |
| 551 | }\r | |
| 552 | ]);\r | |
| 553 | }\r | |
| 554 | });\r |