ExtJS include Ex.ux.ComboColumn

Question

I am stuck...

I would like to include Ext.ux.ComboColumn, but I have no idea how to do this (never worked with javascript and ExtJs (using ExtJs 3) before.)

I have downloaded the javascript file and placed it in the same folder than my webpage.

The webside I have build with ExtJs looks like this:

Ext.onReady(function() {

    var myRefStore = new Ext.data.JsonStore({
        url: 'dispatchAjaxRequest',
        baseParams: {
            eventPath: 'frontend.CustomFunctions',
            eventMethod: 'getData',
            jsonInput: Ext.encode({
                tableName: 'CCMS_REF',
                start: 0,
                limit: rowLimit
            })
        },
        root: 'store',
        id: 'gridStore',
        fields: ['id', 'external_user', 'external_company', 'external_product', 'system_id', 'context_name', 'system_id'],
        autoLoad: true
    });


    var userCombo = new Ext.ComboBox({
        id: 'myCombo',
        triggerAction: 'all',
        store: myRefStore,
        selectOnFocus: true,
        typeAhead: true,
        editable: false,
        forceSelection: true,
        mode: 'remote',
        displayField: 'context_name',
        valueField: 'id',
        hideMode: 'offsets',
        lazyInit: false,
        hiddenName: 'mycontext',
        name: 'mycontextname'
    })


    var editGrid = new Ext.grid.EditorGridPanel({
            id: 'editTable',
            title: 'Edit table BIC_CUST_CCMS_OBJECTS',
            header: true,
            renderTo: 'contentDivCcms',
            clicksToEdit: 1,
            //height:350,
            autoHeight: true,
            //style: 'margin-bottom: 50px',
            colModel: new Ext.grid.ColumnModel({
                    defaults: {
                        width: 120,
                        sortable: false,
                        hideable: false,
                        menuDisabled: true
                    },
                    viewConfig: {
                        forceFit: true
                    },
                    columns: [{
                            hidden: true,
                            header: 'id',
                            dataIndex: 'id',
                            editable: false
                        }, {
                            header: 'sap_ref',
                            dataIndex: 'sap_ref',
                            width: 50,
                            xtype: 'combocolumn', // Use the custom column or use the column's render manually
                            editor: userCombo, // The custom column needs a ComboBox editor to be able to render the displayValue, without it just renders value
                            gridId: editTable
                        },

                    }),
                store: myStore,
                sm: new Ext.grid.RowSelectionModel({
                    singleSelect: false
                }),

            });
    });
});

But I only get the following error:

TypeError: Ext.ComboBox is not a constructor

How do I include the Ext.uxComboColumn.js?

Regards LStrike

Answer 1

Use Ext.form.field.ComboBox or Ext.form.ComboBox instead of just Ext.Combobox

var userCombo = new Ext.form.field.ComboBox({
    id: 'myCombo',
    triggerAction: 'all',
    store: myRefStore,
    selectOnFocus: true,
    typeAhead: true,
    editable: false,
    forceSelection: true,
    mode: 'remote',
    displayField: 'context_name',
    valueField: 'id',
    hideMode: 'offsets',
    lazyInit: false,
    hiddenName: 'mycontext',
    name: 'mycontextname'
});