[extjs.git] / extjs / examples / classic / aria / app / view / Toolbar.js

Ext.define('Aria.view.Toolbar', {\r
    extend:'Ext.container.Container',\r
    alias:'widget.mysimpletoolbar',\r
    title:'Toolbar',\r
\r
    requires: [\r
        'Ext.menu.DatePicker',\r
        'Ext.menu.ColorPicker',\r
        'Ext.container.ButtonGroup'\r
    ],\r
    \r
    initComponent: function() {\r
        // functions to display feedback\r
        function onButtonClick(btn){\r
            Aria.app.msg('Button Click','You clicked the "{0}" button.', btn.displayText || btn.text);\r
        }\r
\r
        function onItemClick(item){\r
            Aria.app.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);\r
        }\r
\r
        function onItemCheck(item, checked){\r
            Aria.app.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');\r
        }\r
\r
        function onItemToggle(item, pressed){\r
            Aria.app.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);\r
        }\r
\r
        var dateMenu = Ext.create('Ext.menu.DatePicker', {\r
            handler: function(dp, date){\r
                Aria.app.msg('Date Selected', 'You choose {0}.', Ext.Date.format(date, 'M j, Y'));\r
\r
            }\r
        });\r
\r
        var colorMenu = Ext.create('Ext.menu.ColorPicker', {\r
            handler: function(cm, color){\r
                Aria.app.msg('Color Selected', '<span style="color:#' + color + ';">You choose {0}.</span>', color);\r
            }\r
        });\r
\r
        var store = Ext.create('Ext.data.ArrayStore', {\r
            fields: ['abbr', 'state', 'desc'],\r
            data : [\r
                ['AL', 'Alabama', 'The Heart of Dixie'],\r
                ['AK', 'Alaska', 'The Land of the Midnight Sun'],\r
                ['AZ', 'Arizona', 'The Grand Canyon State'],\r
                ['AR', 'Arkansas', 'The Natural State'],\r
                ['CA', 'California', 'The Golden State'],\r
                ['CO', 'Colorado', 'The Mountain State'],\r
                ['CT', 'Connecticut', 'The Constitution State'],\r
                ['DE', 'Delaware', 'The First State'],\r
                ['DC', 'District of Columbia', "The Nation's Capital"],\r
                ['FL', 'Florida', 'The Sunshine State'],\r
                ['GA', 'Georgia', 'The Peach State'],\r
                ['HI', 'Hawaii', 'The Aloha State'],\r
                ['ID', 'Idaho', 'Famous Potatoes'],\r
                ['IL', 'Illinois', 'The Prairie State'],\r
                ['IN', 'Indiana', 'The Hospitality State'],\r
                ['IA', 'Iowa', 'The Corn State'],\r
                ['KS', 'Kansas', 'The Sunflower State'],\r
                ['KY', 'Kentucky', 'The Bluegrass State'],\r
                ['LA', 'Louisiana', 'The Bayou State'],\r
                ['ME', 'Maine', 'The Pine Tree State'],\r
                ['MD', 'Maryland', 'Chesapeake State'],\r
                ['MA', 'Massachusetts', 'The Spirit of America'],\r
                ['MI', 'Michigan', 'Great Lakes State'],\r
                ['MN', 'Minnesota', 'North Star State'],\r
                ['MS', 'Mississippi', 'Magnolia State'],\r
                ['MO', 'Missouri', 'Show Me State'],\r
                ['MT', 'Montana', 'Big Sky Country'],\r
                ['NE', 'Nebraska', 'Beef State'],\r
                ['NV', 'Nevada', 'Silver State'],\r
                ['NH', 'New Hampshire', 'Granite State'],\r
                ['NJ', 'New Jersey', 'Garden State'],\r
                ['NM', 'New Mexico', 'Land of Enchantment'],\r
                ['NY', 'New York', 'Empire State'],\r
                ['NC', 'North Carolina', 'First in Freedom'],\r
                ['ND', 'North Dakota', 'Peace Garden State'],\r
                ['OH', 'Ohio', 'The Heart of it All'],\r
                ['OK', 'Oklahoma', 'Oklahoma is OK'],\r
                ['OR', 'Oregon', 'Pacific Wonderland'],\r
                ['PA', 'Pennsylvania', 'Keystone State'],\r
                ['RI', 'Rhode Island', 'Ocean State'],\r
                ['SC', 'South Carolina', 'Nothing Could be Finer'],\r
                ['SD', 'South Dakota', 'Great Faces, Great Places'],\r
                ['TN', 'Tennessee', 'Volunteer State'],\r
                ['TX', 'Texas', 'Lone Star State'],\r
                ['UT', 'Utah', 'Salt Lake State'],\r
                ['VT', 'Vermont', 'Green Mountain State'],\r
                ['VA', 'Virginia', 'Mother of States'],\r
                ['WA', 'Washington', 'Green Tree State'],\r
                ['WV', 'West Virginia', 'Mountain State'],\r
                ['WI', 'Wisconsin', "America's Dairyland"],\r
                ['WY', 'Wyoming', 'Like No Place on Earth']\r
            ]\r
        });\r
\r
        var combo = Ext.create('Ext.form.field.ComboBox', {\r
            hideLabel: true,\r
            store: store,\r
            displayField: 'state',\r
            typeAhead: false,\r
            queryMode: 'local',\r
            triggerAction: 'all',\r
            emptyText: 'Select a state...',\r
            editable: false,\r
            width: 135,\r
            iconCls: 'no-icon'\r
        });\r
\r
        var menu = Ext.create('Ext.menu.Menu', {\r
            id: 'mainMenu',\r
//             style: {\r
//                 overflow: 'visible'     // For the Combo popup\r
//             },\r
            items: [\r
//                 combo,                  // A Field in a Menu\r
                {\r
                    text: 'I like Ext',\r
                    checked: true,       // when checked has a boolean value, it is assumed to be a CheckItem\r
                    checkHandler: onItemCheck\r
                }, '-', {\r
                    text: 'Radio Options',\r
                    menu: {        // <-- submenu by nested config object\r
                        items: [\r
                            // stick any markup in a menu\r
                            '<b class="menu-title">Choose a Theme</b>',\r
                            {\r
                                text: 'Aero Glass',\r
                                checked: true,\r
                                group: 'theme',\r
                                checkHandler: onItemCheck\r
                            }, {\r
                                text: 'Vista Black',\r
                                checked: false,\r
                                group: 'theme',\r
                                checkHandler: onItemCheck\r
                            }, {\r
                                text: 'Gray Theme',\r
                                checked: false,\r
                                group: 'theme',\r
                                checkHandler: onItemCheck\r
                            }, {\r
                                text: 'Default Theme',\r
                                checked: false,\r
                                group: 'theme',\r
                                checkHandler: onItemCheck\r
                            }\r
                        ]\r
                    }\r
                },{\r
                    text: 'Choose a Date',\r
                    iconCls: 'calendar',\r
                    menu: dateMenu // <-- submenu by reference\r
                },{\r
                    text: 'Choose a Color',\r
                    menu: colorMenu // <-- submenu by reference\r
                }\r
            ]\r
        });\r
\r
        var tb = Ext.create('Ext.toolbar.Toolbar');\r
        var tb1 = Ext.create('Ext.toolbar.Toolbar');\r
\r
        tb.add({\r
                text:'Button w/ Menu',\r
                iconCls: 'bmenu',  // <-- icon\r
                menu: menu  // assign menu by instance\r
//             }, {\r
//                 text: 'Users',\r
//                 menu: {\r
//                     xtype: 'menu',\r
//                     plain: true,\r
//                     items: {\r
//                         xtype: 'buttongroup',\r
//                         title: 'User options',\r
//                         columns: 2,\r
//                         defaults: {\r
//                             xtype: 'button',\r
//                             scale: 'large',\r
//                             iconAlign: 'left',\r
//                             handler: onButtonClick\r
//                         },\r
//                         items: [{\r
//                             text: 'User<br/>manager',\r
//                             width: 90,\r
//                             displayText: 'User manager'\r
//                         },{\r
//                             tooltip: 'Add user',\r
//                             width: 100,\r
//                             text: 'Add user'\r
//                         },{\r
//                             colspan: 2,\r
//                             text: 'Import',\r
//                             scale: 'small',\r
//                             width: 130\r
//                         },{\r
//                             colspan: 2,\r
//                             text: 'Who is online?',\r
//                             scale: 'small',\r
//                             width: 130\r
//                         }]\r
//                     }\r
//                 }\r
            },\r
            '-', {\r
                text: 'Toggle Me',\r
                enableToggle: true,\r
                toggleHandler: onItemToggle,\r
                pressed: true\r
            });\r
\r
        menu.add(' ');\r
\r
        // Menus have a rich api for\r
        // adding and removing elements dynamically\r
        var item = menu.add({\r
            text: 'Dynamically added Item'\r
        });\r
        // items support full Observable API\r
        item.on('click', onItemClick);\r
\r
        // items can easily be looked up\r
        menu.add({\r
            text: 'Disabled Item',\r
            id: 'disableMe'  // <-- Items can also have an id for easy lookup\r
            // disabled: true   <-- allowed but for sake of example we use long way below\r
        });\r
        // access items by id or index\r
        menu.items.get('disableMe').disable();\r
\r
\r
        var scrollMenu = Ext.create('Ext.menu.Menu');\r
        for (var i = 0; i < 50; ++i){\r
            scrollMenu.add({\r
                text: 'Item ' + (i + 1),\r
                handler: onItemClick\r
            });\r
        }\r
        \r
        tb1.add({\r
            text: 'Link',\r
            url: 'http://www.google.com/search',\r
            baseParams: {\r
                q: 'html+anchor+tag'\r
            },\r
            tooltip: 'This is a link. You can right click. You can see where it will take you'\r
        });\r
\r
        // scrollable menu\r
        tb1.add({\r
            cls: 'x-btn-text-icon',\r
            text: 'Scrolling Menu',\r
            menu: scrollMenu\r
        });\r
\r
        this.items = [\r
            {\r
                xtype: 'panel',\r
                title:'Toolbar Example',\r
                ariaRole: 'region',\r
                \r
                bodyPadding:12,\r
                width:700,\r
                height:250,\r
                header:true,\r
                dockedItems:{\r
                    dock: 'top',\r
                    items: [tb, tb1]\r
                }\r
            }\r
        ];\r
\r
        this.callParent(arguments);\r
    }\r
});
Commit	Line	Data
6527f429 DM	1	Ext.define('Aria.view.Toolbar', {\r
	2	extend:'Ext.container.Container',\r
	3	alias:'widget.mysimpletoolbar',\r
	4	title:'Toolbar',\r
	5	\r
	6	requires: [\r
	7	'Ext.menu.DatePicker',\r
	8	'Ext.menu.ColorPicker',\r
	9	'Ext.container.ButtonGroup'\r
	10	],\r
	11	\r
	12	initComponent: function() {\r
	13	// functions to display feedback\r
	14	function onButtonClick(btn){\r
	15	Aria.app.msg('Button Click','You clicked the "{0}" button.', btn.displayText \|\| btn.text);\r
	16	}\r
	17	\r
	18	function onItemClick(item){\r
	19	Aria.app.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);\r
	20	}\r
	21	\r
	22	function onItemCheck(item, checked){\r
	23	Aria.app.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');\r
	24	}\r
	25	\r
	26	function onItemToggle(item, pressed){\r
	27	Aria.app.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);\r
	28	}\r
	29	\r
	30	var dateMenu = Ext.create('Ext.menu.DatePicker', {\r
	31	handler: function(dp, date){\r
	32	Aria.app.msg('Date Selected', 'You choose {0}.', Ext.Date.format(date, 'M j, Y'));\r
	33	\r
	34	}\r
	35	});\r
	36	\r
	37	var colorMenu = Ext.create('Ext.menu.ColorPicker', {\r
	38	handler: function(cm, color){\r
	39	Aria.app.msg('Color Selected', '<span style="color:#' + color + ';">You choose {0}.</span>', color);\r
	40	}\r
	41	});\r
	42	\r
	43	var store = Ext.create('Ext.data.ArrayStore', {\r
	44	fields: ['abbr', 'state', 'desc'],\r
	45	data : [\r
	46	['AL', 'Alabama', 'The Heart of Dixie'],\r
	47	['AK', 'Alaska', 'The Land of the Midnight Sun'],\r
	48	['AZ', 'Arizona', 'The Grand Canyon State'],\r
	49	['AR', 'Arkansas', 'The Natural State'],\r
	50	['CA', 'California', 'The Golden State'],\r
	51	['CO', 'Colorado', 'The Mountain State'],\r
	52	['CT', 'Connecticut', 'The Constitution State'],\r
	53	['DE', 'Delaware', 'The First State'],\r
	54	['DC', 'District of Columbia', "The Nation's Capital"],\r
	55	['FL', 'Florida', 'The Sunshine State'],\r
	56	['GA', 'Georgia', 'The Peach State'],\r
	57	['HI', 'Hawaii', 'The Aloha State'],\r
	58	['ID', 'Idaho', 'Famous Potatoes'],\r
	59	['IL', 'Illinois', 'The Prairie State'],\r
	60	['IN', 'Indiana', 'The Hospitality State'],\r
	61	['IA', 'Iowa', 'The Corn State'],\r
	62	['KS', 'Kansas', 'The Sunflower State'],\r
	63	['KY', 'Kentucky', 'The Bluegrass State'],\r
	64	['LA', 'Louisiana', 'The Bayou State'],\r
65	['ME', 'Maine', 'The Pine Tree State'],\r
66	['MD', 'Maryland', 'Chesapeake State'],\r
67	['MA', 'Massachusetts', 'The Spirit of America'],\r
68	['MI', 'Michigan', 'Great Lakes State'],\r
69	['MN', 'Minnesota', 'North Star State'],\r
70	['MS', 'Mississippi', 'Magnolia State'],\r
71	['MO', 'Missouri', 'Show Me State'],\r
72	['MT', 'Montana', 'Big Sky Country'],\r
73	['NE', 'Nebraska', 'Beef State'],\r
74	['NV', 'Nevada', 'Silver State'],\r
75	['NH', 'New Hampshire', 'Granite State'],\r
76	['NJ', 'New Jersey', 'Garden State'],\r
77	['NM', 'New Mexico', 'Land of Enchantment'],\r
78	['NY', 'New York', 'Empire State'],\r
79	['NC', 'North Carolina', 'First in Freedom'],\r
80	['ND', 'North Dakota', 'Peace Garden State'],\r
81	['OH', 'Ohio', 'The Heart of it All'],\r
82	['OK', 'Oklahoma', 'Oklahoma is OK'],\r
83	['OR', 'Oregon', 'Pacific Wonderland'],\r
84	['PA', 'Pennsylvania', 'Keystone State'],\r
85	['RI', 'Rhode Island', 'Ocean State'],\r
86	['SC', 'South Carolina', 'Nothing Could be Finer'],\r
87	['SD', 'South Dakota', 'Great Faces, Great Places'],\r
88	['TN', 'Tennessee', 'Volunteer State'],\r
89	['TX', 'Texas', 'Lone Star State'],\r
90	['UT', 'Utah', 'Salt Lake State'],\r
91	['VT', 'Vermont', 'Green Mountain State'],\r
92	['VA', 'Virginia', 'Mother of States'],\r
93	['WA', 'Washington', 'Green Tree State'],\r
94	['WV', 'West Virginia', 'Mountain State'],\r
95	['WI', 'Wisconsin', "America's Dairyland"],\r
96	['WY', 'Wyoming', 'Like No Place on Earth']\r
97	]\r
98	});\r
99	\r
100	var combo = Ext.create('Ext.form.field.ComboBox', {\r
101	hideLabel: true,\r
102	store: store,\r
103	displayField: 'state',\r
104	typeAhead: false,\r
105	queryMode: 'local',\r
106	triggerAction: 'all',\r
107	emptyText: 'Select a state...',\r
108	editable: false,\r
109	width: 135,\r
110	iconCls: 'no-icon'\r
111	});\r
112	\r
113	var menu = Ext.create('Ext.menu.Menu', {\r
114	id: 'mainMenu',\r
115	// style: {\r
116	// overflow: 'visible' // For the Combo popup\r
117	// },\r
118	items: [\r
119	// combo, // A Field in a Menu\r
120	{\r
121	text: 'I like Ext',\r
122	checked: true, // when checked has a boolean value, it is assumed to be a CheckItem\r
123	checkHandler: onItemCheck\r
124	}, '-', {\r
125	text: 'Radio Options',\r
126	menu: { // <-- submenu by nested config object\r
127	items: [\r
128	// stick any markup in a menu\r
129	'<b class="menu-title">Choose a Theme</b>',\r
130	{\r
131	text: 'Aero Glass',\r
132	checked: true,\r
133	group: 'theme',\r
134	checkHandler: onItemCheck\r
135	}, {\r
136	text: 'Vista Black',\r
137	checked: false,\r
138	group: 'theme',\r
139	checkHandler: onItemCheck\r
140	}, {\r
141	text: 'Gray Theme',\r
142	checked: false,\r
143	group: 'theme',\r
144	checkHandler: onItemCheck\r
145	}, {\r
146	text: 'Default Theme',\r
147	checked: false,\r
148	group: 'theme',\r
149	checkHandler: onItemCheck\r
150	}\r
151	]\r
152	}\r
153	},{\r
154	text: 'Choose a Date',\r
155	iconCls: 'calendar',\r
156	menu: dateMenu // <-- submenu by reference\r
157	},{\r
158	text: 'Choose a Color',\r
159	menu: colorMenu // <-- submenu by reference\r
160	}\r
161	]\r
162	});\r
163	\r
164	var tb = Ext.create('Ext.toolbar.Toolbar');\r
165	var tb1 = Ext.create('Ext.toolbar.Toolbar');\r
166	\r
167	tb.add({\r
168	text:'Button w/ Menu',\r
169	iconCls: 'bmenu', // <-- icon\r
170	menu: menu // assign menu by instance\r
171	// }, {\r
172	// text: 'Users',\r
173	// menu: {\r
174	// xtype: 'menu',\r
175	// plain: true,\r
176	// items: {\r
177	// xtype: 'buttongroup',\r
178	// title: 'User options',\r
179	// columns: 2,\r
180	// defaults: {\r
181	// xtype: 'button',\r
182	// scale: 'large',\r
183	// iconAlign: 'left',\r
184	// handler: onButtonClick\r
185	// },\r
186	// items: [{\r
187	// text: 'User<br/>manager',\r
188	// width: 90,\r
189	// displayText: 'User manager'\r
190	// },{\r
191	// tooltip: 'Add user',\r
192	// width: 100,\r
193	// text: 'Add user'\r
194	// },{\r
195	// colspan: 2,\r
196	// text: 'Import',\r
197	// scale: 'small',\r
198	// width: 130\r
199	// },{\r
200	// colspan: 2,\r
201	// text: 'Who is online?',\r
202	// scale: 'small',\r
203	// width: 130\r
204	// }]\r
205	// }\r
206	// }\r
207	},\r
208	'-', {\r
209	text: 'Toggle Me',\r
210	enableToggle: true,\r
211	toggleHandler: onItemToggle,\r
212	pressed: true\r
213	});\r
214	\r
215	menu.add(' ');\r
216	\r
217	// Menus have a rich api for\r
218	// adding and removing elements dynamically\r
219	var item = menu.add({\r
220	text: 'Dynamically added Item'\r
221	});\r
222	// items support full Observable API\r
223	item.on('click', onItemClick);\r
224	\r
225	// items can easily be looked up\r
226	menu.add({\r
227	text: 'Disabled Item',\r
228	id: 'disableMe' // <-- Items can also have an id for easy lookup\r
229	// disabled: true <-- allowed but for sake of example we use long way below\r
230	});\r
231	// access items by id or index\r
232	menu.items.get('disableMe').disable();\r
233	\r
234	\r
235	var scrollMenu = Ext.create('Ext.menu.Menu');\r
236	for (var i = 0; i < 50; ++i){\r
237	scrollMenu.add({\r
238	text: 'Item ' + (i + 1),\r
239	handler: onItemClick\r
240	});\r
241	}\r
242	\r
243	tb1.add({\r
244	text: 'Link',\r
245	url: 'http://www.google.com/search',\r
246	baseParams: {\r
247	q: 'html+anchor+tag'\r
248	},\r
249	tooltip: 'This is a link. You can right click. You can see where it will take you'\r
250	});\r
251	\r
252	// scrollable menu\r
253	tb1.add({\r
254	cls: 'x-btn-text-icon',\r
255	text: 'Scrolling Menu',\r
256	menu: scrollMenu\r
257	});\r
258	\r
259	this.items = [\r
260	{\r
261	xtype: 'panel',\r
262	title:'Toolbar Example',\r
263	ariaRole: 'region',\r
264	\r
265	bodyPadding:12,\r
266	width:700,\r
267	height:250,\r
268	header:true,\r
269	dockedItems:{\r
270	dock: 'top',\r
271	items: [tb, tb1]\r
272	}\r
273	}\r
274	];\r
275	\r
276	this.callParent(arguments);\r
277	}\r
278	});