1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
|
if(!dojo._hasResource["dojox.form.CheckedMultiSelect"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.form.CheckedMultiSelect"] = true;
dojo.provide("dojox.form.CheckedMultiSelect");
dojo.require("dijit.form.MultiSelect");
dojo.require("dijit.form.CheckBox");
dojo.declare("dojox.form._CheckedMultiSelectItem",
[dijit._Widget, dijit._Templated],
{
// summary:
// The individual items for a CheckedMultiSelect
widgetsInTemplate: true,
templateString:"<div class=\"dijitReset ${baseClass}\"\n\t><input class=\"${baseClass}Box\" dojoType=\"dijit.form.CheckBox\" dojoAttachPoint=\"checkBox\" dojoAttachEvent=\"_onClick:_changeBox\" type=\"checkbox\" \n\t><div class=\"dijitInline ${baseClass}Label\" dojoAttachPoint=\"labelNode\" dojoAttachEvent=\"onmousedown:_onMouse,onmouseover:_onMouse,onmouseout:_onMouse,onclick:_onClick\">${option.innerHTML}</div\n></div>\n",
baseClass: "dojoxMultiSelectItem",
// option: Element
// The option that is associated with this item
option: null,
parent: null,
// disabled: boolean
// Whether or not this widget is disabled
disabled: false,
_changeBox: function(){
// summary:
// Called to force the select to match the state of the check box
// (only on click of the checkbox)
this.option.selected = this.checkBox.getValue() && true;
// fire the parent's change
this.parent._onChange();
// refocus the parent
this.parent.focus();
},
_labelClick: function(){
// summary:
// Called when the label portion is clicked
dojo.stopEvent(e);
if(this.disabled){
return;
}
var cb = this.checkBox;
cb.setValue(!cb.getValue());
this._changeBox();
},
_onMouse: function(e){
// summary:
// Sets the hover state depending on mouse state (passes through
// to the check box)
this.checkBox._onMouse(e);
},
_onClick: function(e){
// summary:
// Sets the click state (passes through to the check box)
this.checkBox._onClick(e);
},
_updateBox: function(){
// summary:
// Called to force the box to match the state of the select
this.checkBox.setValue(this.option.selected);
},
setAttribute: function(attr, value){
// summary:
// Disables (or enables) all the children as well
this.inherited(arguments);
switch(attr){
case "disabled":
this.checkBox.setAttribute(attr, value);
break;
default:
break;
}
}
});
dojo.declare("dojox.form.CheckedMultiSelect", dijit.form.MultiSelect, {
// summary:
// Extends the core dijit MultiSelect to provide a "checkbox" selector
templateString: "",
templateString:"<div class=\"dijit dijitReset dijitInline\" dojoAttachEvent=\"onmousedown:_mouseDown,onclick:focus\"\n\t><select class=\"${baseClass}Select\" multiple=\"true\" dojoAttachPoint=\"containerNode,focusNode\" dojoAttachEvent=\"onchange: _onChange\"></select\n\t><div dojoAttachPoint=\"wrapperDiv\"></div\n></div>\n",
baseClass: "dojoxMultiSelect",
// children: dojox.form._CheckedMultiSelectItem[]
// Array of all our children (for updating them)
children: [],
/*=====
dojox.form.__SelectOption = function(){
// value: String
// The value of the option. Setting to empty (or missing) will
// place a separator at that location
// label: String
// The label for our option. It can contain html tags.
this.value = value;
this.label = label;
}
=====*/
// options: dojox.form.__SelectOption[]
// our set of options
options: null,
_mouseDown: function(e){
// summary:
// Cancels the mousedown event to prevent others from stealing
// focus
dojo.stopEvent(e);
},
_updateChildren: function(){
// summary:
// Called to update the checked states of my children to match me
dojo.forEach(this.children,function(child){
child._updateBox();
});
},
_addChild: function(/*Element*/ option){
// summary:
// Adds and returns a child for the given option.
var item = new dojox.form._CheckedMultiSelectItem({
option: option,
parent: this
});
this.wrapperDiv.appendChild(item.domNode);
return item;
},
_loadChildren: function(){
// summary:
// Reloads the children to match our box.
// Destroy any existing children before loading them again
dojo.forEach(this.children, function(child){
child.destroyRecursive();
});
this.children = dojo.query("option", this.domNode).map(function(child){
return this._addChild(child);
}, this);
this.options = dojo.map(this.children, function(child){
var opt = child.option;
return { value:opt.value, label: opt.text };
});
// Update the statuses of the children
this._updateChildren();
},
addOption: function(/* dojox.form.__SelectOption or string, optional */ value, /* string? */ label){
// summary: Adds the given option to the select
var o = new Option("","");
o.value = value.value || value;
o.innerHTML = value.label || label;
this.containerNode.appendChild(o);
},
removeOption: function(/*String*/ optionId){
dojo.query("option[value=" + optionId + "]", this.domNode).forEach(function(node){
node.parentNode.removeChild(node);
}, this);
},
setOptionLabel: function(/*string*/ optionId, /*string*/ label){
dojo.query("option[value=" + optionId + "]", this.domNode).forEach(function(node){
node.innerHTML = label;
});
},
addSelected: function(select){
this.inherited(arguments);
// Reload my children and the children of the guy pointing to me
if(select._loadChildren){
select._loadChildren();
}
this._loadChildren();
},
setAttribute: function(attr, value){
// summary:
// Disable (or enable) all the children as well
this.inherited(arguments);
switch(attr){
case "disabled":
dojo.forEach(this.children, function(node){
if(node && node.setAttribute){
node.setAttribute(attr, value);
}
});
break;
default:
break;
}
},
startup: function(){
if(this._started){ return; }
this.inherited(arguments);
// Load children and make connections
this._loadChildren();
this.connect(this, "setValue", "_updateChildren");
this.connect(this, "invertSelection", "_updateChildren");
this.connect(this, "addOption", "_loadChildren");
this.connect(this, "removeOption", "_loadChildren");
this.connect(this, "setOptionLabel", "_loadChildren");
this._started = true;
}
});
}
|
