examples/docs/source/ListMenu.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.3.1
  11  * Copyright(c) 2006-2010 Sencha Inc.
  12  * licensing@sencha.com
  13  * http://www.sencha.com/license
  14  */
  15 Ext.namespace('Ext.ux.menu');
  16
  17 <div id="cls-Ext.ux.menu.ListMenu"></div>/**
  18  * @class Ext.ux.menu.ListMenu
  19  * @extends Ext.menu.Menu
  20  * This is a supporting class for {@link Ext.ux.grid.filter.ListFilter}.
  21  * Although not listed as configuration options for this class, this class
  22  * also accepts all configuration options from {@link Ext.ux.grid.filter.ListFilter}.
  23  */
  24 Ext.ux.menu.ListMenu = Ext.extend(Ext.menu.Menu, {
  25     <div id="cfg-Ext.ux.menu.ListMenu-labelField"></div>/**
  26      * @cfg {String} labelField
  27      * Defaults to 'text'.
  28      */
  29     labelField :  'text',
  30     <div id="cfg-Ext.ux.menu.ListMenu-paramPrefix"></div>/**
  31      * @cfg {String} paramPrefix
  32      * Defaults to 'Loading...'.
  33      */
  34     loadingText : 'Loading...',
  35     <div id="cfg-Ext.ux.menu.ListMenu-loadOnShow"></div>/**
  36      * @cfg {Boolean} loadOnShow
  37      * Defaults to true.
  38      */
  39     loadOnShow : true,
  40     <div id="cfg-Ext.ux.menu.ListMenu-single"></div>/**
  41      * @cfg {Boolean} single
  42      * Specify true to group all items in this list into a single-select
  43      * radio button group. Defaults to false.
  44      */
  45     single : false,
  46
  47     constructor : function (cfg) {
  48         this.selected = [];
  49         this.addEvents(
  50             <div id="event-Ext.ux.menu.ListMenu-checkchange"></div>/**
  51              * @event checkchange
  52              * Fires when there is a change in checked items from this list
  53              * @param {Object} item Ext.menu.CheckItem
  54              * @param {Object} checked The checked value that was set
  55              */
  56             'checkchange'
  57         );
  58
  59         Ext.ux.menu.ListMenu.superclass.constructor.call(this, cfg = cfg || {});
  60
  61         if(!cfg.store && cfg.options){
  62             var options = [];
  63             for(var i=0, len=cfg.options.length; i<len; i++){
  64                 var value = cfg.options[i];
  65                 switch(Ext.type(value)){
  66                     case 'array':  options.push(value); break;
  67                     case 'object': options.push([value.id, value[this.labelField]]); break;
  68                     case 'string': options.push([value, value]); break;
  69                 }
  70             }
  71
  72             this.store = new Ext.data.Store({
  73                 reader: new Ext.data.ArrayReader({id: 0}, ['id', this.labelField]),
  74                 data:   options,
  75                 listeners: {
  76                     'load': this.onLoad,
  77                     scope:  this
  78                 }
  79             });
  80             this.loaded = true;
  81         } else {
  82             this.add({text: this.loadingText, iconCls: 'loading-indicator'});
  83             this.store.on('load', this.onLoad, this);
  84         }
  85     },
  86
  87     destroy : function () {
  88         if (this.store) {
  89             this.store.destroy();
  90         }
  91         Ext.ux.menu.ListMenu.superclass.destroy.call(this);
  92     },
  93
  94     <div id="method-Ext.ux.menu.ListMenu-show"></div>/**
  95      * Lists will initially show a 'loading' item while the data is retrieved from the store.
  96      * In some cases the loaded data will result in a list that goes off the screen to the
  97      * right (as placement calculations were done with the loading item). This adapter will
  98      * allow show to be called with no arguments to show with the previous arguments and
  99      * thus recalculate the width and potentially hang the menu from the left.
 100      */
 101     show : function () {
 102         var lastArgs = null;
 103         return function(){
 104             if(arguments.length === 0){
 105                 Ext.ux.menu.ListMenu.superclass.show.apply(this, lastArgs);
 106             } else {
 107                 lastArgs = arguments;
 108                 if (this.loadOnShow && !this.loaded) {
 109                     this.store.load();
 110                 }
 111                 Ext.ux.menu.ListMenu.superclass.show.apply(this, arguments);
 112             }
 113         };
 114     }(),
 115
 116     /** @private */
 117     onLoad : function (store, records) {
 118         var visible = this.isVisible();
 119         this.hide(false);
 120
 121         this.removeAll(true);
 122
 123         var gid = this.single ? Ext.id() : null;
 124         for(var i=0, len=records.length; i<len; i++){
 125             var item = new Ext.menu.CheckItem({
 126                 text:    records[i].get(this.labelField),
 127                 group:   gid,
 128                 checked: this.selected.indexOf(records[i].id) > -1,
 129                 hideOnClick: false});
 130
 131             item.itemId = records[i].id;
 132             item.on('checkchange', this.checkChange, this);
 133
 134             this.add(item);
 135         }
 136
 137         this.loaded = true;
 138
 139         if (visible) {
 140             this.show();
 141         }
 142         this.fireEvent('load', this, records);
 143     },
 144
 145     <div id="method-Ext.ux.menu.ListMenu-getSelected"></div>/**
 146      * Get the selected items.
 147      * @return {Array} selected
 148      */
 149     getSelected : function () {
 150         return this.selected;
 151     },
 152
 153     /** @private */
 154     setSelected : function (value) {
 155         value = this.selected = [].concat(value);
 156
 157         if (this.loaded) {
 158             this.items.each(function(item){
 159                 item.setChecked(false, true);
 160                 for (var i = 0, len = value.length; i < len; i++) {
 161                     if (item.itemId == value[i]) {
 162                         item.setChecked(true, true);
 163                     }
 164                 }
 165             }, this);
 166         }
 167     },
 168
 169     <div id="method-Ext.ux.menu.ListMenu-checkChange"></div>/**
 170      * Handler for the 'checkchange' event from an check item in this menu
 171      * @param {Object} item Ext.menu.CheckItem
 172      * @param {Object} checked The checked value that was set
 173      */
 174     checkChange : function (item, checked) {
 175         var value = [];
 176         this.items.each(function(item){
 177             if (item.checked) {
 178                 value.push(item.itemId);
 179             }
 180         },this);
 181         this.selected = value;
 182
 183         this.fireEvent('checkchange', item, checked);
 184     }
 185 });</pre>
 186 </body>
 187 </html>