← Back to branch summary

~mortenoh/+junk/dhis2-detailed-import-export

« back to all changes in this revision

Viewing changes to gis/dhis-gis-geostat/mfbase/ext/source/widgets/form/CheckboxGroup.js

  • Committer: larshelge at gmail
  • Date: 2009-03-03 16:46:36 UTC
  • Revision ID: larshelge@gmail.com-20090303164636-2sjlrquo7ib1gf7r
Initial check-in

Show diffs side-by-side

added added

removed removed

Lines of Context:
gis/dhis-gis-geostat/mfbase/ext/source/widgets/form/CheckboxGroup.js
 
1
/*
 
2
 * Ext JS Library 2.2
 
3
 * Copyright(c) 2006-2008, 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
 */
 
17
Ext.form.CheckboxGroup = Ext.extend(Ext.form.Field, {
 
18
    /**
 
19
     * @cfg {String/Number/Array} columns Specifies the number of columns to use when displaying grouped
 
20
     * checkbox/radio controls using automatic layout.  This config can take several types of values:
 
21
     * <ul><li><b>'auto'</b> : <p class="sub-desc">The controls will be rendered one per column on one row and the width
 
22
     * of each column will be evenly distributed based on the width of the overall field container. This is the default.</p></li>
 
23
     * <li><b>Number</b> : <p class="sub-desc">If you specific a number (e.g., 3) that number of columns will be 
 
24
     * created and the contained controls will be automatically distributed based on the value of {@link #vertical}.</p></li>
 
25
     * <li><b>Array</b> : Object<p class="sub-desc">You can also specify an array of column widths, mixing integer
 
26
     * (fixed width) and float (percentage width) values as needed (e.g., [100, .25, .75]). Any integer values will
 
27
     * be rendered first, then any float values will be calculated as a percentage of the remaining space. Float
 
28
     * values do not have to add up to 1 (100%) although if you want the controls to take up the entire field
 
29
     * container you should do so.</p></li></ul>
 
30
     */
 
31
    columns : 'auto',
 
32
    /**
 
33
     * @cfg {Boolean} vertical True to distribute contained controls across columns, completely filling each column 
 
34
     * top to bottom before starting on the next column.  The number of controls in each column will be automatically
 
35
     * calculated to keep columns as even as possible.  The default value is false, so that controls will be added
 
36
     * to columns one at a time, completely filling each row left to right before starting on the next row.
 
37
     */
 
38
    vertical : false,
 
39
    /**
 
40
     * @cfg {Boolean} allowBlank False to validate that at least one item in the group is checked (defaults to true).
 
41
     * If no items are selected at validation time, {@link @blankText} will be used as the error text.
 
42
     */
 
43
    allowBlank : true,
 
44
    /**
 
45
     * @cfg {String} blankText Error text to display if the {@link #allowBlank} validation fails (defaults to "You must 
 
46
     * select at least one item in this group")
 
47
     */
 
48
    blankText : "You must select at least one item in this group",
 
49
    
 
50
    // private
 
51
    defaultType : 'checkbox',
 
52
    
 
53
    // private
 
54
    groupCls: 'x-form-check-group',
 
55
    
 
56
    // private
 
57
    onRender : function(ct, position){
 
58
        if(!this.el){
 
59
            var panelCfg = {
 
60
                cls: this.groupCls,
 
61
                layout: 'column',
 
62
                border: false,
 
63
                renderTo: ct
 
64
            };
 
65
            var colCfg = {
 
66
                defaultType: this.defaultType,
 
67
                layout: 'form',
 
68
                border: false,
 
69
                defaults: {
 
70
                    hideLabel: true,
 
71
                    anchor: '100%'
 
72
                }
 
73
            }
 
74
            
 
75
            if(this.items[0].items){
 
76
                
 
77
                // The container has standard ColumnLayout configs, so pass them in directly
 
78
                
 
79
                Ext.apply(panelCfg, {
 
80
                    layoutConfig: {columns: this.items.length},
 
81
                    defaults: this.defaults,
 
82
                    items: this.items
 
83
                })
 
84
                for(var i=0, len=this.items.length; i<len; i++){
 
85
                    Ext.applyIf(this.items[i], colCfg);
 
86
                };
 
87
                
 
88
            }else{
 
89
                
 
90
                // The container has field item configs, so we have to generate the column
 
91
                // panels first then move the items into the columns as needed.
 
92
                
 
93
                var numCols, cols = [];
 
94
                
 
95
                if(typeof this.columns == 'string'){ // 'auto' so create a col per item
 
96
                    this.columns = this.items.length;
 
97
                }
 
98
                if(!Ext.isArray(this.columns)){
 
99
                    var cs = [];
 
100
                    for(var i=0; i<this.columns; i++){
 
101
                        cs.push((100/this.columns)*.01); // distribute by even %
 
102
                    }
 
103
                    this.columns = cs;
 
104
                }
 
105
                
 
106
                numCols = this.columns.length;
 
107
                
 
108
                // Generate the column configs with the correct width setting
 
109
                for(var i=0; i<numCols; i++){
 
110
                    var cc = Ext.apply({items:[]}, colCfg);
 
111
                    cc[this.columns[i] <= 1 ? 'columnWidth' : 'width'] = this.columns[i];
 
112
                    if(this.defaults){
 
113
                        cc.defaults = Ext.apply(cc.defaults || {}, this.defaults)
 
114
                    }
 
115
                    cols.push(cc);
 
116
                };
 
117
                
 
118
                // Distribute the original items into the columns
 
119
                if(this.vertical){
 
120
                    var rows = Math.ceil(this.items.length / numCols), ri = 0;
 
121
                    for(var i=0, len=this.items.length; i<len; i++){
 
122
                        if(i>0 && i%rows==0){
 
123
                            ri++;
 
124
                        }
 
125
                        if(this.items[i].fieldLabel){
 
126
                            this.items[i].hideLabel = false;
 
127
                        }
 
128
                        cols[ri].items.push(this.items[i]);
 
129
                    };
 
130
                }else{
 
131
                    for(var i=0, len=this.items.length; i<len; i++){
 
132
                        var ci = i % numCols;
 
133
                        if(this.items[i].fieldLabel){
 
134
                            this.items[i].hideLabel = false;
 
135
                        }
 
136
                        cols[ci].items.push(this.items[i]);
 
137
                    };
 
138
                }
 
139
                
 
140
                Ext.apply(panelCfg, {
 
141
                    layoutConfig: {columns: numCols},
 
142
                    items: cols
 
143
                });
 
144
            }
 
145
            
 
146
            this.panel = new Ext.Panel(panelCfg);
 
147
            this.el = this.panel.getEl();
 
148
            
 
149
            if(this.forId && this.itemCls){
 
150
                var l = this.el.up(this.itemCls).child('label', true);
 
151
                if(l){
 
152
                    l.setAttribute('htmlFor', this.forId);
 
153
                }
 
154
            }
 
155
            
 
156
            var fields = this.panel.findBy(function(c){
 
157
                return c.isFormField;
 
158
            }, this);
 
159
            
 
160
            this.items = new Ext.util.MixedCollection();
 
161
            this.items.addAll(fields);
 
162
        }
 
163
        Ext.form.CheckboxGroup.superclass.onRender.call(this, ct, position);
 
164
    },
 
165
    
 
166
    // private
 
167
    validateValue : function(value){
 
168
        if(!this.allowBlank){
 
169
            var blank = true;
 
170
            this.items.each(function(f){
 
171
                if(f.checked){
 
172
                    return blank = false;
 
173
                }
 
174
            }, this);
 
175
            if(blank){
 
176
                this.markInvalid(this.blankText);
 
177
                return false;
 
178
            }
 
179
        }
 
180
        return true;
 
181
    },
 
182
    
 
183
    // private
 
184
    onDisable : function(){
 
185
        this.items.each(function(item){
 
186
            item.disable();
 
187
        })
 
188
    },
 
189
 
 
190
    // private
 
191
    onEnable : function(){
 
192
        this.items.each(function(item){
 
193
            item.enable();
 
194
        })
 
195
    },
 
196
    
 
197
    // private
 
198
    onResize : function(w, h){
 
199
        this.panel.setSize(w, h);
 
200
        this.panel.doLayout();
 
201
    },
 
202
    
 
203
    // inherit docs from Field
 
204
    reset : function(){
 
205
        Ext.form.CheckboxGroup.superclass.reset.call(this);
 
206
        this.items.each(function(c){
 
207
            if(c.reset){
 
208
                c.reset();
 
209
            }
 
210
        }, this);
 
211
    },
 
212
    
 
213
    /**
 
214
     * @cfg {String} name
 
215
     * @hide
 
216
     */
 
217
    /**
 
218
     * @method initValue
 
219
     * @hide
 
220
     */
 
221
    initValue : Ext.emptyFn,
 
222
    /**
 
223
     * @method getValue
 
224
     * @hide
 
225
     */
 
226
    getValue : Ext.emptyFn,
 
227
    /**
 
228
     * @method getRawValue
 
229
     * @hide
 
230
     */
 
231
    getRawValue : Ext.emptyFn,
 
232
    /**
 
233
     * @method setValue
 
234
     * @hide
 
235
     */
 
236
    setValue : Ext.emptyFn,
 
237
    /**
 
238
     * @method setRawValue
 
239
     * @hide
 
240
     */
 
241
    setRawValue : Ext.emptyFn
 
242
    
 
243
});
 
244
 
 
245
Ext.reg('checkboxgroup', Ext.form.CheckboxGroup);