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