-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-Ext.onReady(function(){\r
- Ext.QuickTips.init();\r
-\r
- // Menus can be prebuilt and passed by reference\r
- var dateMenu = new Ext.menu.DateMenu({\r
- handler : function(dp, date){\r
- Ext.example.msg('Date Selected', 'You chose {0}.', date.format('M j, Y'));\r
- }\r
- });\r
-\r
- var colorMenu = new Ext.menu.ColorMenu({\r
- handler : function(cm, color){\r
- Ext.example.msg('Color Selected', 'You chose {0}.', color);\r
- }\r
- });\r
-\r
- var menu = new Ext.menu.Menu({\r
- id: 'mainMenu',\r
- items: [\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
- {\r
- text: 'Ext for jQuery',\r
- checked: true,\r
- checkHandler: onItemCheck\r
- },\r
- {\r
- text: 'I donated!',\r
- checked:false,\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 tb = new Ext.Toolbar();\r
- tb.render('toolbar');\r
-\r
- tb.add({\r
- text:'Button w/ Menu',\r
- iconCls: 'bmenu', // <-- icon\r
- menu: menu // assign menu by instance\r
- }, \r
- new Ext.Toolbar.MenuButton({\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 : {items: [\r
- {text: '<b>Bold</b>', handler: onItemClick},\r
- {text: '<i>Italic</i>', handler: onItemClick},\r
- {text: '<u>Underline</u>', handler: onItemClick}, '-',{\r
- text: 'Pick a Color', handler: onItemClick, menu: {\r
- items: [\r
- new Ext.menu.ColorItem({selectHandler:function(cp, color){\r
- Ext.example.msg('Color Selected', 'You chose {0}.', color);\r
- }}), '-',\r
- {text:'More Colors...', handler:onItemClick}\r
- ]\r
- }},\r
- {text: 'Extellent!', handler: onItemClick}\r
- ]}\r
- }), '-', {\r
- text: 'Toggle Me',\r
- enableToggle: true,\r
- toggleHandler: onItemToggle,\r
- pressed: true\r
- });\r
-\r
- menu.addSeparator();\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'\r
- }, '-');\r
-\r
- // add a combobox to the toolbar\r
- var store = new Ext.data.SimpleStore({\r
- fields: ['abbr', 'state'],\r
- data : Ext.exampledata.states // from states.js\r
- });\r
- var combo = new Ext.form.ComboBox({\r
- store: store,\r
- displayField:'state',\r
- typeAhead: true,\r
- mode: 'local',\r
- triggerAction: 'all',\r
- emptyText:'Select a state...',\r
- selectOnFocus:true,\r
- width:135\r
- });\r
- tb.addField(combo);\r
-\r
- // functions to display feedback\r
- function onButtonClick(btn){\r
- Ext.example.msg('Button Click','You clicked the "{0}" button.', 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 JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/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.ComboBox({
+ 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
+ '<b class="menu-title">Choose a Theme</b>',
+ {
+ 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
+ }, {
+ text: 'Users',
+ iconCls: 'user',
+ menu: {
+ xtype: 'menu',
+ plain: true,
+ items: {
+ xtype: 'buttongroup',
+ title: 'User options',
+ autoWidth: true,
+ columns: 2,
+ defaults: {
+ xtype: 'button',
+ scale: 'large',
+ width: '100%',
+ iconAlign: 'left'
+ },
+ items: [{
+ text: 'User<br/>manager',
+ iconCls: 'edit'
+ },{
+ iconCls: 'add',
+ width: 'auto',
+ tooltip: 'Add user'
+ },{
+ colspan: 2,
+ text: 'Import',
+ scale: 'small'
+ },{
+ colspan: 2,
+ text: 'Who is online?',
+ scale: 'small'
+ }]
+ }
+ }
+ },
+ 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: '<b>Bold</b>', handler: onItemClick
+ }, {
+ text: '<i>Italic</i>', handler: onItemClick
+ }, {
+ text: '<u>Underline</u>', 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: '<b>Quick Tips</b><br/>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.ComboBox({
+ 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);
+ }
+
});
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff