+++ /dev/null
-<html>\r
-<head>\r
- <title>The source code</title>\r
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body onload="prettyPrint();">\r
- <pre class="prettyprint lang-js">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
- },
- 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);
- }
-
-});</pre> \r
-</body>\r
-</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff