/ext-4.1.0_b3/src/menu/CheckItem.js
JavaScript | 169 lines | 76 code | 17 blank | 76 comment | 15 complexity | 4ed28bf098b52fec0f8a9dbc7d88c006 MD5 | raw file
1/**
2 * A menu item that contains a togglable checkbox by default, but that can also be a part of a radio group.
3 *
4 * @example
5 * Ext.create('Ext.menu.Menu', {
6 * width: 100,
7 * height: 110,
8 * floating: false, // usually you want this set to True (default)
9 * renderTo: Ext.getBody(), // usually rendered by it's containing component
10 * items: [{
11 * xtype: 'menucheckitem',
12 * text: 'select all'
13 * },{
14 * xtype: 'menucheckitem',
15 * text: 'select specific',
16 * },{
17 * iconCls: 'add16',
18 * text: 'icon item'
19 * },{
20 * text: 'regular item'
21 * }]
22 * });
23 */
24Ext.define('Ext.menu.CheckItem', {
25 extend: 'Ext.menu.Item',
26 alias: 'widget.menucheckitem',
27
28 /**
29 * @cfg {Boolean} [checked=false]
30 * True to render the menuitem initially checked.
31 */
32
33 /**
34 * @cfg {String} checkedCls
35 * The CSS class used by {@link #cls} to show the checked state.
36 * Defaults to `Ext.baseCSSPrefix + 'menu-item-checked'`.
37 */
38 checkedCls: Ext.baseCSSPrefix + 'menu-item-checked',
39 /**
40 * @cfg {String} uncheckedCls
41 * The CSS class used by {@link #cls} to show the unchecked state.
42 * Defaults to `Ext.baseCSSPrefix + 'menu-item-unchecked'`.
43 */
44 uncheckedCls: Ext.baseCSSPrefix + 'menu-item-unchecked',
45 /**
46 * @cfg {String} groupCls
47 * The CSS class applied to this item's icon image to denote being a part of a radio group.
48 * Defaults to `Ext.baseCSSClass + 'menu-group-icon'`.
49 * Any specified {@link #iconCls} overrides this.
50 */
51 groupCls: Ext.baseCSSPrefix + 'menu-group-icon',
52
53 /**
54 * @cfg {Boolean} [hideOnClick=false]
55 * Whether to not to hide the owning menu when this item is clicked.
56 * Defaults to `false` for checkbox items, and to `true` for radio group items.
57 */
58 hideOnClick: false,
59
60 /**
61 * @cfg {Boolean} [checkChangeDisabled=false]
62 * True to prevent the checked item from being toggled. Any submenu will still be accessible.
63 */
64 checkChangeDisabled: false,
65
66 afterRender: function() {
67 var me = this;
68 me.callParent();
69 me.checked = !me.checked;
70 me.setChecked(!me.checked, true);
71 if (me.checkChangeDisabled) {
72 me.disableCheckChange();
73 }
74 },
75
76 initComponent: function() {
77 var me = this;
78 me.addEvents(
79 /**
80 * @event beforecheckchange
81 * Fires before a change event. Return false to cancel.
82 * @param {Ext.menu.CheckItem} this
83 * @param {Boolean} checked
84 */
85 'beforecheckchange',
86
87 /**
88 * @event checkchange
89 * Fires after a change event.
90 * @param {Ext.menu.CheckItem} this
91 * @param {Boolean} checked
92 */
93 'checkchange'
94 );
95
96 me.callParent(arguments);
97
98 Ext.menu.Manager.registerCheckable(me);
99
100 if (me.group) {
101 if (!me.iconCls) {
102 me.iconCls = me.groupCls;
103 }
104 if (me.initialConfig.hideOnClick !== false) {
105 me.hideOnClick = true;
106 }
107 }
108 },
109
110 /**
111 * Disables just the checkbox functionality of this menu Item. If this menu item has a submenu, that submenu
112 * will still be accessible
113 */
114 disableCheckChange: function() {
115 var me = this,
116 iconEl = me.iconEl;
117
118 if (iconEl) {
119 iconEl.addCls(me.disabledCls);
120 }
121 me.checkChangeDisabled = true;
122 },
123
124 /**
125 * Reenables the checkbox functionality of this menu item after having been disabled by {@link #disableCheckChange}
126 */
127 enableCheckChange: function() {
128 var me = this,
129 iconEl = me.iconEl;
130
131 if (iconEl) {
132 iconEl.removeCls(me.disabledCls);
133 }
134 me.checkChangeDisabled = false;
135 },
136
137 onClick: function(e) {
138 var me = this;
139 if(!me.disabled && !me.checkChangeDisabled && !(me.checked && me.group)) {
140 me.setChecked(!me.checked);
141 }
142 this.callParent([e]);
143 },
144
145 onDestroy: function() {
146 Ext.menu.Manager.unregisterCheckable(this);
147 this.callParent(arguments);
148 },
149
150 /**
151 * Sets the checked state of the item
152 * @param {Boolean} checked True to check, false to uncheck
153 * @param {Boolean} [suppressEvents=false] True to prevent firing the checkchange events.
154 */
155 setChecked: function(checked, suppressEvents) {
156 var me = this;
157 if (me.checked !== checked && (suppressEvents || me.fireEvent('beforecheckchange', me, checked) !== false)) {
158 if (me.el) {
159 me.el[checked ? 'addCls' : 'removeCls'](me.checkedCls)[!checked ? 'addCls' : 'removeCls'](me.uncheckedCls);
160 }
161 me.checked = checked;
162 Ext.menu.Manager.onCheckChange(me, checked);
163 if (!suppressEvents) {
164 Ext.callback(me.checkHandler, me.scope, [me, checked]);
165 me.fireEvent('checkchange', me, checked);
166 }
167 }
168 }
169});