A Real Custom Form Field Example Needed

[gmartinez]

Hi!

The custom form field sample doesn't help at all. It shows how to extend an existing control, but it doesn't show how to create a custom form field from scratch.

I need a custom form filed that has a textbox and a button next to it. It should expose methods and events so I could set the value, get the value and handle button click.

There are NO examples of anything similar to that in the entire internet. So frustrating....

This is the only thing I could come up with:

// Creates an EntityReference data type.
function entityReference(id, logicalName, name, imageUrl) {
    this.id = id;
    this.logicalName = logicalName;
    this.name = name;
    this.imageUrl = imageUrl;
}

// A Numeric field.
Ext.define('XS.EntityReferenceField', {
    extend: 'Ext.form.field.Base',
    alias: 'xs.entityreffield',
    isFormField: true,
    submitValue: true,
    readOnly: false,
    fieldSubTpl: [
        '<div id="{id}" class="{fieldCls}"></div>',
        {
            compiled: true,
            disableFormats: true
        },
    ],

    initComponent: function () {
        this.callParent(arguments);
        this.addEvents('lookupButtonClick');
    },

    afterRender: function () {
        this.callParent();

        var that = this;

        Ext.create('Ext.panel.Panel', { // Just a wrapping panel.
            border: 0,
            layout: {
                type: 'hbox',
                columns: 2
            },
            items: [
                that.inputText = Ext.create('Ext.form.field.Display', {
                    flex: '1',
                    //style: 'margin:-3 0 0 0;',
                    //fieldStyle: true ? 'background-color: #eee; background-image: none;' : null,
                    value: this.renderLookups(this.value)
                }), {
                    xtype: 'button',
                    width: 16,
                    height: 22,
                    disabled: false,
                    iconCls: 'icon-lookup', // Defined in HTML Page: .icon-lookup { background-image: url(../Resources/lookup.png) !important; background-position: -3 0; }
                    margin: '3 0 2 -1',
                    hidden: this.readOnly,
                    listeners: {
                        click: function () {
                            var lookupResult = { data: [], clear: false };
                            that.fireEvent('lookupButtonClick', that, lookupResult);

                            if (lookupResult.data != null) {
                                var oldValue = that.value;
                                that.setValue(lookupResult.clear == true || lookupResult.data == null ? [] : lookupResult.data)
                                that.fireEvent('change', that, that.value, oldValue);
                            }
                        }
                    }
                }/*, {
                    xtype: 'button',
                    width: 16,
                    height: 22,
                    disabled: false,
                    iconCls: 'icon-lookup-delete', // Defined in HTML Page: .icon-lookup-delete { background-image: url(../Resources/lookup-delete.png) !important; background-position: -3 0; }
                    margin: '0 0 2 1',
                    hidden: this.readOnly
                }*/
            ]
        }).render(this.inputEl);
    },

    // Overwriting setValue method.
    setValue: function (value) {
        if (this.inputText != null) {
            this.inputText.setValue(this.renderLookups(value));
        }
        this.value = value;
    },

    renderLookups: function (entityRefs) {
        var value = '';
        for (var i = 0; i < entityRefs.length; i++) {
            var image = '<img src="' + entityRefs[i].imageUrl + '" style="vertical-align:middle; margin:1 2 0 0" />';
            var onClickEvent = 'onclick="globalDataManager.openEntityDetails(\'' + entityRefs[i].id + '\', \'' + entityRefs[i].logicalName + '\')"';
            var text = '<span style="text-decoration: underline; color: #0000AA; cursor: pointer" ' + onClickEvent + '>' + entityRefs[i].name + '</span>';

            value = value + image + text;
            if (i < entityRefs.length - 1) {
                value = value + ' ';
            }
        }

        var borderHeight = 6;
        var itemHeight = 16;
        var height = this.linesCount * itemHeight + borderHeight;
        return '<div class="x-form-field x-form-text " aria-invalid="false" style="overflow:auto; height: ' + height.toString() + ';width: 100%;' + (this.readOnly ? '; background-color: #eee; background-image: none;' : '') + '" type="text" size="1" readOnly="" autocomplete="off" unselectable="off" data-errorqtip="">' + value + '</div>';
    }
});

But it has resizing issues when put into re sizable docking panel.

So:
1. Where can I get an example of a real custom form field (preferably with no fieldSubTpl crap)
2. How to fix resizing of custom form fields put into resizable panels? I saw similar issue here: http://www.sencha.com/forum/showthre...tom-form-field but nothing helped.

Thank you!

[slemmon]

The closest thing that comes to mind to me is the File Field. You might check out the source code on that class to see how it's packaging a field + button in the same component.

I might direct you to the source for slider fields, too, though I suspect you won't like it as much given its use of the fieldSubTpl config.

[rob_agar]

+1 FWIW there is an open 100 point bounty on Stack Overflow: http://stackoverflow.com/questions/6...ield-component