Search code examples
extjscomboboxextjs4extjs4.2

Can a field in model be a combobox - ExtJS 4


I have this model of Cities defined in ExtJS

Ext.define('Packt.model.staticData.City', {
    extend : 'Packt.model.sakila.Sakila',

    idProperty : 'city_id',

    fields : [{
        name : 'city_id'
    }, {
        name : 'city'
    }/*, { //doesn't work
        //name : 'country_id',
        xtype: 'combobox',
        store: Ext.getStore('countries'),
        fieldLabel: 'Choose Country',
        //queryMode: 'local',
        displayField: 'country',
        valueField: 'country_id',
    }*/],

    associations : [{
        type : 'belongsTo',
        model : 'Country',
        primaryKey : 'city_id',
        foreignKey : 'country_id'
    }]
});

Is it possible to create a combobox in a model, something like the code in comments above?

I want to create row in my grid and for country I want countries listed in combobox. Each menu item of the StaticData list loads the same Ext.ux.LiveSearchGridPanel with different data/store/model.

cities

When I click add button this is what happens:

onButtonClickAdd : function(button, e, options) {
        var grid = button.up('staticdatagrid'), 
            store = grid.getStore(), 
            modelName = store.getProxy().getModel().modelName, 
            cellEditing = grid.getPlugin('cellplugin');

        store.insert(0, Ext.create(modelName, {
            last_update : new Date()
        }));
        /*
        cellEditing.startEditByPostion({
            row : 0,
            column : 1
        });
        */
    },

Solution

  • No way!! You can add combobox in your grid row using editor plugin.Something like this:

           cellEditing = new Ext.grid.plugin.CellEditing({
                  clicksToEdit: 1
             });
    
            Ext.create('Ext.grid.Panel', {
                title: 'Simpsons',
                store: Ext.data.StoreManager.lookup('simpsonsStore'),
                plugins: [cellEditing],
                columns: [{
                    text: 'Name',
                    dataIndex: 'name'
                }, {
                    text: 'Countries',
                    dataIndex: 'country',
                    editor: new Ext.form.field.ComboBox({
                        typeAhead: true,
                        selectOnTab: true,
                        store: countryStore,
                    })
                })
                }],
                height: 200,
                width: 400,
                renderTo: Ext.getBody()
            })]