docs/source/ListMenu.html

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