3 * Copyright(c) 2006-2010 Ext JS, LLC
5 * http://www.extjs.com/license
7 Ext.namespace('Ext.ux.menu');
\r
10 * @class Ext.ux.menu.ListMenu
\r
11 * @extends Ext.menu.Menu
\r
12 * This is a supporting class for {@link Ext.ux.grid.filter.ListFilter}.
\r
13 * Although not listed as configuration options for this class, this class
\r
14 * also accepts all configuration options from {@link Ext.ux.grid.filter.ListFilter}.
\r
16 Ext.ux.menu.ListMenu = Ext.extend(Ext.menu.Menu, {
\r
18 * @cfg {String} labelField
\r
19 * Defaults to 'text'.
\r
21 labelField : 'text',
\r
23 * @cfg {String} paramPrefix
\r
24 * Defaults to 'Loading...'.
\r
26 loadingText : 'Loading...',
\r
28 * @cfg {Boolean} loadOnShow
\r
33 * @cfg {Boolean} single
\r
34 * Specify true to group all items in this list into a single-select
\r
35 * radio button group. Defaults to false.
\r
39 constructor : function (cfg) {
\r
43 * @event checkchange
\r
44 * Fires when there is a change in checked items from this list
\r
45 * @param {Object} item Ext.menu.CheckItem
\r
46 * @param {Object} checked The checked value that was set
\r
51 Ext.ux.menu.ListMenu.superclass.constructor.call(this, cfg = cfg || {});
\r
53 if(!cfg.store && cfg.options){
\r
55 for(var i=0, len=cfg.options.length; i<len; i++){
\r
56 var value = cfg.options[i];
\r
57 switch(Ext.type(value)){
\r
58 case 'array': options.push(value); break;
\r
59 case 'object': options.push([value.id, value[this.labelField]]); break;
\r
60 case 'string': options.push([value, value]); break;
\r
64 this.store = new Ext.data.Store({
\r
65 reader: new Ext.data.ArrayReader({id: 0}, ['id', this.labelField]),
\r
68 'load': this.onLoad,
\r
74 this.add({text: this.loadingText, iconCls: 'loading-indicator'});
\r
75 this.store.on('load', this.onLoad, this);
\r
79 destroy : function () {
\r
81 this.store.destroy();
\r
83 Ext.ux.menu.ListMenu.superclass.destroy.call(this);
\r
87 * Lists will initially show a 'loading' item while the data is retrieved from the store.
\r
88 * In some cases the loaded data will result in a list that goes off the screen to the
\r
89 * right (as placement calculations were done with the loading item). This adapter will
\r
90 * allow show to be called with no arguments to show with the previous arguments and
\r
91 * thus recalculate the width and potentially hang the menu from the left.
\r
93 show : function () {
\r
94 var lastArgs = null;
\r
96 if(arguments.length === 0){
\r
97 Ext.ux.menu.ListMenu.superclass.show.apply(this, lastArgs);
\r
99 lastArgs = arguments;
\r
100 if (this.loadOnShow && !this.loaded) {
\r
103 Ext.ux.menu.ListMenu.superclass.show.apply(this, arguments);
\r
109 onLoad : function (store, records) {
\r
110 var visible = this.isVisible();
\r
113 this.removeAll(true);
\r
115 var gid = this.single ? Ext.id() : null;
\r
116 for(var i=0, len=records.length; i<len; i++){
\r
117 var item = new Ext.menu.CheckItem({
\r
118 text: records[i].get(this.labelField),
\r
120 checked: this.selected.indexOf(records[i].id) > -1,
\r
121 hideOnClick: false});
\r
123 item.itemId = records[i].id;
\r
124 item.on('checkchange', this.checkChange, this);
\r
129 this.loaded = true;
\r
134 this.fireEvent('load', this, records);
\r
138 * Get the selected items.
\r
139 * @return {Array} selected
\r
141 getSelected : function () {
\r
142 return this.selected;
\r
146 setSelected : function (value) {
\r
147 value = this.selected = [].concat(value);
\r
150 this.items.each(function(item){
\r
151 item.setChecked(false, true);
\r
152 for (var i = 0, len = value.length; i < len; i++) {
\r
153 if (item.itemId == value[i]) {
\r
154 item.setChecked(true, true);
\r
162 * Handler for the 'checkchange' event from an check item in this menu
\r
163 * @param {Object} item Ext.menu.CheckItem
\r
164 * @param {Object} checked The checked value that was set
\r
166 checkChange : function (item, checked) {
\r
168 this.items.each(function(item){
\r
169 if (item.checked) {
\r
170 value.push(item.itemId);
\r
173 this.selected = value;
\r
175 this.fireEvent('checkchange', item, checked);
\r