← Back to branch summary

~cdparra/gelee/trunk

« back to all changes in this revision

Viewing changes to webui/ecosystem/extjs/source/widgets/form/CheckboxGroup.js

  • Committer: parra
  • Date: 2010-03-15 02:39:02 UTC
  • Revision ID: svn-v4:ac5bba68-f036-4e09-846e-8f32731cc928:trunk/gelee:1433
merged gelee at svn

Show diffs side-by-side

added added

removed removed

Lines of Context:
webui/ecosystem/extjs/source/widgets/form/CheckboxGroup.js
 
1
/*
 
2
 * Ext JS Library 3.0 RC2
 
3
 * Copyright(c) 2006-2009, Ext JS, LLC.
 
4
 * licensing@extjs.com
 
5
 * 
 
6
 * http://extjs.com/license
 
7
 */
 
8
 
 
9
/**
 
10
 * @class Ext.form.CheckboxGroup
 
11
 * @extends Ext.form.Field
 
12
 * A grouping container for {@link Ext.form.Checkbox} controls.
 
13
 * @constructor
 
14
 * Creates a new CheckboxGroup
 
15
 * @param {Object} config Configuration options
 
16
 * @xtype checkboxgroup
 
17
 */
 
18
Ext.form.CheckboxGroup = Ext.extend(Ext.form.Field, {
 
19
    /**
 
20
     * @cfg {Array} items An Array of {@link Ext.form.Checkbox Checkbox}es or Checkbox config objects
 
21
     * to arrange in the group.
 
22
     */
 
23
    /**
 
24
     * @cfg {String/Number/Array} columns Specifies the number of columns to use when displaying grouped
 
25
     * checkbox/radio controls using automatic layout.  This config can take several types of values:
 
26
     * <ul><li><b>'auto'</b> : <p class="sub-desc">The controls will be rendered one per column on one row and the width
 
27
     * of each column will be evenly distributed based on the width of the overall field container. This is the default.</p></li>
 
28
     * <li><b>Number</b> : <p class="sub-desc">If you specific a number (e.g., 3) that number of columns will be 
 
29
     * created and the contained controls will be automatically distributed based on the value of {@link #vertical}.</p></li>
 
30
     * <li><b>Array</b> : Object<p class="sub-desc">You can also specify an array of column widths, mixing integer
 
31
     * (fixed width) and float (percentage width) values as needed (e.g., [100, .25, .75]). Any integer values will
 
32
     * be rendered first, then any float values will be calculated as a percentage of the remaining space. Float
 
33
     * values do not have to add up to 1 (100%) although if you want the controls to take up the entire field
 
34
     * container you should do so.</p></li></ul>
 
35
     */
 
36
    columns : 'auto',
 
37
    /**
 
38
     * @cfg {Boolean} vertical True to distribute contained controls across columns, completely filling each column 
 
39
     * top to bottom before starting on the next column.  The number of controls in each column will be automatically
 
40
     * calculated to keep columns as even as possible.  The default value is false, so that controls will be added
 
41
     * to columns one at a time, completely filling each row left to right before starting on the next row.
 
42
     */
 
43
    vertical : false,
 
44
    /**
 
45
     * @cfg {Boolean} allowBlank False to validate that at least one item in the group is checked (defaults to true).
 
46
     * If no items are selected at validation time, {@link @blankText} will be used as the error text.
 
47
     */
 
48
    allowBlank : true,
 
49
    /**
 
50
     * @cfg {String} blankText Error text to display if the {@link #allowBlank} validation fails (defaults to "You must 
 
51
     * select at least one item in this group")
 
52
     */
 
53
    blankText : "You must select at least one item in this group",
 
54
    
 
55
    // private
 
56
    defaultType : 'checkbox',
 
57
    
 
58
    // private
 
59
    groupCls: 'x-form-check-group',
 
60
    
 
61
    // private
 
62
    onRender : function(ct, position){
 
63
        if(!this.el){
 
64
            var panelCfg = {
 
65
                cls: this.groupCls,
 
66
                layout: 'column',
 
67
                border: false,
 
68
                renderTo: ct
 
69
            };
 
70
            var colCfg = {
 
71
                defaultType: this.defaultType,
 
72
                layout: 'form',
 
73
                border: false,
 
74
                defaults: {
 
75
                    hideLabel: true,
 
76
                    anchor: '100%'
 
77
                }
 
78
            }
 
79
            
 
80
            if(this.items[0].items){
 
81
                
 
82
                // The container has standard ColumnLayout configs, so pass them in directly
 
83
                
 
84
                Ext.apply(panelCfg, {
 
85
                    layoutConfig: {columns: this.items.length},
 
86
                    defaults: this.defaults,
 
87
                    items: this.items
 
88
                })
 
89
                for(var i=0, len=this.items.length; i<len; i++){
 
90
                    Ext.applyIf(this.items[i], colCfg);
 
91
                };
 
92
                
 
93
            }else{
 
94
                
 
95
                // The container has field item configs, so we have to generate the column
 
96
                // panels first then move the items into the columns as needed.
 
97
                
 
98
                var numCols, cols = [];
 
99
                
 
100
                if(typeof this.columns == 'string'){ // 'auto' so create a col per item
 
101
                    this.columns = this.items.length;
 
102
                }
 
103
                if(!Ext.isArray(this.columns)){
 
104
                    var cs = [];
 
105
                    for(var i=0; i<this.columns; i++){
 
106
                        cs.push((100/this.columns)*.01); // distribute by even %
 
107
                    }
 
108
                    this.columns = cs;
 
109
                }
 
110
                
 
111
                numCols = this.columns.length;
 
112
                
 
113
                // Generate the column configs with the correct width setting
 
114
                for(var i=0; i<numCols; i++){
 
115
                    var cc = Ext.apply({items:[]}, colCfg);
 
116
                    cc[this.columns[i] <= 1 ? 'columnWidth' : 'width'] = this.columns[i];
 
117
                    if(this.defaults){
 
118
                        cc.defaults = Ext.apply(cc.defaults || {}, this.defaults)
 
119
                    }
 
120
                    cols.push(cc);
 
121
                };
 
122
                
 
123
                // Distribute the original items into the columns
 
124
                if(this.vertical){
 
125
                    var rows = Math.ceil(this.items.length / numCols), ri = 0;
 
126
                    for(var i=0, len=this.items.length; i<len; i++){
 
127
                        if(i>0 && i%rows==0){
 
128
                            ri++;
 
129
                        }
 
130
                        if(this.items[i].fieldLabel){
 
131
                            this.items[i].hideLabel = false;
 
132
                        }
 
133
                        cols[ri].items.push(this.items[i]);
 
134
                    };
 
135
                }else{
 
136
                    for(var i=0, len=this.items.length; i<len; i++){
 
137
                        var ci = i % numCols;
 
138
                        if(this.items[i].fieldLabel){
 
139
                            this.items[i].hideLabel = false;
 
140
                        }
 
141
                        cols[ci].items.push(this.items[i]);
 
142
                    };
 
143
                }
 
144
                
 
145
                Ext.apply(panelCfg, {
 
146
                    layoutConfig: {columns: numCols},
 
147
                    items: cols
 
148
                });
 
149
            }
 
150
            
 
151
            this.panel = new Ext.Panel(panelCfg);
 
152
            this.el = this.panel.getEl();
 
153
            
 
154
            if(this.forId && this.itemCls){
 
155
                var l = this.el.up(this.itemCls).child('label', true);
 
156
                if(l){
 
157
                    l.setAttribute('htmlFor', this.forId);
 
158
                }
 
159
            }
 
160
            
 
161
            var fields = this.panel.findBy(function(c){
 
162
                return c.isFormField;
 
163
            }, this);
 
164
            
 
165
            this.items = new Ext.util.MixedCollection();
 
166
            this.items.addAll(fields);
 
167
        }
 
168
        Ext.form.CheckboxGroup.superclass.onRender.call(this, ct, position);
 
169
    },
 
170
    
 
171
    afterRender: function(){
 
172
        Ext.form.CheckboxGroup.superclass.afterRender.call(this);
 
173
        if(this.values){
 
174
            this.setValue.apply(this, this.values);
 
175
            delete this.values;
 
176
        }
 
177
    },
 
178
    
 
179
    // private
 
180
    validateValue : function(value){
 
181
        if(!this.allowBlank){
 
182
            var blank = true;
 
183
            this.items.each(function(f){
 
184
                if(f.checked){
 
185
                    return blank = false;
 
186
                }
 
187
            }, this);
 
188
            if(blank){
 
189
                this.markInvalid(this.blankText);
 
190
                return false;
 
191
            }
 
192
        }
 
193
        return true;
 
194
    },
 
195
    
 
196
    // private
 
197
    onDisable : function(){
 
198
        this.items.each(function(item){
 
199
            item.disable();
 
200
        })
 
201
    },
 
202
 
 
203
    // private
 
204
    onEnable : function(){
 
205
        this.items.each(function(item){
 
206
            item.enable();
 
207
        })
 
208
    },
 
209
    
 
210
    // private
 
211
    onResize : function(w, h){
 
212
        this.panel.setSize(w, h);
 
213
        this.panel.doLayout();
 
214
    },
 
215
    
 
216
    // inherit docs from Field
 
217
    reset : function(){
 
218
        Ext.form.CheckboxGroup.superclass.reset.call(this);
 
219
        this.items.each(function(c){
 
220
            if(c.reset){
 
221
                c.reset();
 
222
            }
 
223
        }, this);
 
224
    },
 
225
    
 
226
    /**
 
227
     * Sets the checked radio in the group.
 
228
     * @param {Mixed} id The checkbox to check. This can also be an array of boolean values, or an object literal containing the set of values, eg:
 
229
         * <pre><code>
 
230
group.setValues([true, true, false, true, false]);
 
231
group.setValues({
 
232
    check1: true,
 
233
    check2: false,
 
234
    check3: false
 
235
});
 
236
         * </code></pre> 
 
237
     * @param {Boolean} value (optional) The value to set the radio.
 
238
     * @return {Ext.form.RadioGroup} this
 
239
     */
 
240
    setValue : function(id, value){
 
241
        if(this.rendered){
 
242
            if(arguments.length == 1){
 
243
                if(Ext.isArray(id)){
 
244
                    //an array of boolean values
 
245
                    Ext.each(id, function(val, idx){
 
246
                        var item = this.items.itemAt(idx);
 
247
                        if(item){
 
248
                            item.setValue(val);
 
249
                        }
 
250
                    }, this);
 
251
                }else if(Ext.isObject(id)){
 
252
                    //set of name/value pairs
 
253
                    for(var i in id){
 
254
                        var f = this.getBox(i);
 
255
                        if(f){
 
256
                            f.setValue(id[i]);
 
257
                        }
 
258
                    }
 
259
                }
 
260
            }else{
 
261
                var f = this.getBox(id);
 
262
                if(f){
 
263
                    f.setValue(value);
 
264
                }
 
265
            }
 
266
        }else{
 
267
            this.values = arguments;
 
268
        }
 
269
    },
 
270
    
 
271
    // private
 
272
    getBox: function(id){
 
273
        var box = null;
 
274
        this.items.each(function(f){
 
275
            if(id == f || f.dataIndex == id || f.id == id || f.getName() == id){
 
276
                box = f;
 
277
                return false;
 
278
            }
 
279
        }, this);
 
280
        return box;
 
281
    },
 
282
    
 
283
    /**
 
284
     * Gets an array of the selected {@link Ext.form.Checkbox} in the group.
 
285
     * @return {Array} An array of the selected checkboxes.
 
286
     */
 
287
    getValue: function(){
 
288
        var out = [];
 
289
        if(this.items){
 
290
            this.items.each(function(item){
 
291
                if(item.checked){
 
292
                    out.push(item);
 
293
                }
 
294
            });
 
295
        }
 
296
        return out;
 
297
    },
 
298
    
 
299
    /**
 
300
     * @cfg {String} name
 
301
     * @hide
 
302
     */
 
303
    /**
 
304
     * @method initValue
 
305
     * @hide
 
306
     */
 
307
    initValue : Ext.emptyFn,
 
308
    /**
 
309
     * @method getValue
 
310
     * @hide
 
311
     */
 
312
    getValue : Ext.emptyFn,
 
313
    /**
 
314
     * @method getRawValue
 
315
     * @hide
 
316
     */
 
317
    getRawValue : Ext.emptyFn,
 
318
    
 
319
    /**
 
320
     * @method setRawValue
 
321
     * @hide
 
322
     */
 
323
    setRawValue : Ext.emptyFn
 
324
    
 
325
});
 
326
 
 
327
Ext.reg('checkboxgroup', Ext.form.CheckboxGroup);