]>
Commit | Line | Data |
---|---|---|
947f0963 TL |
1 | /** |
2 | * This example shows how to create buttons that act as a link and navigate to a url when | |
3 | * clicked. This is achieved using the `href` config. | |
4 | */ | |
5 | Ext.define('KitchenSink.view.button.LinkButtons', { | |
6 | extend: 'Ext.Container', | |
7 | xtype: 'link-buttons', | |
8 | controller: 'buttons', | |
9 | ||
10 | layout: 'vbox', | |
11 | width: '${width}', | |
12 | ||
13 | //<example> | |
14 | otherContent: [{ | |
15 | type: 'Controller', | |
16 | path: 'classic/samples/view/button/ButtonsController.js' | |
17 | }], | |
18 | profiles: { | |
19 | classic: { | |
20 | width: 420 | |
21 | }, | |
22 | neptune: { | |
23 | width: 475 | |
24 | }, | |
25 | triton: { | |
26 | width: 500 | |
27 | }, | |
28 | 'neptune-touch': { | |
29 | width: 585 | |
30 | }, | |
31 | graphite: { | |
32 | width: 680 | |
33 | }, | |
34 | 'classic-material': { | |
35 | width: 680 | |
36 | } | |
37 | }, | |
38 | //</example> | |
39 | ||
40 | items: [{ | |
41 | xtype: 'checkbox', | |
42 | boxLabel: 'Disabled', | |
43 | margin: '0 0 0 10', | |
44 | listeners: { | |
45 | change: 'toggleDisabled' | |
46 | } | |
47 | }, { | |
48 | xtype: 'container', | |
49 | layout: { | |
50 | type: 'table', | |
51 | columns: 4, | |
52 | tdAttrs: { style: 'padding: 5px 10px;' } | |
53 | }, | |
54 | defaults: { | |
55 | href: 'http://www.sencha.com/' | |
56 | }, | |
57 | ||
58 | items: [{ | |
59 | xtype: 'component', | |
60 | html: 'Text Only' | |
61 | }, { | |
62 | xtype: 'button', | |
63 | text: 'Small' | |
64 | }, { | |
65 | xtype: 'button', | |
66 | text: 'Medium', | |
67 | scale: 'medium' | |
68 | }, { | |
69 | xtype: 'button', | |
70 | text: 'Large', | |
71 | scale: 'large' | |
72 | }, { | |
73 | xtype: 'component', | |
74 | html: 'Icon Only' | |
75 | }, { | |
76 | iconCls: 'button-home-small', | |
77 | xtype: 'button' | |
78 | }, { | |
79 | xtype: 'button', | |
80 | iconCls: 'button-home-medium', | |
81 | scale: 'medium' | |
82 | }, { | |
83 | xtype: 'button', | |
84 | iconCls: 'button-home-large', | |
85 | scale: 'large' | |
86 | }, { | |
87 | xtype: 'component', | |
88 | html: 'Icon and Text (left)' | |
89 | }, { | |
90 | xtype: 'button', | |
91 | iconCls: 'button-home-small', | |
92 | text: 'Small' | |
93 | }, { | |
94 | xtype: 'button', | |
95 | iconCls: 'button-home-medium', | |
96 | text: 'Medium', | |
97 | scale: 'medium' | |
98 | }, { | |
99 | xtype: 'button', | |
100 | iconCls: 'button-home-large', | |
101 | text: 'Large', | |
102 | scale: 'large' | |
103 | }, { | |
104 | xtype: 'component', | |
105 | html: 'Icon and Text (top)' | |
106 | }, { | |
107 | xtype: 'button', | |
108 | iconCls: 'button-home-small', | |
109 | text: 'Small', | |
110 | iconAlign: 'top' | |
111 | }, { | |
112 | xtype: 'button', | |
113 | iconCls: 'button-home-medium', | |
114 | text: 'Medium', | |
115 | scale: 'medium', | |
116 | iconAlign: 'top' | |
117 | }, { | |
118 | xtype: 'button', | |
119 | iconCls: 'button-home-large', | |
120 | text: 'Large', | |
121 | scale: 'large', | |
122 | iconAlign: 'top' | |
123 | }, { | |
124 | xtype: 'component', | |
125 | html: 'Icon and Text (right)' | |
126 | }, { | |
127 | xtype: 'button', | |
128 | iconCls: 'button-home-small', | |
129 | text: 'Small', | |
130 | iconAlign: 'right' | |
131 | }, { | |
132 | xtype: 'button', | |
133 | iconCls: 'button-home-medium', | |
134 | text: 'Medium', | |
135 | scale: 'medium', | |
136 | iconAlign: 'right' | |
137 | }, { | |
138 | xtype: 'button', | |
139 | iconCls: 'button-home-large', | |
140 | text: 'Large', | |
141 | scale: 'large', | |
142 | iconAlign: 'right' | |
143 | }, { | |
144 | xtype: 'component', | |
145 | html: 'Icon and Text (bottom)' | |
146 | }, { | |
147 | xtype: 'button', | |
148 | iconCls: 'button-home-small', | |
149 | text: 'Small', | |
150 | iconAlign: 'bottom' | |
151 | }, { | |
152 | xtype: 'button', | |
153 | iconCls: 'button-home-medium', | |
154 | text: 'Medium', | |
155 | scale: 'medium', | |
156 | iconAlign: 'bottom' | |
157 | }, { | |
158 | xtype: 'button', | |
159 | iconCls: 'button-home-large', | |
160 | text: 'Large', | |
161 | scale: 'large', | |
162 | iconAlign: 'bottom' | |
163 | }] | |
164 | }] | |
165 | }); |