CODEWITHSUNDEEP
cssextjs
horcle_buzz
horcle_buzz

Reputation: 2161

ExtJS Combobox not rendering properly

I have the following fieldset in a form Panel in the Admin Dashboard template using ExtJS 6.2:

    {
        xtype: 'fieldset',
        layout: 'anchor',
        items: [{
            xtype: 'combobox',
            listeners : {
                select : function() {
                    console.log(arguments)
                    console.log(arguments[1].data.birth_date)
                    console.log(arguments[1].data.first_name)
                    console.log(arguments[1].data.last_name)
                    console.log(arguments[1].data.sex)
                }
            },
            bind: {
                store: '{patients}'
            },
            reference: 'patientCombo',
            publishes: 'id',
            fieldLabel: 'Patient Search',
            displayField: 'mrn',
            //anchor: '-',
            // We're forcing the query to run every time by setting minChars to 0
            // (default is 4)
            minChars: 2,
            queryParam: '0',
            queryMode: 'local',
            typeAhead: true,
            // https://www.sencha.com/forum/showthread.php?156505-Local-combobox-with-any-match-filter
            doQuery: function(queryString, forceAll) {
                this.expand();
                this.store.clearFilter(!forceAll);

                if (!forceAll) {
                    this.store.filter(this.displayField, new RegExp(Ext.String.escapeRegex(queryString), 'i'));
                }
            }


        }, {
            // https://www.sencha.com/forum/showthread.php?299301-Bind-combobox-displayField-value-to-displayfield
            xtype: 'displayfield',
            fieldLabel: 'Selected Patient',
            bind: {
                html: '<p>Name: <b>{patientCombo.selection.first_name}, ' +
                '{patientCombo.selection.last_name} </b></p>' +
                '<p>Sex: {patientCombo.selection.sex}</p>' +
                '<p>Birthdate: {patientCombo.selection.birth_date}</p>'
            }


        }]
    },

It is working fine, but it is rendering rather strangely, as seen in the following image (I had to mask the data being presented, but the numbers are what to be selected from the combobox):

rendering issue with combobox

I am assuming this is a CSS issue, but have not been able to figure out what. NB: I had to copy Admin-all.css Admin-all_1.css Admin-all_2.css and Admin-all_3.css from the build/examples/admin-dashboard/classic/resources folder to the app after I created the template in order to fix a major layout issue.

Upvotes: 0

Views: 662

Answers (1)

Alexander
Alexander

Reputation: 20224

Yes, this is a CSS issue. The Admin Dashboard example and its CSS have been compiled using Sencha Cmd, so the CSS file contains only the styles required by the example. Since there is no combobox in the example, the combobox styles have not been added and the combobox you inserted does not render correctly.

The only solution would be to use Sencha Cmd to recompile from source and fix the layout issue along the way, which I guess is caused by a missing requires directive.

Upvotes: 1

Related Questions