]>
Commit | Line | Data |
---|---|---|
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 | |
6 | Ext.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 |