// 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);
        }
});

Reply via email to