1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    1
    Vote Rating
    1
    gmartinez is on a distinguished road

      1  

    Default Unanswered: A Real Custom Form Field Example Needed

    Unanswered: A Real Custom Form Field Example Needed


    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:
    Code:
    // 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!

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,800
    Answers
    358
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    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.

  3. #3
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    17
    Vote Rating
    2
    rob_agar is on a distinguished road

      0  

    Default


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

Thread Participants: 2

Tags for this Thread