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