[extjs.git] / extjs / examples / classic / menu / menus.js

Ext.require([\r
    'Ext.tip.QuickTipManager',\r
    'Ext.menu.*',\r
    'Ext.form.field.ComboBox',\r
    'Ext.layout.container.Table',\r
    'Ext.container.ButtonGroup'\r
]);\r
\r
Ext.onReady(function(){\r
    \r
    var theme = Ext.themeName;\r
    \r
    // functions to display feedback\r
    function onButtonClick(btn){\r
        Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.displayText || btn.text);\r
    }\r
\r
    function onItemClick(item){\r
        Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);\r
    }\r
\r
    function onItemCheck(item, checked){\r
        Ext.example.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');\r
    }\r
\r
    function onItemToggle(item, pressed){\r
        Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);\r
    }\r
    \r
    Ext.QuickTips.init();\r
\r
    var dateMenu = Ext.create('Ext.menu.DatePicker', {\r
        handler: function(dp, date){\r
            Ext.example.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
            Ext.example.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'],\r
        data : Ext.example.states\r
    });\r
\r
    var combo = Ext.create('Ext.form.field.ComboBox', {\r
        hideLabel: true,\r
        store: store,\r
        displayField: 'state',\r
        typeAhead: true,\r
        queryMode: 'local',\r
        triggerAction: 'all',\r
        emptyText: 'Select a state...',\r
        selectOnFocus: true,\r
        width: 135,\r
        indent: true\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 width = 750;\r
    if(theme === 'neptune'){\r
        width = 860;\r
    }\r
    else if(theme === 'neptune-touch' || theme === 'crisp'){\r
        width = 1035;\r
    }\r
    \r
    Ext.get('container').setWidth(width);\r
\r
    var tb = Ext.create('Ext.toolbar.Toolbar');\r
    tb.render('toolbar');\r
    tb.suspendLayouts();\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
            iconCls: 'user',\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
                        iconCls: 'edit',\r
                        width: theme === 'neptune' ? 130 : 100,\r
                        displayText: 'User manager'\r
                    },{\r
                        iconCls: 'add',\r
                        tooltip: 'Add user',\r
                        width: 40,\r
                        displayText: 'Add user'\r
                    },{\r
                        colspan: 2,\r
                        width: '100%',\r
                        text: 'Import',\r
                        scale: 'small',\r
                        width: theme === 'neptune' ? 175 : 140\r
                    },{\r
                        colspan: 2,\r
                        width: '100%',\r
                        text: 'Who is online?',\r
                        scale: 'small',\r
                        width: theme === 'neptune' ? 175 : 140\r
                    }]\r
                }\r
            }\r
        },\r
        Ext.create('Ext.button.Split', {\r
            text: 'Split Button',\r
            handler: onButtonClick,\r
            tooltip: {text:'This is a an example QuickTip for a toolbar item', title:'Tip Title'},\r
            iconCls: 'blist',\r
            // Menus can be built/referenced by using nested menu config objects\r
            menu : {\r
                items: [{\r
                    text: '<b>Bold</b>', handler: onItemClick\r
                }, {\r
                    text: '<i>Italic</i>', handler: onItemClick\r
                }, {\r
                    text: '<u>Underline</u>', handler: onItemClick\r
                }, '-', {\r
                    text: 'Pick a Color',\r
                    handler: onItemClick,\r
                    menu: {\r
                        showSeparator: false,\r
                        items: [\r
                            Ext.create('Ext.ColorPalette', {\r
                                listeners: {\r
                                    select: function(cp, color){\r
                                        Ext.example.msg('Color Selected', 'You chose {0}.', color);\r
                                    }\r
                                }\r
                            }), '-',\r
                            {\r
                                text: 'More Colors...',\r
                                handler: onItemClick\r
                            }\r
                        ]\r
                    }\r
                }, {\r
                    text: 'Extellent!',\r
                    handler: onItemClick\r
                }]\r
            }\r
        }), '-', {\r
        text: 'Toggle Me',\r
        enableToggle: true,\r
        toggleHandler: onItemToggle,\r
        pressed: true\r
    });\r
\r
    menu.add('&#160;');\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
    // They can also be referenced by id in or components\r
    tb.add('-', {\r
        icon: 'list-items.gif', // icons can also be specified inline\r
        cls: 'x-btn-icon',\r
        tooltip: '<b>Quick Tips</b><br/>Icon only button with tooltip<br><b>Activated on mousedown</b>',\r
        clickEvent: 'mousedown',\r
        handler: function(){\r
            Ext.example.msg('Button Click','You clicked the "icon only" button.');\r
        }\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
    // scrollable menu\r
    tb.add({\r
        icon: 'preview.png',\r
        cls: 'x-btn-text-icon',\r
        text: 'Scrolling Menu',\r
        menu: scrollMenu\r
    });\r
\r
    tb.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
    // add a combobox to the toolbar\r
    combo = Ext.create('Ext.form.field.ComboBox', {\r
        hideLabel: true,\r
        store: store,\r
        displayField: 'state',\r
        typeAhead: true,\r
        queryMode: 'local',\r
        triggerAction: 'all',\r
        emptyText:'Select a state...',\r
        selectOnFocus:true,\r
        width:135\r
    });\r
    tb.add(combo);\r
    tb.resumeLayouts(true);\r
});\r
Commit	Line	Data
6527f429 DM	1	Ext.require([\r
	2	'Ext.tip.QuickTipManager',\r
	3	'Ext.menu.*',\r
	4	'Ext.form.field.ComboBox',\r
	5	'Ext.layout.container.Table',\r
	6	'Ext.container.ButtonGroup'\r
	7	]);\r
	8	\r
	9	Ext.onReady(function(){\r
	10	\r
	11	var theme = Ext.themeName;\r
	12	\r
	13	// functions to display feedback\r
	14	function onButtonClick(btn){\r
	15	Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.displayText \|\| btn.text);\r
	16	}\r
	17	\r
	18	function onItemClick(item){\r
	19	Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);\r
	20	}\r
	21	\r
	22	function onItemCheck(item, checked){\r
	23	Ext.example.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	Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);\r
	28	}\r
	29	\r
	30	Ext.QuickTips.init();\r
	31	\r
	32	var dateMenu = Ext.create('Ext.menu.DatePicker', {\r
	33	handler: function(dp, date){\r
	34	Ext.example.msg('Date Selected', 'You choose {0}.', Ext.Date.format(date, 'M j, Y'));\r
	35	\r
	36	}\r
	37	});\r
	38	\r
	39	var colorMenu = Ext.create('Ext.menu.ColorPicker', {\r
	40	handler: function(cm, color){\r
	41	Ext.example.msg('Color Selected', '<span style="color:#' + color + ';">You choose {0}.</span>', color);\r
	42	}\r
	43	});\r
	44	\r
	45	var store = Ext.create('Ext.data.ArrayStore', {\r
	46	fields: ['abbr', 'state'],\r
	47	data : Ext.example.states\r
	48	});\r
	49	\r
	50	var combo = Ext.create('Ext.form.field.ComboBox', {\r
	51	hideLabel: true,\r
	52	store: store,\r
	53	displayField: 'state',\r
	54	typeAhead: true,\r
	55	queryMode: 'local',\r
	56	triggerAction: 'all',\r
	57	emptyText: 'Select a state...',\r
	58	selectOnFocus: true,\r
	59	width: 135,\r
	60	indent: true\r
	61	});\r
	62	\r
	63	var menu = Ext.create('Ext.menu.Menu', {\r
	64	id: 'mainMenu',\r
65	style: {\r
66	overflow: 'visible' // For the Combo popup\r
67	},\r
68	items: [\r
69	combo, // A Field in a Menu\r
70	{\r
71	text: 'I like Ext',\r
72	checked: true, // when checked has a boolean value, it is assumed to be a CheckItem\r
73	checkHandler: onItemCheck\r
74	}, '-', {\r
75	text: 'Radio Options',\r
76	menu: { // <-- submenu by nested config object\r
77	items: [\r
78	// stick any markup in a menu\r
79	'<b class="menu-title">Choose a Theme</b>',\r
80	{\r
81	text: 'Aero Glass',\r
82	checked: true,\r
83	group: 'theme',\r
84	checkHandler: onItemCheck\r
85	}, {\r
86	text: 'Vista Black',\r
87	checked: false,\r
88	group: 'theme',\r
89	checkHandler: onItemCheck\r
90	}, {\r
91	text: 'Gray Theme',\r
92	checked: false,\r
93	group: 'theme',\r
94	checkHandler: onItemCheck\r
95	}, {\r
96	text: 'Default Theme',\r
97	checked: false,\r
98	group: 'theme',\r
99	checkHandler: onItemCheck\r
100	}\r
101	]\r
102	}\r
103	},{\r
104	text: 'Choose a Date',\r
105	iconCls: 'calendar',\r
106	menu: dateMenu // <-- submenu by reference\r
107	},{\r
108	text: 'Choose a Color',\r
109	menu: colorMenu // <-- submenu by reference\r
110	}\r
111	]\r
112	});\r
113	\r
114	var width = 750;\r
115	if(theme === 'neptune'){\r
116	width = 860;\r
117	}\r
118	else if(theme === 'neptune-touch' \|\| theme === 'crisp'){\r
119	width = 1035;\r
120	}\r
121	\r
122	Ext.get('container').setWidth(width);\r
123	\r
124	var tb = Ext.create('Ext.toolbar.Toolbar');\r
125	tb.render('toolbar');\r
126	tb.suspendLayouts();\r
127	\r
128	tb.add({\r
129	text:'Button w/ Menu',\r
130	iconCls: 'bmenu', // <-- icon\r
131	menu: menu // assign menu by instance\r
132	}, {\r
133	text: 'Users',\r
134	iconCls: 'user',\r
135	menu: {\r
136	xtype: 'menu',\r
137	plain: true,\r
138	items: {\r
139	xtype: 'buttongroup',\r
140	title: 'User options',\r
141	columns: 2,\r
142	defaults: {\r
143	xtype: 'button',\r
144	scale: 'large',\r
145	iconAlign: 'left',\r
146	handler: onButtonClick\r
147	},\r
148	items: [{\r
149	text: 'User<br/>manager',\r
150	iconCls: 'edit',\r
151	width: theme === 'neptune' ? 130 : 100,\r
152	displayText: 'User manager'\r
153	},{\r
154	iconCls: 'add',\r
155	tooltip: 'Add user',\r
156	width: 40,\r
157	displayText: 'Add user'\r
158	},{\r
159	colspan: 2,\r
160	width: '100%',\r
161	text: 'Import',\r
162	scale: 'small',\r
163	width: theme === 'neptune' ? 175 : 140\r
164	},{\r
165	colspan: 2,\r
166	width: '100%',\r
167	text: 'Who is online?',\r
168	scale: 'small',\r
169	width: theme === 'neptune' ? 175 : 140\r
170	}]\r
171	}\r
172	}\r
173	},\r
174	Ext.create('Ext.button.Split', {\r
175	text: 'Split Button',\r
176	handler: onButtonClick,\r
177	tooltip: {text:'This is a an example QuickTip for a toolbar item', title:'Tip Title'},\r
178	iconCls: 'blist',\r
179	// Menus can be built/referenced by using nested menu config objects\r
180	menu : {\r
181	items: [{\r
182	text: '<b>Bold</b>', handler: onItemClick\r
183	}, {\r
184	text: '<i>Italic</i>', handler: onItemClick\r
185	}, {\r
186	text: '<u>Underline</u>', handler: onItemClick\r
187	}, '-', {\r
188	text: 'Pick a Color',\r
189	handler: onItemClick,\r
190	menu: {\r
191	showSeparator: false,\r
192	items: [\r
193	Ext.create('Ext.ColorPalette', {\r
194	listeners: {\r
195	select: function(cp, color){\r
196	Ext.example.msg('Color Selected', 'You chose {0}.', color);\r
197	}\r
198	}\r
199	}), '-',\r
200	{\r
201	text: 'More Colors...',\r
202	handler: onItemClick\r
203	}\r
204	]\r
205	}\r
206	}, {\r
207	text: 'Extellent!',\r
208	handler: onItemClick\r
209	}]\r
210	}\r
211	}), '-', {\r
212	text: 'Toggle Me',\r
213	enableToggle: true,\r
214	toggleHandler: onItemToggle,\r
215	pressed: true\r
216	});\r
217	\r
218	menu.add(' ');\r
219	\r
220	// Menus have a rich api for\r
221	// adding and removing elements dynamically\r
222	var item = menu.add({\r
223	text: 'Dynamically added Item'\r
224	});\r
225	// items support full Observable API\r
226	item.on('click', onItemClick);\r
227	\r
228	// items can easily be looked up\r
229	menu.add({\r
230	text: 'Disabled Item',\r
231	id: 'disableMe' // <-- Items can also have an id for easy lookup\r
232	// disabled: true <-- allowed but for sake of example we use long way below\r
233	});\r
234	// access items by id or index\r
235	menu.items.get('disableMe').disable();\r
236	\r
237	// They can also be referenced by id in or components\r
238	tb.add('-', {\r
239	icon: 'list-items.gif', // icons can also be specified inline\r
240	cls: 'x-btn-icon',\r
241	tooltip: '<b>Quick Tips</b><br/>Icon only button with tooltip<br><b>Activated on mousedown</b>',\r
242	clickEvent: 'mousedown',\r
243	handler: function(){\r
244	Ext.example.msg('Button Click','You clicked the "icon only" button.');\r
245	}\r
246	}, '-');\r
247	\r
248	var scrollMenu = Ext.create('Ext.menu.Menu');\r
249	for (var i = 0; i < 50; ++i){\r
250	scrollMenu.add({\r
251	text: 'Item ' + (i + 1),\r
252	handler: onItemClick\r
253	});\r
254	}\r
255	// scrollable menu\r
256	tb.add({\r
257	icon: 'preview.png',\r
258	cls: 'x-btn-text-icon',\r
259	text: 'Scrolling Menu',\r
260	menu: scrollMenu\r
261	});\r
262	\r
263	tb.add({\r
264	text: 'Link',\r
265	url: 'http://www.google.com/search',\r
266	baseParams: {\r
267	q: 'html+anchor+tag'\r
268	},\r
269	tooltip: 'This is a link. You can right click. You can see where it will take you'\r
270	});\r
271	\r
272	// add a combobox to the toolbar\r
273	combo = Ext.create('Ext.form.field.ComboBox', {\r
274	hideLabel: true,\r
275	store: store,\r
276	displayField: 'state',\r
277	typeAhead: true,\r
278	queryMode: 'local',\r
279	triggerAction: 'all',\r
280	emptyText:'Select a state...',\r
281	selectOnFocus:true,\r
282	width:135\r
283	});\r
284	tb.add(combo);\r
285	tb.resumeLayouts(true);\r
286	});\r