]>
Commit | Line | Data |
---|---|---|
6527f429 DM |
1 | /**\r |
2 | * This example shows how to create split buttons with the dropdown arrow on the bottom.\r | |
3 | * The position of the arrow can be controlled using the `arrowAlign` config.\r | |
4 | */\r | |
5 | Ext.define('KitchenSink.view.button.SplitBottomButtons', {\r | |
6 | extend: 'Ext.Container',\r | |
7 | xtype: 'split-bottom-buttons',\r | |
8 | layout: 'vbox',\r | |
9 | //<example>\r | |
10 | profiles: {\r | |
11 | classic: {\r | |
12 | width: 420\r | |
13 | },\r | |
14 | neptune: {\r | |
15 | width: 475\r | |
16 | },\r | |
17 | triton: {\r | |
18 | width: 500\r | |
19 | },\r | |
20 | 'neptune-touch': {\r | |
21 | width: 585\r | |
22 | }\r | |
23 | },\r | |
24 | //</example>\r | |
25 | \r | |
26 | initComponent: function() {\r | |
27 | Ext.apply(this, {\r | |
28 | width: this.profileInfo.width,\r | |
29 | items: [{\r | |
30 | xtype: 'checkbox',\r | |
31 | boxLabel: 'disabled',\r | |
32 | margin: '0 0 0 10',\r | |
33 | listeners: {\r | |
34 | change: this.toggleDisabled,\r | |
35 | scope: this\r | |
36 | }\r | |
37 | }, {\r | |
38 | xtype: 'container',\r | |
39 | layout: {\r | |
40 | type: 'table',\r | |
41 | columns: 4,\r | |
42 | tdAttrs: { style: 'padding: 5px 10px;' }\r | |
43 | },\r | |
44 | defaults: {\r | |
45 | arrowAlign: 'bottom',\r | |
46 | menu: [{\r | |
47 | text:'Menu Item 1'\r | |
48 | },{\r | |
49 | text:'Menu Item 2'\r | |
50 | },{\r | |
51 | text:'Menu Item 3'\r | |
52 | }]\r | |
53 | },\r | |
54 | \r | |
55 | items: [{\r | |
56 | xtype: 'component',\r | |
57 | html: 'Text Only'\r | |
58 | }, {\r | |
59 | xtype: 'splitbutton',\r | |
60 | text: 'Small'\r | |
61 | }, {\r | |
62 | xtype: 'splitbutton',\r | |
63 | text: 'Medium',\r | |
64 | scale: 'medium'\r | |
65 | }, {\r | |
66 | xtype: 'splitbutton',\r | |
67 | text: 'Large',\r | |
68 | scale: 'large'\r | |
69 | }, {\r | |
70 | xtype: 'component',\r | |
71 | html: 'Icon Only'\r | |
72 | }, {\r | |
73 | iconCls: 'button-home-small',\r | |
74 | xtype: 'splitbutton'\r | |
75 | }, {\r | |
76 | xtype: 'splitbutton',\r | |
77 | iconCls: 'button-home-medium',\r | |
78 | scale: 'medium'\r | |
79 | }, {\r | |
80 | xtype: 'splitbutton',\r | |
81 | iconCls: 'button-home-large',\r | |
82 | scale: 'large'\r | |
83 | }, {\r | |
84 | xtype: 'component',\r | |
85 | html: 'Icon and Text (left)'\r | |
86 | }, {\r | |
87 | xtype: 'splitbutton',\r | |
88 | iconCls: 'button-home-small',\r | |
89 | text: 'Small'\r | |
90 | }, {\r | |
91 | xtype: 'splitbutton',\r | |
92 | iconCls: 'button-home-medium',\r | |
93 | text: 'Medium',\r | |
94 | scale: 'medium'\r | |
95 | }, {\r | |
96 | xtype: 'splitbutton',\r | |
97 | iconCls: 'button-home-large',\r | |
98 | text: 'Large',\r | |
99 | scale: 'large'\r | |
100 | }, {\r | |
101 | xtype: 'component',\r | |
102 | html: 'Icon and Text (top)'\r | |
103 | }, {\r | |
104 | xtype: 'splitbutton',\r | |
105 | iconCls: 'button-home-small',\r | |
106 | text: 'Small',\r | |
107 | iconAlign: 'top'\r | |
108 | }, {\r | |
109 | xtype: 'splitbutton',\r | |
110 | iconCls: 'button-home-medium',\r | |
111 | text: 'Medium',\r | |
112 | scale: 'medium',\r | |
113 | iconAlign: 'top'\r | |
114 | }, {\r | |
115 | xtype: 'splitbutton',\r | |
116 | iconCls: 'button-home-large',\r | |
117 | text: 'Large',\r | |
118 | scale: 'large',\r | |
119 | iconAlign: 'top'\r | |
120 | }, {\r | |
121 | xtype: 'component',\r | |
122 | html: 'Icon and Text (right)'\r | |
123 | }, {\r | |
124 | xtype: 'splitbutton',\r | |
125 | iconCls: 'button-home-small',\r | |
126 | text: 'Small',\r | |
127 | iconAlign: 'right'\r | |
128 | }, {\r | |
129 | xtype: 'splitbutton',\r | |
130 | iconCls: 'button-home-medium',\r | |
131 | text: 'Medium',\r | |
132 | scale: 'medium',\r | |
133 | iconAlign: 'right'\r | |
134 | }, {\r | |
135 | xtype: 'splitbutton',\r | |
136 | iconCls: 'button-home-large',\r | |
137 | text: 'Large',\r | |
138 | scale: 'large',\r | |
139 | iconAlign: 'right'\r | |
140 | }, {\r | |
141 | xtype: 'component',\r | |
142 | html: 'Icon and Text (bottom)'\r | |
143 | }, {\r | |
144 | xtype: 'splitbutton',\r | |
145 | iconCls: 'button-home-small',\r | |
146 | text: 'Small',\r | |
147 | iconAlign: 'bottom'\r | |
148 | }, {\r | |
149 | xtype: 'splitbutton',\r | |
150 | iconCls: 'button-home-medium',\r | |
151 | text: 'Medium',\r | |
152 | scale: 'medium',\r | |
153 | iconAlign: 'bottom'\r | |
154 | }, {\r | |
155 | xtype: 'splitbutton',\r | |
156 | iconCls: 'button-home-large',\r | |
157 | text: 'Large',\r | |
158 | scale: 'large',\r | |
159 | iconAlign: 'bottom'\r | |
160 | }]\r | |
161 | }]\r | |
162 | });\r | |
163 | this.callParent();\r | |
164 | },\r | |
165 | \r | |
166 | toggleDisabled: function(checkbox, newValue, oldValue) {\r | |
167 | var toggleFn = newValue ? 'disable' : 'enable';\r | |
168 | \r | |
169 | Ext.each(this.query('button'), function(item) {\r | |
170 | item[toggleFn]();\r | |
171 | });\r | |
172 | }\r | |
173 | \r | |
174 | });\r |