Ext.menu.Menu Menu function Instance code in EXTJS4

The definition of the menu
Let's define a menu that includes a Drop-down list, and a menu item such as a color selector, a date selector, and so on.

The code is as follows

Copy Code

[Js] Define a drop-down list below var combo = ext.create (' Ext.form.ComboBox ', { Store:new Ext.data.ArrayStore ({ Fields: [' id ', ' name '], Data: [[1, "John"], [2, "Dick"], [3, "Harry"], [4, "Zhao Liu"]] }), Displayfield: ' Name ', Typeahead:true, Mode: ' Local ', TriggerAction: ' All ', Emptytext: ' Please choose ... ', Selectonfocus:true, width:135 }); Here is the definition of the menu var menu = ext.create (' Ext.menu.Menu ', { ID: ' MainMenu ', Style: { Overflow: ' Visible ' }, Items: [ Combo { Text: ' check box ', Checked:true }, '-', { Text: ' Single Select submenu ', Menu: { Items: [ ' <b> Please choose a person's name </b> ', { Text: ' John ', Checked:true, Group: ' Theme ' }, { Text: ' Dick ', Checked:false, Group: ' Theme ', Checkhandler:function () { Ext.MessageBox.alert ("message", "Dick was chosen!") ") } }, { Text: ' Harry ', Checked:false, Group: ' Theme ' }, { Text: ' Zhao Liu ', Checked:false, Group: ' Theme ' } ] } }, { Text: ' Please choose a date ', Menu:Ext.create (' Ext.menu.DatePicker ', { Handler:function (DP, date) { Ext.MessageBox.alert (' message ', ' you chose: ' + date.format (' y-m-d ')); } }) }, { Text: ' Choose a color ', Menu:Ext.create (' Ext.menu.ColorPicker ', { Handler:function (cm, color) { Ext.MessageBox.alert (' message ', ' you chose: ' + Color '); } }) } ] });

2. Attach the menu to the Panel toolbar
We define a panel and then implement the menu bar with the menu just defined.

code is as follows	copy code
[Js] & nbsp;  //The menu is attached to the toolbar     var panel = new Ext.panel ({      & nbsp;  renderto: ' Div1 ',         width:600,          height:250,         collapsible:true,          layout: ' Fit ',         title: ' Demo Toolbar ',         Tbar: [{text: menu, menu:menu}]    };

Here's how it works:

2. Implementation of the right button menu
or using the menu defined in the first step, we now implement the right-click menu in the way of the right key event:

The code is as follows	Copy Code
[Js] Define right-click menu Ext.getdoc (). On (' ContextMenu ', function (e, O) { E.preventdefault (); Menu.showat (E.getxy ()); The second way: E.stopevent (); Menu.showat ([E.getpagex (), E.getpagey ()]); });

Right-click, the effect is as follows:

3. Define right-click menu in ListView
Here we use the 11th listview, we want to implement when the data row right click, pop-up menu effect.

The code is as follows

Copy Code

[Js] var store = new Ext.data.JsonStore ({ Fields: [ {name: ' Intdata ', type: ' int '}, {name: ' StringData ', type: ' String '}, {name: ' Timedata ', type: ' Date '} ], Proxy: { Type: ' Ajax ', URL: ' Listview1json ', Reader: { Type: ' JSON ', Root: ' Rows ' } }, Sortinfo: {field: ' Intdata ', direction: ' DESC '} }); Store.load (); var ListView = ext.create (' Ext.listview ', { Renderto: "Div1", Store:store, Multiselect:true, Emptytext: ' No data ', Reservescrolloffset:true, Hideheaders:false, Columns: [{ Header: "Intdata", Dataindex: ' Intdata ' }, { Header: "StringData", Dataindex: ' StringData ' }, { Header: "Timedata", Dataindex: ' Timedata ', Align: ' right ', Xtype: ' Datecolumn ', Format: ' m-d h:i a ' }], Viewconfig: { Striperows:true, Listeners: { Itemcontextmenu:function (view, REC, node, index, E) { E.stopevent (); Menu.showat (E.getxy ()); return false; } } } });

Right-click in ListView and the effect is as follows: