// Here some simplified example code, to clarify the problem
var CustomElement = new Class(
{
Implements: [Options, Events],
options:{ replaces:null },
elements:{},
initialize: function(options)
{
this.setOptions(options);
this.build();
this.domLink();
},
build: function()
{
this.elements.wrapper = new Element( 'span');
if( this.options.replaces)
this.elements.wrapper.replaces( this.options.replaces);
this.elements.input = new Element( 'input',
{ type:'hidden'}).inject( wrapper);
this.elements.btn = new Element( 'span',
{ 'class':'btn'}).inject( wrapper);
},
domLink: function()
{
var w = this.elements.wrapper;
w.store( 'instance', this);
Object.append( w, { toInstance: function() { return
this.retrieve('instance'); }});
/*
// How to make something like this work???
w.Properties.value =
{
get: function() {
this.toInstance().elements.input.get('value'); },
set: function(val) { this.toInstance().setValue(val); }
};
// And how can setStyle() be extended???
Object.append( w, { setStyle: function(prop,val)
{
this.parent(prop,val);
if( prop=='width') this.toInstance().setWidth(val);
}});
*/
},
toElement: function()
{
return this.elements.wrapper;
},
setValue: function(val)
{
// maybe some validation logic first, then...
this.elements.input.set('value',val);
},
setWidth: function(val)
{
this.elements.btn.setStyle( 'width',
Math.round(val.toInt()*0.7));
this.elements.wrapper.setStyle( 'width', val);
}
});