ExtJS 的工具条及菜单

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          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                          Ext.themeName === 'neptune' ? 130 : 100,
142                         displayText: 'User manager'
143                     },{
144                         iconCls: 'add',
145                         tooltip: 'Add user',
146                          40,
147                         displayText: 'Add user'
148                     },{
149                         colspan: 2,
150                          '100%',
151                         text: 'Import',
152                         scale: 'small',
153                          Ext.themeName === 'neptune' ? 175 : 140
154                     },{
155                         colspan: 2,
156                          '100%',
157                         text: 'Who is online?',
158                         scale: 'small',
159                          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('&#160;');
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         135
273     });
274     tb.add(combo);
275     tb.resumeLayouts(true);
276 });

View Code

下面截取了部分代码（跟上面的代码是重复的，只是提取部分代码）

 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     });

View Code