]> git.proxmox.com Git - extjs.git/blame - extjs/examples/kitchensink/classic/samples/view/panel/BasicPanels.js
add extjs 6.0.1 sources
[extjs.git] / extjs / examples / kitchensink / classic / samples / view / panel / BasicPanels.js
CommitLineData
6527f429
DM
1/**\r
2 * This example shows how to create basic panels. Panels typically have a header and a body,\r
3 * although the header is optional. The panel header can contain a title, and icon, and\r
4 * one or more tools for performing specific actions when clicked.\r
5 */\r
6Ext.define('KitchenSink.view.panel.BasicPanels', {\r
7 extend: 'Ext.Container',\r
8 xtype: 'basic-panels',\r
9 width: 660,\r
10 requires: [\r
11 'Ext.layout.container.Table'\r
12 ],\r
13\r
14 layout: {\r
15 type: 'table',\r
16 columns: 3,\r
17 tdAttrs: { style: 'padding: 10px; vertical-align: top;' }\r
18 },\r
19\r
20 defaults: {\r
21 xtype: 'panel',\r
22 width: 200,\r
23 height: 280,\r
24 bodyPadding: 10\r
25 },\r
26 //<example>\r
27 profiles: {\r
28 classic: {\r
29 percentChangeColumn: {\r
30 width: 75\r
31 }\r
32 },\r
33 neptune: {\r
34 percentChangeColumn: {\r
35 width: 100\r
36 }\r
37 }\r
38 },\r
39 //</example>\r
40\r
41 initComponent: function () {\r
42 this.items = [\r
43 {\r
44 html: KitchenSink.DummyText.mediumText\r
45 },\r
46 {\r
47 title: 'Title',\r
48 html: KitchenSink.DummyText.mediumText\r
49 },\r
50 {\r
51 title: 'Collapsible',\r
52 collapsible: true,\r
53 html: KitchenSink.DummyText.mediumText\r
54 },\r
55 {\r
56 title: 'Tools',\r
57 collapsed: true,\r
58 collapsible: true,\r
59 width: 640,\r
60 html: KitchenSink.DummyText.mediumText,\r
61 tools: [\r
62 { type:'pin' },\r
63 { type:'refresh' },\r
64 { type:'search' },\r
65 { type:'save' }\r
66 ],\r
67 colspan: 3\r
68 }\r
69 ];\r
70\r
71 this.callParent();\r
72 }\r
73});\r