Upgrade to ExtJS 3.2.0 - Released 03/30/2010
[extjs.git] / docs / source / CheckItem.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.2.0
11  * Copyright(c) 2006-2010 Ext JS, Inc.
12  * licensing@extjs.com
13  * http://www.extjs.com/license
14  */
15 <div id="cls-Ext.menu.CheckItem"></div>/**
16  * @class Ext.menu.CheckItem
17  * @extends Ext.menu.Item
18  * Adds a menu item that contains a checkbox by default, but can also be part of a radio group.
19  * @constructor
20  * Creates a new CheckItem
21  * @param {Object} config Configuration options
22  * @xtype menucheckitem
23  */
24 Ext.menu.CheckItem = Ext.extend(Ext.menu.Item, {
25     <div id="cfg-Ext.menu.CheckItem-group"></div>/**
26      * @cfg {String} group
27      * All check items with the same group name will automatically be grouped into a single-select
28      * radio button group (defaults to '')
29      */
30     <div id="cfg-Ext.menu.CheckItem-itemCls"></div>/**
31      * @cfg {String} itemCls The default CSS class to use for check items (defaults to "x-menu-item x-menu-check-item")
32      */
33     itemCls : "x-menu-item x-menu-check-item",
34     <div id="cfg-Ext.menu.CheckItem-groupClass"></div>/**
35      * @cfg {String} groupClass The default CSS class to use for radio group check items (defaults to "x-menu-group-item")
36      */
37     groupClass : "x-menu-group-item",
38
39     <div id="cfg-Ext.menu.CheckItem-checked"></div>/**
40      * @cfg {Boolean} checked True to initialize this checkbox as checked (defaults to false).  Note that
41      * if this checkbox is part of a radio group (group = true) only the last item in the group that is
42      * initialized with checked = true will be rendered as checked.
43      */
44     checked: false,
45
46     // private
47     ctype: "Ext.menu.CheckItem",
48     
49     initComponent : function(){
50         Ext.menu.CheckItem.superclass.initComponent.call(this);
51             this.addEvents(
52                 <div id="event-Ext.menu.CheckItem-beforecheckchange"></div>/**
53                  * @event beforecheckchange
54                  * Fires before the checked value is set, providing an opportunity to cancel if needed
55                  * @param {Ext.menu.CheckItem} this
56                  * @param {Boolean} checked The new checked value that will be set
57                  */
58                 "beforecheckchange" ,
59                 <div id="event-Ext.menu.CheckItem-checkchange"></div>/**
60                  * @event checkchange
61                  * Fires after the checked value has been set
62                  * @param {Ext.menu.CheckItem} this
63                  * @param {Boolean} checked The checked value that was set
64                  */
65                 "checkchange"
66             );
67             <div id="method-Ext.menu.CheckItem-checkHandler"></div>/**
68              * A function that handles the checkchange event.  The function is undefined by default, but if an implementation
69              * is provided, it will be called automatically when the checkchange event fires.
70              * @param {Ext.menu.CheckItem} this
71              * @param {Boolean} checked The checked value that was set
72              * @method checkHandler
73              */
74             if(this.checkHandler){
75                 this.on('checkchange', this.checkHandler, this.scope);
76             }
77             Ext.menu.MenuMgr.registerCheckable(this);
78     },
79
80     // private
81     onRender : function(c){
82         Ext.menu.CheckItem.superclass.onRender.apply(this, arguments);
83         if(this.group){
84             this.el.addClass(this.groupClass);
85         }
86         if(this.checked){
87             this.checked = false;
88             this.setChecked(true, true);
89         }
90     },
91
92     // private
93     destroy : function(){
94         Ext.menu.MenuMgr.unregisterCheckable(this);
95         Ext.menu.CheckItem.superclass.destroy.apply(this, arguments);
96     },
97
98     <div id="method-Ext.menu.CheckItem-setChecked"></div>/**
99      * Set the checked state of this item
100      * @param {Boolean} checked The new checked value
101      * @param {Boolean} suppressEvent (optional) True to prevent the checkchange event from firing (defaults to false)
102      */
103     setChecked : function(state, suppressEvent){
104         var suppress = suppressEvent === true;
105         if(this.checked != state && (suppress || this.fireEvent("beforecheckchange", this, state) !== false)){
106             if(this.container){
107                 this.container[state ? "addClass" : "removeClass"]("x-menu-item-checked");
108             }
109             this.checked = state;
110             if(!suppress){
111                 this.fireEvent("checkchange", this, state);
112             }
113         }
114     },
115
116     // private
117     handleClick : function(e){
118        if(!this.disabled && !(this.checked && this.group)){// disable unselect on radio item
119            this.setChecked(!this.checked);
120        }
121        Ext.menu.CheckItem.superclass.handleClick.apply(this, arguments);
122     }
123 });
124 Ext.reg('menucheckitem', Ext.menu.CheckItem);</pre>    
125 </body>
126 </html>