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