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