]>
Commit | Line | Data |
---|---|---|
6527f429 DM |
1 | /**\r |
2 | * This example shows how to use segmented buttons. Segmented buttons are just containers\r | |
3 | * with regular buttons inside, with some special styling and options added. By default,\r | |
4 | * all the child buttons will be part of a toggleGroup, but this behavior can be customized\r | |
5 | * using the `allowToggle` and `allowMultiple` config options.\r | |
6 | */\r | |
7 | Ext.define('KitchenSink.view.button.SegmentedButtons', {\r | |
8 | extend: 'Ext.Container',\r | |
9 | xtype: 'segmented-buttons',\r | |
10 | //<example>\r | |
11 | profiles: {\r | |
12 | classic: {\r | |
13 | width: 420\r | |
14 | },\r | |
15 | neptune: {\r | |
16 | width: 475\r | |
17 | },\r | |
18 | 'neptune-touch': {\r | |
19 | width: 585\r | |
20 | }\r | |
21 | },\r | |
22 | //</example>\r | |
23 | \r | |
24 | initComponent: function() {\r | |
25 | Ext.apply(this, {\r | |
26 | layout: 'form',\r | |
27 | width: this.profileInfo.width,\r | |
28 | defaultType: 'fieldcontainer',\r | |
29 | items: [{\r | |
30 | fieldLabel: 'Toggle Group',\r | |
31 | items: [{\r | |
32 | xtype: 'segmentedbutton',\r | |
33 | items: [{\r | |
34 | text: 'Option One'\r | |
35 | }, {\r | |
36 | text: 'Option Two',\r | |
37 | pressed: true\r | |
38 | }, {\r | |
39 | text: 'Option Three'\r | |
40 | }]\r | |
41 | }]\r | |
42 | }, {\r | |
43 | fieldLabel: 'Multiple Toggle',\r | |
44 | items: [{\r | |
45 | xtype: 'segmentedbutton',\r | |
46 | allowMultiple: true,\r | |
47 | pressedButtons: [0, 2],\r | |
48 | items: [{\r | |
49 | text: 'Option One'\r | |
50 | }, {\r | |
51 | text: 'Option Two'\r | |
52 | }, {\r | |
53 | text: 'Option Three'\r | |
54 | }]\r | |
55 | }]\r | |
56 | }, {\r | |
57 | fieldLabel: 'No Toggle',\r | |
58 | items: [{\r | |
59 | xtype: 'segmentedbutton',\r | |
60 | allowToggle: false,\r | |
61 | items: [{\r | |
62 | text: 'Option One'\r | |
63 | }, {\r | |
64 | text: 'Option Two'\r | |
65 | }, {\r | |
66 | text: 'Option Three'\r | |
67 | }]\r | |
68 | }]\r | |
69 | }, {\r | |
70 | fieldLabel: 'Icons and Arrows',\r | |
71 | items: [{\r | |
72 | xtype: 'segmentedbutton',\r | |
73 | allowToggle: false,\r | |
74 | items: [{\r | |
75 | iconCls: 'button-home-small',\r | |
76 | text: 'Button'\r | |
77 | }, {\r | |
78 | text: 'Menu Button',\r | |
79 | menu: [\r | |
80 | { text: 'Menu Item 1' },\r | |
81 | { text: 'Menu Item 2' },\r | |
82 | { text: 'Menu Item 3' }\r | |
83 | ]\r | |
84 | }, {\r | |
85 | xtype: 'splitbutton',\r | |
86 | text: 'Split Button',\r | |
87 | menu: [\r | |
88 | { text: 'Menu Item 1' },\r | |
89 | { text: 'Menu Item 2' },\r | |
90 | { text: 'Menu Item 3' }\r | |
91 | ]\r | |
92 | }]\r | |
93 | }]\r | |
94 | }]\r | |
95 | });\r | |
96 | this.callParent();\r | |
97 | }\r | |
98 | });\r |