ExtJS filter ComboBox dynamically

Question

I have a property grid with multiple comboboxes and I want to filter the values in one box based on what is selected in the previous box.

My code looks like this:

var tempPropGrid = me.getView().add(
    {
        xtype:'propertygrid',
        width: 80,
        header: false,
        title: 'prop grid',
        //for some reason the headers are not hiding, we may need to deal with this using CSS
        //hideHeaders: true,
        enableColumnResize: false,
        sortableColumns: false,
        nameColumnWidth: 1,
        source: record.data,
        sourceConfig: {
            teamName: {
                editor: Ext.create('Ext.form.ComboBox', {
                    store: teams,
                    queryMode: 'local',
                    displayField: 'teamName',
                    valueField: 'teamName'
                }),
                displayName: 'Team'
            },
            leadDev : {
                editor: Ext.create('Ext.form.ComboBox', {
                    store: teamMembers.filter('teamName', teamName.value), // this probably won't work but you get the idea
                    queryMode: 'local',
                    displayField: 'personName',
                    valueField: 'personName'
                }),
                displayName: 'Lead Dev'
            },

and my JSON object looks like this:

{
                    "periodName": "Week1",
                    "teamName": "tango",
                    "roleName": "SWE III",
                    "roleExperience": "3",
                    "id": "21ea7f61-a9a5-4dbd-b405-e7a0449f8096"
                },

So essentially I am assigning a project to a team, and then based on which team I choose I want to select a leadDev based on them being in that team.

I am not sure how to pluck the value of a combo box and apply a filter dynamically so any help would be great.

Nikolai Lopin Nikolai Lopin · Accepted Answer · 2015-05-27T11:32:39

Each row in the grid is a model. So, in your leadDev combobox you just need to listen for 'expand' event, then retrieve current row model and apply value from this model to the filter. It should look like this(not checked):

Ext.create('Ext.form.ComboBox', {
                store: store
                queryMode: 'local',
                displayField: 'personName',
                valueField: 'personName',
                listeners: {
                    'expand' : function(combo) {
                         var grid = combo.up('grid');
                         var selection = grid.getSelectionModel().getSelection();
                         var currentRowModel = //get this from selection
                         combo.getStore().clearFilter(true);
                         combo.getStore().filter('teamName',currentRowModel.teamName);
                     }
                }
            })

And you need to update current model when user selects value from the first combobox

ExtJS filter ComboBox dynamically

1 Answers