Upgrade to ExtJS 3.0.3 - Released 10/11/2009
[extjs.git] / examples / toolbar / toolbars.js
1 /*!
2  * Ext JS Library 3.0.3
3  * Copyright(c) 2006-2009 Ext JS, LLC
4  * licensing@extjs.com
5  * http://www.extjs.com/license
6  */
7
8 Ext.onReady(function(){
9    
10     var SamplePanel = Ext.extend(Ext.Panel, {
11         width: 500,
12         height:250,
13         style: 'margin-top:15px',
14         bodyStyle: 'padding:10px',
15         renderTo: 'docbody',
16         html: Ext.example.shortBogusMarkup,
17         autoScroll: true
18     });
19
20     new SamplePanel({
21         title: 'Standard',
22         tbar: [{
23             xtype:'splitbutton',
24             text: 'Menu Button',
25             iconCls: 'add16',
26             menu: [{text: 'Menu Button 1'}]
27         },'-',{
28             xtype:'splitbutton',
29             text: 'Cut',
30             iconCls: 'add16',
31             menu: [{text: 'Cut Menu Item'}]
32         },{
33             text: 'Copy',
34             iconCls: 'add16'
35         },{
36             text: 'Paste',
37             iconCls: 'add16',
38             menu: [{text: 'Paste Menu Item'}]
39         },'-',{
40             text: 'Format',
41             iconCls: 'add16'
42         }]
43     });
44
45     new SamplePanel({
46         title: 'Multi columns',
47         tbar: [{
48             xtype: 'buttongroup',
49             title: 'Clipboard',
50             columns: 2,
51             defaults: {
52                 scale: 'small'
53             },
54             items: [{
55                 xtype:'splitbutton',
56                 text: 'Menu Button',
57                 iconCls: 'add16',
58                 menu: [{text: 'Menu Item 1'}]
59             },{
60                 xtype:'splitbutton',
61                 text: 'Cut',
62                 iconCls: 'add16',
63                 menu: [{text: 'Cut Menu Item'}]
64             },{
65                 text: 'Copy',
66                 iconCls: 'add16'
67             },{
68                 text: 'Paste',
69                 iconCls: 'add16',
70                 menu: [{text: 'Paste Menu Item'}]
71             },{
72                 text: 'Format',
73                 iconCls: 'add16'
74             }]
75         },{
76             xtype: 'buttongroup',
77             title: 'Other Bugus Actions',
78             columns: 2,
79             defaults: {
80                 scale: 'small'
81             },
82             items: [{
83                 xtype:'splitbutton',
84                 text: 'Menu Button',
85                 iconCls: 'add16',
86                 menu: [{text: 'Menu Button 1'}]
87             },{
88                 xtype:'splitbutton',
89                 text: 'Cut',
90                 iconCls: 'add16',
91                 menu: [{text: 'Cut Menu Item'}]
92             },{
93                 text: 'Copy',
94                 iconCls: 'add16'
95             },{
96                 text: 'Paste',
97                 iconCls: 'add16',
98                 menu: [{text: 'Paste Menu Item'}]
99             },{
100                 text: 'Format',
101                 iconCls: 'add16'
102             }]
103         }]
104     });
105
106
107
108     new SamplePanel({
109         title: 'Multi columns (No titles, double stack)',
110         tbar: [{
111             xtype: 'buttongroup',
112             columns: 3,
113             defaults: {
114                 scale: 'small'
115             },
116             items: [{
117                 xtype:'splitbutton',
118                 text: 'Menu Button',
119                 iconCls: 'add16',
120                 menu: [{text: 'Menu Item 1'}]
121             },{
122                 xtype:'splitbutton',
123                 text: 'Cut',
124                 iconCls: 'add16',
125                 menu: [{text: 'Cut Menu Item'}]
126             },{
127                 text: 'Copy',
128                 iconCls: 'add16'
129             },{
130                 text: 'Paste',
131                 iconCls: 'add16',
132                 menu: [{text: 'Paste Menu Item'}]
133             },{
134                 text: 'Format',
135                 iconCls: 'add16'
136             }]
137         },{
138             xtype: 'buttongroup',
139             columns: 3,
140             defaults: {
141                 scale: 'small'
142             },
143             items: [{
144                 xtype:'splitbutton',
145                 text: 'Menu Button',
146                 iconCls: 'add16',
147                 menu: [{text: 'Menu Item 1'}]
148             },{
149                 xtype:'splitbutton',
150                 text: 'Cut',
151                 iconCls: 'add16',
152                 menu: [{text: 'Cut Menu Item'}]
153             },{
154                 text: 'Copy',
155                 iconCls: 'add16'
156             },{
157                 text: 'Paste',
158                 iconCls: 'add16',
159                 menu: [{text: 'Paste Menu Item'}]
160             },{
161                 text: 'Format',
162                 iconCls: 'add16'
163             }]
164         }]
165     });
166
167     new SamplePanel({
168         title: 'Mix and match icon sizes to create a huge unusable toolbar',
169         tbar: [{
170             xtype: 'buttongroup',
171             columns: 3,
172             title: 'Clipboard',
173             items: [{
174                 text: 'Paste',
175                 scale: 'large',
176                 rowspan: 3, iconCls: 'add',
177                 iconAlign: 'top',
178                 cls: 'x-btn-as-arrow'
179             },{
180                 xtype:'splitbutton',
181                 text: 'Menu Button',
182                 scale: 'large',
183                 rowspan: 3,
184                 iconCls: 'add',
185                 iconAlign: 'top',
186                 arrowAlign:'bottom',
187                 menu: [{text: 'Menu Item 1'}]
188             },{
189                 xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
190             },{
191                 text: 'Copy', iconCls: 'add16'
192             },{
193                 text: 'Format', iconCls: 'add16'
194             }]
195         },{
196             xtype: 'buttongroup',
197             columns: 3,
198             title: 'Other Actions',
199             items: [{
200                 text: 'Paste',
201                 scale: 'large',
202                 rowspan: 3, iconCls: 'add',
203                 iconAlign: 'top',
204                 cls: 'x-btn-as-arrow'
205             },{
206                 xtype:'splitbutton',
207                 text: 'Menu Button',
208                 scale: 'large',
209                 rowspan: 3,
210                 iconCls: 'add',
211                 iconAlign: 'top',
212                 arrowAlign:'bottom',
213                 menu: [{text: 'Menu Button 1'}]
214             },{
215                 xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
216             },{
217                 text: 'Copy', iconCls: 'add16'
218             },{
219                 text: 'Format', iconCls: 'add16'
220             }]
221         }]
222     });
223
224     new SamplePanel({
225         title: 'Medium icons, arrows to the bottom',
226         tbar: [{
227             xtype: 'buttongroup',
228             title: 'Clipboard',
229             defaults: {
230                 scale: 'medium',
231                 iconAlign:'top'
232             },
233             items: [{
234                 xtype:'splitbutton',
235                 text: 'Menu Button',
236                 iconCls: 'add24',
237                 arrowAlign:'bottom',
238                 menu: [{text: 'Menu Item 1'}]
239             },{
240                 xtype:'splitbutton',
241                 text: 'Cut',
242                 iconCls: 'add24',
243                 arrowAlign:'bottom',
244                 menu: [{text: 'Cut Menu Item'}]
245             },{
246                 text: 'Copy',
247                 iconCls: 'add24',
248                 cls: 'x-btn-as-arrow'
249             },{
250                 text: 'Paste',
251                 iconCls: 'add24',
252                 arrowAlign:'bottom',
253                 menu: [{text: 'Paste Menu Item'}]
254             },{
255                 text: 'Format<br/>Stuff',
256                 iconCls: 'add24'
257             }]
258         },{
259             xtype: 'buttongroup',
260             title: 'Other Bogus Actions',
261             defaults: {
262                 scale: 'medium',
263                 iconAlign:'top'
264             },
265             items: [{
266                 xtype:'splitbutton',
267                 text: 'Menu Button',
268                 iconCls: 'add24',
269                 arrowAlign:'bottom',
270                 menu: [{text: 'Menu Item 1'}]
271             },{
272                 xtype:'splitbutton',
273                 text: 'Cut',
274                 iconCls: 'add24',
275                 arrowAlign:'bottom',
276                 menu: [{text: 'Cut Menu Item'}]
277             },{
278                 text: 'Copy',
279                 iconCls: 'add24',
280                 cls: 'x-btn-as-arrow'
281             },{
282                 text: 'Paste',
283                 iconCls: 'add24',
284                 arrowAlign:'bottom',
285                 menu: [{text: 'Paste Menu Item'}]
286             },{
287                 text: 'Format',
288                 iconCls: 'add24',
289                 cls: 'x-btn-as-arrow'
290             }]
291         }]
292     });
293
294
295     new SamplePanel({
296         title: 'Medium icons, text and arrows to the left',
297         tbar: [{
298             xtype:'buttongroup',
299             items: [{
300                 text: 'Cut',
301                 iconCls: 'add24',
302                 scale: 'medium'
303             },{
304                 text: 'Copy',
305                 iconCls: 'add24',
306                 scale: 'medium'
307             },{
308                 text: 'Paste',
309                 iconCls: 'add24',
310                 scale: 'medium',
311                 menu: [{text: 'Paste Menu Item'}]
312             }]
313         }, {
314             xtype:'buttongroup',
315             items: [{
316                 text: 'Format',
317                 iconCls: 'add24',
318                 scale: 'medium'
319             }]
320         }]
321     });
322
323     new SamplePanel({
324         title: 'Small icons, text and arrows to the left',
325         tbar: [{
326             xtype:'buttongroup',
327             items: [{
328                 text: 'Cut',
329                 iconCls: 'add16',
330                 scale: 'small'
331             },{
332                 text: 'Copy',
333                 iconCls: 'add16',
334                 scale: 'small'
335             },{
336                 text: 'Paste',
337                 iconCls: 'add16',
338                 scale: 'small',
339                 menu: [{text: 'Paste Menu Item'}]
340             }]
341         }, {
342             xtype:'buttongroup',
343             items: [{
344                 text: 'Format',
345                 iconCls: 'add16',
346                 scale: 'small'
347             }]
348         }]
349     });
350
351 });