Implementing a Widget Property"
From Documentation
Tmillsclare (talk | contribs) m (Created page with '{{ZKComponentDevelopmentEssentialsPageHeader}} A property usually has a getter and a setter. The getter is straightforward: <source lang=javascript"> _value: '', //default valu…') |
Chunfuchang (talk | contribs) |
||
| (2 intermediate revisions by one other user not shown) | |||
| Line 3: | Line 3: | ||
A property usually has a getter and a setter. The getter is straightforward: | A property usually has a getter and a setter. The getter is straightforward: | ||
| − | <source lang=javascript"> | + | <source lang="javascript"> |
_value: '', //default value | _value: '', //default value | ||
| Line 11: | Line 11: | ||
</source> | </source> | ||
| − | The setter is defined in a similar manner except we have to modify the DOM tree if it has been attached. A widget inherits a property called node which is assigned a reference to a DOM element if the widget has been attached to the DOM tree. If a widget is attached to DOM, this.desktop will be a reference to the desktop (zk.Desktop) it belongs. Otherwise, it is null. | + | The setter is defined in a similar manner except we have to modify the DOM tree if it has been attached. A widget inherits a property called node which is assigned a reference to a DOM element if the widget has been attached to the DOM tree. If a widget is attached to DOM, <mp>this.desktop</mp> will be a reference to the desktop (<javadoc directory="jsdoc">zk.Desktop</javadoc>) it belongs. Otherwise, it is null. |
| + | |||
How we update depends on the DOM content. In this example, we use HTML's span to enclose the value, so we only need to change innerHTML. | How we update depends on the DOM content. In this example, we use HTML's span to enclose the value, so we only need to change innerHTML. | ||
| − | <source lang=javascript"> | + | <source lang="javascript"> |
setValue: function(value) { | setValue: function(value) { | ||
if (this._value != value) { | if (this._value != value) { | ||
Latest revision as of 09:41, 3 July 2015
A property usually has a getter and a setter. The getter is straightforward:
_value: '', //default value
getValue: function () {
return this._value;
}
The setter is defined in a similar manner except we have to modify the DOM tree if it has been attached. A widget inherits a property called node which is assigned a reference to a DOM element if the widget has been attached to the DOM tree. If a widget is attached to DOM, this.desktop will be a reference to the desktop (Desktop) it belongs. Otherwise, it is null.
How we update depends on the DOM content. In this example, we use HTML's span to enclose the value, so we only need to change innerHTML.
setValue: function(value) {
if (this._value != value) {
this._value = value;
if (this.desktop) this.$n().innerHTML = zUtl.encodeXML(value);
}
}