JavaScript DHTML/Ext JS/Menu — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
| |
Текущая версия на 10:21, 26 мая 2010
Содержание
- 1 Add a menu text item to a menu
- 2 Add a submenu
- 3 Add checkbox menu item to a menu
- 4 Add icon to menu item
- 5 Checkbox button
- 6 Create and show menu
- 7 Dropdown menu
- 8 Menu click handler
- 9 Menu hideOnClick = false
- 10 Menu item on click event
- 11 Menu separator
- 12 Put Ext.form.ComboBox to a dropdown menu
- 13 Radio button menu item
- 14 Radio Options menu
- 15 Use menu separator to a menu
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function() {
var genericHandler = function(menuItem) {
Ext.MessageBox.alert("", "Your choice is " + menuItem.text);
}
var colorAndDateHandler = function(menuItem, choice) {
Ext.MessageBox.alert("", "Your choice is " + choice);
}
var a = {
text : "New Department",
hideOnclick : false,
menu : [
{
xtype : "menutextitem",
text : "Choose One",
style : {
"border" : "1px solid #999999",
"background-color" : "#D6E3F2",
"margin" : "0px 0px 1px 0px",
"display" : "block",
"padding" : "3px",
"font-weight" : "bold",
"font-size" : "12px",
"text-align" : "center"
}
},
{
text : "Management",
iconCls : "icon-user_suit_black",
handler : genericHandler
}
]
}
var menu = new Ext.menu.Menu({
id : "myMenu",
items : a,
listeners : {
"beforehide" : function() {
return false;
}
}
});
menu.showAt([100,100]);
});
</script> <body>
</body> </html>
</source>
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function() {
var genericHandler = function(menuItem) {
Ext.MessageBox.alert("", "Your choice is " + menuItem.text);
}
var colorAndDateHandler = function(menuItem, choice) {
Ext.MessageBox.alert("", "Your choice is " + choice);
}
var newDepartment = {
text : "New Department",
menu : [
{
text : "Management",
handler : genericHandler
},
{
text : "Accounting",
handler : genericHandler
},
{
text : "Sales",
handler : genericHandler
}
]
}
var menu = new Ext.menu.Menu({
id : "myMenu",
items : newDepartment,
listeners : {
"beforehide" : function() {
return false;
}
}
});
menu.showAt([100,100]);
});
</script> <body>
</body> </html>
</source>
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function() {
var genericHandler = function(menuItem) {
Ext.MessageBox.alert("", "Your choice is " + menuItem.text);
}
var colorAndDateHandler = function(menuItem, choice) {
Ext.MessageBox.alert("", "Your choice is " + choice);
}
var a = {
text : "New Department",
hideOnclick : false,
menu : [
{
xtype : "menutextitem",
text : "Choose One",
style : {
"border" : "1px solid #999999",
"background-color" : "#D6E3F2",
"margin" : "0px 0px 1px 0px",
"display" : "block",
"padding" : "3px",
"font-weight" : "bold",
"font-size" : "12px",
"text-align" : "center"
}
},
{
text : "Check me",
checked : false,
checkHandler : colorAndDateHandler
}
]
}
var menu = new Ext.menu.Menu({
id : "myMenu",
items : a,
listeners : {
"beforehide" : function() {
return false;
}
}
});
menu.showAt([100,100]);
});
</script> <body>
</body> </html>
</source>
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <style type="text/css"> .icon-accept {
background-image: url(accept.png) !important;
} </style> </head> <script type="text/javascript"> Ext.onReady(function() {
var genericHandler = function(menuItem) {
Ext.MessageBox.alert("", "Your choice is " + menuItem.text);
}
var colorAndDateHandler = function(menuItem, choice) {
Ext.MessageBox.alert("", "Your choice is " + choice);
}
var menu = new Ext.menu.Menu({
id : "myMenu",
items : {
text : "Generic Item",
handler : genericHandler,
iconCls : "icon-accept"
},
listeners : {
"beforehide" : function() {
return false;
}
}
});
menu.showAt([100,100]);
});
</script> <body>
</body> </html>
</source>
Checkbox button
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <script type="text/javascript" src="ext-3.0.0/examples/form/states.js"></script> </head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
Ext.QuickTips.init();
// Menus can be prebuilt and passed by reference
var dateMenu = new Ext.menu.DateMenu({
handler: function(dp, date){
Ext.example.msg("Date Selected", "You chose {0}.", date.format("M j, Y"));
}
});
var colorMenu = new Ext.menu.ColorMenu({
handler: function(cm, color){
Ext.example.msg("Color Selected", "You chose {0}.", color);
}
});
var store = new Ext.data.ArrayStore({
fields: ["abbr", "state"],
data : Ext.exampledata.states // from states.js
});
var combo = new Ext.form.ruboBox({
store: store,
displayField: "state",
typeAhead: true,
mode: "local",
triggerAction: "all",
emptyText: "Select a state...",
selectOnFocus: true,
width: 135,
getListParent: function() {
return this.el.up(".x-menu");
},
iconCls: "no-icon"
});
var menu = new Ext.menu.Menu({
id: "mainMenu",
style: {
overflow: "visible" // For the Combo popup
},
items: [
combo, // A Field in a Menu
{
text: "I like Ext",
checked: true, // when checked has a boolean value, it is assumed to be a CheckItem
checkHandler: onItemCheck
}, "-", {
text: "Radio Options",
menu: { // <-- submenu by nested config object
items: [
// stick any markup in a menu
"Choose a Theme",
{
text: "Aero Glass",
checked: true,
group: "theme",
checkHandler: onItemCheck
}, {
text: "Vista Black",
checked: false,
group: "theme",
checkHandler: onItemCheck
}, {
text: "Gray Theme",
checked: false,
group: "theme",
checkHandler: onItemCheck
}, {
text: "Default Theme",
checked: false,
group: "theme",
checkHandler: onItemCheck
}
]
}
},{
text: "Choose a Date",
iconCls: "calendar",
menu: dateMenu // <-- submenu by reference
},{
text: "Choose a Color",
menu: colorMenu // <-- submenu by reference
}
]
});
var tb = new Ext.Toolbar();
tb.render("toolbar");
tb.add({
text:"Button w/ Menu",
iconCls: "bmenu", // <-- icon
menu: menu // assign menu by instance
},
new Ext.Toolbar.SplitButton({
text: "Split Button",
handler: onButtonClick,
tooltip: {text:"This is a an example QuickTip for a toolbar item", title:"Tip Title"},
iconCls: "blist",
// Menus can be built/referenced by using nested menu config objects
menu : {
items: [{
text: "Bold", handler: onItemClick
}, {
text: "Italic", handler: onItemClick
}, {
text: "Underline", handler: onItemClick
}, "-", {
text: "Pick a Color",
handler: onItemClick,
menu: {
items: [
new Ext.ColorPalette({
listeners: {
select: function(cp, color){
Ext.example.msg("Color Selected", "You chose {0}.", color);
}
}
}), "-",
{
text: "More Colors...",
handler: onItemClick
}
]
}
}, {
text: "Extellent!",
handler: onItemClick
}]
}
}), "-", {
text: "Toggle Me",
enableToggle: true,
toggleHandler: onItemToggle,
pressed: true
});
menu.addSeparator();
// Menus have a rich api for
// adding and removing elements dynamically
var item = menu.add({
text: "Dynamically added Item"
});
// items support full Observable API
item.on("click", onItemClick);
// items can easily be looked up
menu.add({
text: "Disabled Item",
id: "disableMe" // <-- Items can also have an id for easy lookup
// disabled: true <-- allowed but for sake of example we use long way below
});
// access items by id or index
menu.items.get("disableMe").disable();
// They can also be referenced by id in or components
tb.add("-", {
icon: "list-items.gif", // icons can also be specified inline
cls: "x-btn-icon",
tooltip: "Quick Tips
Icon only button with tooltip"
}, "-");
var scrollMenu = new Ext.menu.Menu();
for (var i = 0; i < 50; ++i){
scrollMenu.add({
text: "Item " + (i + 1)
});
}
// scrollable menu
tb.add({
icon: "preview.png",
cls: "x-btn-text-icon",
text: "Scrolling Menu",
menu: scrollMenu
});
// add a combobox to the toolbar
var combo = new Ext.form.ruboBox({
store: store,
displayField: "state",
typeAhead: true,
mode: "local",
triggerAction: "all",
emptyText:"Select a state...",
selectOnFocus:true,
width:135
});
tb.addField(combo);
tb.doLayout();
// functions to display feedback
function onButtonClick(btn){
Ext.example.msg("Button Click","You clicked the "{0}" button.", btn.text);
}
function onItemClick(item){
Ext.example.msg("Menu Click", "You clicked the "{0}" menu item.", item.text);
}
function onItemCheck(item, checked){
Ext.example.msg("Item Check", "You {1} the "{0}" menu item.", item.text, checked ? "checked" : "unchecked");
}
function onItemToggle(item, pressed){
Ext.example.msg("Button Toggled", "Button "{0}" was toggled to {1}.", item.text, pressed);
}
}); </script>
</body>
</html>
</source>
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function() {
var genericHandler = function(menuItem) {
Ext.MessageBox.alert("", "Your choice is " + menuItem.text);
}
var menu = new Ext.menu.Menu({
id : "myMenu",
items : {
text : "Generic Item",
handler : genericHandler
},
listeners : {
"beforehide" : function() {
return false;
}
}
});
menu.showAt([100,100]);
});
</script> <body>
</body> </html>
</source>
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
// The action
var action = new Ext.Action({
text: "Action 1",
handler: function(){
Ext.example.msg("Click","You clicked on "Action 1".");
},
iconCls: "blist"
});
var panel = new Ext.Panel({
title: "Actions",
width:600,
height:300,
bodyStyle: "padding:10px;", // lazy inline style
tbar: [
action, { // <-- Add the action directly to a toolbar
text: "Action Menu",
menu: [action] // <-- Add the action directly to a menu
}
],
items: [
new Ext.Button(action) // <-- Add the action as a button
],
renderTo: Ext.getBody()
});
var tb = panel.getTopToolbar();
// Buttons added to the toolbar of the Panel above
// to test/demo doing group operations with an action
tb.add("->", {
text: "Disable",
handler: function(){
action.setDisabled(!action.isDisabled());
this.setText(action.isDisabled() ? "Enable" : "Disable");
}
}, {
text: "Change Text",
handler: function(){
Ext.Msg.prompt("Enter Text", "Enter new text for Action 1:", function(btn, text){
if(btn == "ok" && text){
action.setText(text);
action.setHandler(function(){
Ext.example.msg("Click","You clicked on ""+text+"".");
});
}
});
}
}, {
text: "Change Icon",
handler: function(){
action.setIconClass(action.getIconClass() == "blist" ? "bmenu" : "blist");
}
});
tb.doLayout();
}); </script>
</script> </body> </html>
</source>
Menu click handler
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function() {
var genericHandler = function(menuItem) {
Ext.MessageBox.alert("", "Your choice is " + menuItem.text);
}
var menu = new Ext.menu.Menu({
id : "myMenu",
items : {
text : "Generic Item",
handler : genericHandler
},
listeners : {
"beforehide" : function() {
return false;
}
}
});
menu.showAt([100,100]);
});
</script> <body>
</body> </html>
</source>
Menu hideOnClick = false
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function() {
var genericHandler = function(menuItem) {
Ext.MessageBox.alert("", "Your choice is " + menuItem.text);
}
var colorAndDateHandler = function(menuItem, choice) {
Ext.MessageBox.alert("", "Your choice is " + choice);
}
var a = {
text : "New Department",
hideOnclick : false,
menu : [
{
xtype : "menutextitem",
text : "Choose One",
style : {
"border" : "1px solid #999999",
"background-color" : "#D6E3F2",
"margin" : "0px 0px 1px 0px",
"display" : "block",
"padding" : "3px",
"font-weight" : "bold",
"font-size" : "12px",
"text-align" : "center"
}
},
{
text : "Management",
iconCls : "icon-user_suit_black",
handler : genericHandler
}
]
}
var menu = new Ext.menu.Menu({
id : "myMenu",
items : a,
listeners : {
"beforehide" : function() {
return false;
}
}
});
menu.showAt([100,100]);
});
</script> <body>
</body> </html>
</source>
Menu item on click event
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <script type="text/javascript" src="ext-3.0.0/examples/form/states.js"></script> </head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
Ext.QuickTips.init();
// Menus can be prebuilt and passed by reference
var dateMenu = new Ext.menu.DateMenu({
handler: function(dp, date){
Ext.example.msg("Date Selected", "You chose {0}.", date.format("M j, Y"));
}
});
var colorMenu = new Ext.menu.ColorMenu({
handler: function(cm, color){
Ext.example.msg("Color Selected", "You chose {0}.", color);
}
});
var store = new Ext.data.ArrayStore({
fields: ["abbr", "state"],
data : Ext.exampledata.states // from states.js
});
var combo = new Ext.form.ruboBox({
store: store,
displayField: "state",
typeAhead: true,
mode: "local",
triggerAction: "all",
emptyText: "Select a state...",
selectOnFocus: true,
width: 135,
getListParent: function() {
return this.el.up(".x-menu");
},
iconCls: "no-icon"
});
var menu = new Ext.menu.Menu({
id: "mainMenu",
style: {
overflow: "visible" // For the Combo popup
},
items: [
combo, // A Field in a Menu
{
text: "I like Ext",
checked: true, // when checked has a boolean value, it is assumed to be a CheckItem
checkHandler: onItemCheck
}, "-", {
text: "Radio Options",
menu: { // <-- submenu by nested config object
items: [
// stick any markup in a menu
"Choose a Theme",
{
text: "Aero Glass",
checked: true,
group: "theme",
checkHandler: onItemCheck
}, {
text: "Vista Black",
checked: false,
group: "theme",
checkHandler: onItemCheck
}, {
text: "Gray Theme",
checked: false,
group: "theme",
checkHandler: onItemCheck
}, {
text: "Default Theme",
checked: false,
group: "theme",
checkHandler: onItemCheck
}
]
}
},{
text: "Choose a Date",
iconCls: "calendar",
menu: dateMenu // <-- submenu by reference
},{
text: "Choose a Color",
menu: colorMenu // <-- submenu by reference
}
]
});
var tb = new Ext.Toolbar();
tb.render("toolbar");
tb.add({
text:"Button w/ Menu",
iconCls: "bmenu", // <-- icon
menu: menu // assign menu by instance
},
new Ext.Toolbar.SplitButton({
text: "Split Button",
handler: onButtonClick,
tooltip: {text:"This is a an example QuickTip for a toolbar item", title:"Tip Title"},
iconCls: "blist",
// Menus can be built/referenced by using nested menu config objects
menu : {
items: [{
text: "Bold", handler: onItemClick
}, {
text: "Italic", handler: onItemClick
}, {
text: "Underline", handler: onItemClick
}, "-", {
text: "Pick a Color",
handler: onItemClick,
menu: {
items: [
new Ext.ColorPalette({
listeners: {
select: function(cp, color){
Ext.example.msg("Color Selected", "You chose {0}.", color);
}
}
}), "-",
{
text: "More Colors...",
handler: onItemClick
}
]
}
}, {
text: "Extellent!",
handler: onItemClick
}]
}
}), "-", {
text: "Toggle Me",
enableToggle: true,
toggleHandler: onItemToggle,
pressed: true
});
menu.addSeparator();
// Menus have a rich api for
// adding and removing elements dynamically
var item = menu.add({
text: "Dynamically added Item"
});
// items support full Observable API
item.on("click", onItemClick);
// items can easily be looked up
menu.add({
text: "Disabled Item",
id: "disableMe" // <-- Items can also have an id for easy lookup
// disabled: true <-- allowed but for sake of example we use long way below
});
// access items by id or index
menu.items.get("disableMe").disable();
// They can also be referenced by id in or components
tb.add("-", {
icon: "list-items.gif", // icons can also be specified inline
cls: "x-btn-icon",
tooltip: "Quick Tips
Icon only button with tooltip"
}, "-");
var scrollMenu = new Ext.menu.Menu();
for (var i = 0; i < 50; ++i){
scrollMenu.add({
text: "Item " + (i + 1)
});
}
// scrollable menu
tb.add({
icon: "preview.png",
cls: "x-btn-text-icon",
text: "Scrolling Menu",
menu: scrollMenu
});
// add a combobox to the toolbar
var combo = new Ext.form.ruboBox({
store: store,
displayField: "state",
typeAhead: true,
mode: "local",
triggerAction: "all",
emptyText:"Select a state...",
selectOnFocus:true,
width:135
});
tb.addField(combo);
tb.doLayout();
// functions to display feedback
function onButtonClick(btn){
Ext.example.msg("Button Click","You clicked the "{0}" button.", btn.text);
}
function onItemClick(item){
Ext.example.msg("Menu Click", "You clicked the "{0}" menu item.", item.text);
}
function onItemCheck(item, checked){
Ext.example.msg("Item Check", "You {1} the "{0}" menu item.", item.text, checked ? "checked" : "unchecked");
}
function onItemToggle(item, pressed){
Ext.example.msg("Button Toggled", "Button "{0}" was toggled to {1}.", item.text, pressed);
}
}); </script>
</body>
</html>
</source>
Menu separator
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <script type="text/javascript" src="ext-3.0.0/examples/form/states.js"></script> </head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
Ext.QuickTips.init();
// Menus can be prebuilt and passed by reference
var dateMenu = new Ext.menu.DateMenu({
handler: function(dp, date){
Ext.example.msg("Date Selected", "You chose {0}.", date.format("M j, Y"));
}
});
var colorMenu = new Ext.menu.ColorMenu({
handler: function(cm, color){
Ext.example.msg("Color Selected", "You chose {0}.", color);
}
});
var store = new Ext.data.ArrayStore({
fields: ["abbr", "state"],
data : Ext.exampledata.states // from states.js
});
var combo = new Ext.form.ruboBox({
store: store,
displayField: "state",
typeAhead: true,
mode: "local",
triggerAction: "all",
emptyText: "Select a state...",
selectOnFocus: true,
width: 135,
getListParent: function() {
return this.el.up(".x-menu");
},
iconCls: "no-icon"
});
var menu = new Ext.menu.Menu({
id: "mainMenu",
style: {
overflow: "visible" // For the Combo popup
},
items: [
combo, // A Field in a Menu
{
text: "I like Ext",
checked: true, // when checked has a boolean value, it is assumed to be a CheckItem
checkHandler: onItemCheck
}, "-", {
text: "Radio Options",
menu: { // <-- submenu by nested config object
items: [
// stick any markup in a menu
"Choose a Theme",
{
text: "Aero Glass",
checked: true,
group: "theme",
checkHandler: onItemCheck
}, {
text: "Vista Black",
checked: false,
group: "theme",
checkHandler: onItemCheck
}, {
text: "Gray Theme",
checked: false,
group: "theme",
checkHandler: onItemCheck
}, {
text: "Default Theme",
checked: false,
group: "theme",
checkHandler: onItemCheck
}
]
}
},{
text: "Choose a Date",
iconCls: "calendar",
menu: dateMenu // <-- submenu by reference
},{
text: "Choose a Color",
menu: colorMenu // <-- submenu by reference
}
]
});
var tb = new Ext.Toolbar();
tb.render("toolbar");
tb.add({
text:"Button w/ Menu",
iconCls: "bmenu", // <-- icon
menu: menu // assign menu by instance
},
new Ext.Toolbar.SplitButton({
text: "Split Button",
handler: onButtonClick,
tooltip: {text:"This is a an example QuickTip for a toolbar item", title:"Tip Title"},
iconCls: "blist",
// Menus can be built/referenced by using nested menu config objects
menu : {
items: [{
text: "Bold", handler: onItemClick
}, {
text: "Italic", handler: onItemClick
}, {
text: "Underline", handler: onItemClick
}, "-", {
text: "Pick a Color",
handler: onItemClick,
menu: {
items: [
new Ext.ColorPalette({
listeners: {
select: function(cp, color){
Ext.example.msg("Color Selected", "You chose {0}.", color);
}
}
}), "-",
{
text: "More Colors...",
handler: onItemClick
}
]
}
}, {
text: "Extellent!",
handler: onItemClick
}]
}
}), "-", {
text: "Toggle Me",
enableToggle: true,
toggleHandler: onItemToggle,
pressed: true
});
menu.addSeparator();
// Menus have a rich api for
// adding and removing elements dynamically
var item = menu.add({
text: "Dynamically added Item"
});
// items support full Observable API
item.on("click", onItemClick);
// items can easily be looked up
menu.add({
text: "Disabled Item",
id: "disableMe" // <-- Items can also have an id for easy lookup
// disabled: true <-- allowed but for sake of example we use long way below
});
// access items by id or index
menu.items.get("disableMe").disable();
// They can also be referenced by id in or components
tb.add("-", {
icon: "list-items.gif", // icons can also be specified inline
cls: "x-btn-icon",
tooltip: "Quick Tips
Icon only button with tooltip"
}, "-");
var scrollMenu = new Ext.menu.Menu();
for (var i = 0; i < 50; ++i){
scrollMenu.add({
text: "Item " + (i + 1)
});
}
// scrollable menu
tb.add({
icon: "preview.png",
cls: "x-btn-text-icon",
text: "Scrolling Menu",
menu: scrollMenu
});
// add a combobox to the toolbar
var combo = new Ext.form.ruboBox({
store: store,
displayField: "state",
typeAhead: true,
mode: "local",
triggerAction: "all",
emptyText:"Select a state...",
selectOnFocus:true,
width:135
});
tb.addField(combo);
tb.doLayout();
// functions to display feedback
function onButtonClick(btn){
Ext.example.msg("Button Click","You clicked the "{0}" button.", btn.text);
}
function onItemClick(item){
Ext.example.msg("Menu Click", "You clicked the "{0}" menu item.", item.text);
}
function onItemCheck(item, checked){
Ext.example.msg("Item Check", "You {1} the "{0}" menu item.", item.text, checked ? "checked" : "unchecked");
}
function onItemToggle(item, pressed){
Ext.example.msg("Button Toggled", "Button "{0}" was toggled to {1}.", item.text, pressed);
}
}); </script>
</body>
</html>
</source>
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <script type="text/javascript" src="ext-3.0.0/examples/form/states.js"></script> </head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
Ext.QuickTips.init();
// Menus can be prebuilt and passed by reference
var dateMenu = new Ext.menu.DateMenu({
handler: function(dp, date){
Ext.example.msg("Date Selected", "You chose {0}.", date.format("M j, Y"));
}
});
var colorMenu = new Ext.menu.ColorMenu({
handler: function(cm, color){
Ext.example.msg("Color Selected", "You chose {0}.", color);
}
});
var store = new Ext.data.ArrayStore({
fields: ["abbr", "state"],
data : Ext.exampledata.states // from states.js
});
var combo = new Ext.form.ruboBox({
store: store,
displayField: "state",
typeAhead: true,
mode: "local",
triggerAction: "all",
emptyText: "Select a state...",
selectOnFocus: true,
width: 135,
getListParent: function() {
return this.el.up(".x-menu");
},
iconCls: "no-icon"
});
var menu = new Ext.menu.Menu({
id: "mainMenu",
style: {
overflow: "visible" // For the Combo popup
},
items: [
combo, // A Field in a Menu
{
text: "I like Ext",
checked: true, // when checked has a boolean value, it is assumed to be a CheckItem
checkHandler: onItemCheck
}, "-", {
text: "Radio Options",
menu: { // <-- submenu by nested config object
items: [
// stick any markup in a menu
"Choose a Theme",
{
text: "Aero Glass",
checked: true,
group: "theme",
checkHandler: onItemCheck
}, {
text: "Vista Black",
checked: false,
group: "theme",
checkHandler: onItemCheck
}, {
text: "Gray Theme",
checked: false,
group: "theme",
checkHandler: onItemCheck
}, {
text: "Default Theme",
checked: false,
group: "theme",
checkHandler: onItemCheck
}
]
}
},{
text: "Choose a Date",
iconCls: "calendar",
menu: dateMenu // <-- submenu by reference
},{
text: "Choose a Color",
menu: colorMenu // <-- submenu by reference
}
]
});
var tb = new Ext.Toolbar();
tb.render("toolbar");
tb.add({
text:"Button w/ Menu",
iconCls: "bmenu", // <-- icon
menu: menu // assign menu by instance
},
new Ext.Toolbar.SplitButton({
text: "Split Button",
handler: onButtonClick,
tooltip: {text:"This is a an example QuickTip for a toolbar item", title:"Tip Title"},
iconCls: "blist",
// Menus can be built/referenced by using nested menu config objects
menu : {
items: [{
text: "Bold", handler: onItemClick
}, {
text: "Italic", handler: onItemClick
}, {
text: "Underline", handler: onItemClick
}, "-", {
text: "Pick a Color",
handler: onItemClick,
menu: {
items: [
new Ext.ColorPalette({
listeners: {
select: function(cp, color){
Ext.example.msg("Color Selected", "You chose {0}.", color);
}
}
}), "-",
{
text: "More Colors...",
handler: onItemClick
}
]
}
}, {
text: "Extellent!",
handler: onItemClick
}]
}
}), "-", {
text: "Toggle Me",
enableToggle: true,
toggleHandler: onItemToggle,
pressed: true
});
menu.addSeparator();
// Menus have a rich api for
// adding and removing elements dynamically
var item = menu.add({
text: "Dynamically added Item"
});
// items support full Observable API
item.on("click", onItemClick);
// items can easily be looked up
menu.add({
text: "Disabled Item",
id: "disableMe" // <-- Items can also have an id for easy lookup
// disabled: true <-- allowed but for sake of example we use long way below
});
// access items by id or index
menu.items.get("disableMe").disable();
// They can also be referenced by id in or components
tb.add("-", {
icon: "list-items.gif", // icons can also be specified inline
cls: "x-btn-icon",
tooltip: "Quick Tips
Icon only button with tooltip"
}, "-");
var scrollMenu = new Ext.menu.Menu();
for (var i = 0; i < 50; ++i){
scrollMenu.add({
text: "Item " + (i + 1)
});
}
// scrollable menu
tb.add({
icon: "preview.png",
cls: "x-btn-text-icon",
text: "Scrolling Menu",
menu: scrollMenu
});
// add a combobox to the toolbar
var combo = new Ext.form.ruboBox({
store: store,
displayField: "state",
typeAhead: true,
mode: "local",
triggerAction: "all",
emptyText:"Select a state...",
selectOnFocus:true,
width:135
});
tb.addField(combo);
tb.doLayout();
// functions to display feedback
function onButtonClick(btn){
Ext.example.msg("Button Click","You clicked the "{0}" button.", btn.text);
}
function onItemClick(item){
Ext.example.msg("Menu Click", "You clicked the "{0}" menu item.", item.text);
}
function onItemCheck(item, checked){
Ext.example.msg("Item Check", "You {1} the "{0}" menu item.", item.text, checked ? "checked" : "unchecked");
}
function onItemToggle(item, pressed){
Ext.example.msg("Button Toggled", "Button "{0}" was toggled to {1}.", item.text, pressed);
}
}); </script>
</body>
</html>
</source>
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <style type="text/css"> .icon-accept {
background-image: url(accept.png) !important;
} </style> </head> <script type="text/javascript"> Ext.onReady(function() {
var genericHandler = function(menuItem) {
Ext.MessageBox.alert("", "Your choice is " + menuItem.text);
}
var colorAndDateHandler = function(menuItem, choice) {
Ext.MessageBox.alert("", "Your choice is " + choice);
}
var colorCheckMenu = {
text : "Check",
id : "colorMenu",
menu : {
defaults : {
checked : false,
group : "colorChkGroup",
checkHandler : genericHandler
},
items : [
{
text : "Fatal",
color : "#ff00ff"
},
{
text : "Critical",
color : "red"
},
{
text : "Nominal",
color : "green"
},
{
text : "Unknown",
color : "yellow"
}
]
}
}
var menu = new Ext.menu.Menu({
id : "myMenu",
items : colorCheckMenu,
listeners : {
"beforehide" : function() {
return false;
}
}
});
menu.showAt([100,100]);
});
</script> <body>
</body> </html>
</source>
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <script type="text/javascript" src="ext-3.0.0/examples/form/states.js"></script> </head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
Ext.QuickTips.init();
// Menus can be prebuilt and passed by reference
var dateMenu = new Ext.menu.DateMenu({
handler: function(dp, date){
Ext.example.msg("Date Selected", "You chose {0}.", date.format("M j, Y"));
}
});
var colorMenu = new Ext.menu.ColorMenu({
handler: function(cm, color){
Ext.example.msg("Color Selected", "You chose {0}.", color);
}
});
var store = new Ext.data.ArrayStore({
fields: ["abbr", "state"],
data : Ext.exampledata.states // from states.js
});
var combo = new Ext.form.ruboBox({
store: store,
displayField: "state",
typeAhead: true,
mode: "local",
triggerAction: "all",
emptyText: "Select a state...",
selectOnFocus: true,
width: 135,
getListParent: function() {
return this.el.up(".x-menu");
},
iconCls: "no-icon"
});
var menu = new Ext.menu.Menu({
id: "mainMenu",
style: {
overflow: "visible" // For the Combo popup
},
items: [
combo, // A Field in a Menu
{
text: "I like Ext",
checked: true, // when checked has a boolean value, it is assumed to be a CheckItem
checkHandler: onItemCheck
}, "-", {
text: "Radio Options",
menu: { // <-- submenu by nested config object
items: [
// stick any markup in a menu
"Choose a Theme",
{
text: "Aero Glass",
checked: true,
group: "theme",
checkHandler: onItemCheck
}, {
text: "Vista Black",
checked: false,
group: "theme",
checkHandler: onItemCheck
}, {
text: "Gray Theme",
checked: false,
group: "theme",
checkHandler: onItemCheck
}, {
text: "Default Theme",
checked: false,
group: "theme",
checkHandler: onItemCheck
}
]
}
},{
text: "Choose a Date",
iconCls: "calendar",
menu: dateMenu // <-- submenu by reference
},{
text: "Choose a Color",
menu: colorMenu // <-- submenu by reference
}
]
});
var tb = new Ext.Toolbar();
tb.render("toolbar");
tb.add({
text:"Button w/ Menu",
iconCls: "bmenu", // <-- icon
menu: menu // assign menu by instance
},
new Ext.Toolbar.SplitButton({
text: "Split Button",
handler: onButtonClick,
tooltip: {text:"This is a an example QuickTip for a toolbar item", title:"Tip Title"},
iconCls: "blist",
// Menus can be built/referenced by using nested menu config objects
menu : {
items: [{
text: "Bold", handler: onItemClick
}, {
text: "Italic", handler: onItemClick
}, {
text: "Underline", handler: onItemClick
}, "-", {
text: "Pick a Color",
handler: onItemClick,
menu: {
items: [
new Ext.ColorPalette({
listeners: {
select: function(cp, color){
Ext.example.msg("Color Selected", "You chose {0}.", color);
}
}
}), "-",
{
text: "More Colors...",
handler: onItemClick
}
]
}
}, {
text: "Extellent!",
handler: onItemClick
}]
}
}), "-", {
text: "Toggle Me",
enableToggle: true,
toggleHandler: onItemToggle,
pressed: true
});
menu.addSeparator();
// Menus have a rich api for
// adding and removing elements dynamically
var item = menu.add({
text: "Dynamically added Item"
});
// items support full Observable API
item.on("click", onItemClick);
// items can easily be looked up
menu.add({
text: "Disabled Item",
id: "disableMe" // <-- Items can also have an id for easy lookup
// disabled: true <-- allowed but for sake of example we use long way below
});
// access items by id or index
menu.items.get("disableMe").disable();
// They can also be referenced by id in or components
tb.add("-", {
icon: "list-items.gif", // icons can also be specified inline
cls: "x-btn-icon",
tooltip: "Quick Tips
Icon only button with tooltip"
}, "-");
var scrollMenu = new Ext.menu.Menu();
for (var i = 0; i < 50; ++i){
scrollMenu.add({
text: "Item " + (i + 1)
});
}
// scrollable menu
tb.add({
icon: "preview.png",
cls: "x-btn-text-icon",
text: "Scrolling Menu",
menu: scrollMenu
});
// add a combobox to the toolbar
var combo = new Ext.form.ruboBox({
store: store,
displayField: "state",
typeAhead: true,
mode: "local",
triggerAction: "all",
emptyText:"Select a state...",
selectOnFocus:true,
width:135
});
tb.addField(combo);
tb.doLayout();
// functions to display feedback
function onButtonClick(btn){
Ext.example.msg("Button Click","You clicked the "{0}" button.", btn.text);
}
function onItemClick(item){
Ext.example.msg("Menu Click", "You clicked the "{0}" menu item.", item.text);
}
function onItemCheck(item, checked){
Ext.example.msg("Item Check", "You {1} the "{0}" menu item.", item.text, checked ? "checked" : "unchecked");
}
function onItemToggle(item, pressed){
Ext.example.msg("Button Toggled", "Button "{0}" was toggled to {1}.", item.text, pressed);
}
}); </script>
</body>
</html>
</source>
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function() {
var genericHandler = function(menuItem) {
Ext.MessageBox.alert("", "Your choice is " + menuItem.text);
}
var colorAndDateHandler = function(menuItem, choice) {
Ext.MessageBox.alert("", "Your choice is " + choice);
}
var a = {
text : "New Department",
menu : [
{
text : "Management",
handler : genericHandler
},
{
text : "Accounting",
handler : genericHandler
},
{
text : "Sales",
handler : genericHandler
}
]
}
var menuItems = [
a,
"-",
a
];
var menu = new Ext.menu.Menu({
id : "myMenu",
items : menuItems,
listeners : {
"beforehide" : function() {
return false;
}
}
});
menu.showAt([100,100]);
});
</script> <body>
</body> </html>
</source>
