Ext Config

Playing around with Ext 4 config to see what's possible.

by Walter Rumsby

CSS

body {
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

.x-foo {
    display: inline-block;
    border: 2px solid #900;
    box-shadow: 1px 1px 1px #ccc;
    border-radius: 6px;
    margin: 2px;
    padding: 8px;
    min-width: 10px;
    text-align: center;
}

JavaScript

(function () {
    var logger = Ext.create('Ext.Component', {
        xtype: 'widget.console',
        renderTo: Ext.getBody(),
        autoEl: 'ol',
        autoRender: true,

        log: function (msg) {
            var el = this.getEl(),
                dh;

            dh = {
                tag: 'li',
                html: msg
            };
            
            el.appendChild(dh);
        }
    });
    
    Ext.define('Foo', {
        extend: 'Ext.Component',
        xtype: 'widget.foo',
        renderTo: Ext.getBody(),
        autoRender: true,
        baseCls: 'x-foo',
        renderTpl: '<span>{foo:htmlEncode}</span>',
        config: {
            // not sure why this is getting overwritten
            foo: 'moo moo'
        },
        listeners: {
            // is there a change event or config change event?
            foochange: function (cmp, newValue, oldValue) {
                var el = cmp.getEl(),
                    tpl = cmp.renderTpl;
                
                logger.log('foo changed from ' + oldValue + ' to ' + newValue);
                
                el.setHTML(tpl.apply(cmp));
                // bubble, relay, something else to send change event?
            },
            change: function (cmp) {
                logger.log('change');
            }
        },
        constructor: function (config) {
            this.initConfig(config);
            this.callParent([config]);
        },
        // this is like a validator/setter in YUI
        applyFoo: function (foo) {
            logger.log('applying ' + foo);

            return foo;
        },
        updateFoo: function (newValue, oldValue) {
            logger.log('updating foo from ' + oldValue + ' to ' + newValue);
            // can we tell if we are in the init phase?
            if (newValue !== oldValue) {
                logger.log('newValue !== oldValue');
                // this is like broacast: 1 in YUI
                this.fireEvent('foochange', this,...