]>
Commit | Line | Data |
---|---|---|
6527f429 DM |
1 | /**\r |
2 | * Aligning segmented buttons vertically is a simple as setting the `vertical` config to `true`.\r | |
3 | */\r | |
4 | Ext.define('KitchenSink.view.button.VerticalSegmentedButtons', {\r | |
5 | extend: 'Ext.Container',\r | |
6 | xtype: 'vertical-segmented-buttons',\r | |
7 | //<example>\r | |
8 | profiles: {\r | |
9 | classic: {\r | |
10 | width: 420\r | |
11 | },\r | |
12 | neptune: {\r | |
13 | width: 475\r | |
14 | },\r | |
15 | 'neptune-touch': {\r | |
16 | width: 585\r | |
17 | }\r | |
18 | },\r | |
19 | //</example>\r | |
20 | \r | |
21 | initComponent: function() {\r | |
22 | Ext.apply(this, {\r | |
23 | layout: 'column',\r | |
24 | width: this.profileInfo.width,\r | |
25 | defaults: {\r | |
26 | xtype: 'fieldcontainer',\r | |
27 | labelAlign: 'top',\r | |
28 | margin: '0 20 0 0'\r | |
29 | },\r | |
30 | items: [{\r | |
31 | fieldLabel: 'Toggle Group',\r | |
32 | items: [{\r | |
33 | xtype: 'segmentedbutton',\r | |
34 | vertical: true,\r | |
35 | items: [{\r | |
36 | text: 'Option One'\r | |
37 | }, {\r | |
38 | text: 'Option Two',\r | |
39 | pressed: true\r | |
40 | }, {\r | |
41 | text: 'Option Three'\r | |
42 | }]\r | |
43 | }]\r | |
44 | }, {\r | |
45 | fieldLabel: 'Multiple Toggle',\r | |
46 | items: [{\r | |
47 | xtype: 'segmentedbutton',\r | |
48 | vertical: true,\r | |
49 | allowMultiple: true,\r | |
50 | pressedButtons: [0, 2],\r | |
51 | items: [{\r | |
52 | text: 'Option One'\r | |
53 | }, {\r | |
54 | text: 'Option Two'\r | |
55 | }, {\r | |
56 | text: 'Option Three'\r | |
57 | }]\r | |
58 | }]\r | |
59 | }, {\r | |
60 | fieldLabel: 'No Toggle',\r | |
61 | items: [{\r | |
62 | xtype: 'segmentedbutton',\r | |
63 | vertical: true,\r | |
64 | allowToggle: false,\r | |
65 | items: [{\r | |
66 | text: 'Option One'\r | |
67 | }, {\r | |
68 | text: 'Option Two'\r | |
69 | }, {\r | |
70 | text: 'Option Three'\r | |
71 | }]\r | |
72 | }]\r | |
73 | }, {\r | |
74 | fieldLabel: 'Icons and Arrows',\r | |
75 | items: [{\r | |
76 | xtype: 'segmentedbutton',\r | |
77 | vertical: true,\r | |
78 | allowToggle: false,\r | |
79 | items: [{\r | |
80 | iconCls: 'button-home-small',\r | |
81 | text: 'Button'\r | |
82 | }, {\r | |
83 | text: 'Menu Button',\r | |
84 | menu: [\r | |
85 | { text: 'Menu Item 1' },\r | |
86 | { text: 'Menu Item 2' },\r | |
87 | { text: 'Menu Item 3' }\r | |
88 | ]\r | |
89 | }, {\r | |
90 | xtype: 'splitbutton',\r | |
91 | text: 'Split Button',\r | |
92 | menu: [\r | |
93 | { text: 'Menu Item 1' },\r | |
94 | { text: 'Menu Item 2' },\r | |
95 | { text: 'Menu Item 3' }\r | |
96 | ]\r | |
97 | }]\r | |
98 | }]\r | |
99 | }]\r | |
100 | });\r | |
101 | this.callParent();\r | |
102 | }\r | |
103 | });\r |