mardi 31 octobre 2017

Dynamically changing property field in ExtJs Grid

I am using a grid with a checkbox and a combobox. Right now I am trying to find a way to make the combobox multi select if the checkbox is checked in roweditor.

            var pEditing =
            Ext.create('Ext.grid.plugin.RowEditing',
                    {
                        clicksToMoveEditor: 2,
                        errorSummary: false,
                        autoCancel: false,
                        listeners:
                        {
                            change: function (newValue, oldValue, eOpts)
                            {
                                if (newValue.value == true)
                                {
                                    this.down().down('grid').queryById('comboboxColumn').multiSelect = true;
                                }
                                else
                                {
                                    this.down().down('grid').queryById('comboboxColumn').multiSelect = false;
                                }
                                console.log("Checkbox Change Debug");
                             }
                        }
                   });

Grid creation code :

                                            {
                                                renderer: renderCheckbox,
                                                itemId: 'checkboxColumn',
                                                header: 'Checkbox',
                                                width: 100,
                                                sortable: false,
                                                dataIndex: 'ddCheckbox',
                                                editor: {
                                                    xtype: 'checkbox',
                                                    cls: 'x-grid-checkheader-editor',
                                                    listeners:{
                                                        change: function (newValue, oldValue, eOpts) {
                                                            pEditing.fireEvent('change',newValue, oldValue, eOpts);
                                                        }
                                                    },   
                                                },

                                            },
                                            {
                                                header: 'Speed',
                                                dataIndex: 'ddSpeed',
                                                itemId: 'comboBoxColumn',
                                                width: 125,
                                                editor:
                                                        {
                                                            xtype: 'combo',
                                                            editable: false,
                                                            multiSelect: false,
                                                            store:
                                                                    [
                                                                        ['1', '1'],
                                                                        ['2', '2'],
                                                                        ['3', '3'],
                                                                        ['4', '4'],
                                                                        ['5', '5']

                                                                    ]
                                                        }
                                            }

Right now the event is firing off and I can see the debug message printed to the log. However the multiselect property is not persisting after the event is fired. Is there any easy way to change the property of this combobox in the row? For example, if there are 3 rows in the grid, row one can have the checkbox checked, and multiple values selected while row two has the checkbox unchecked and only one selection can be made? I know I can find the index of the checkbox selected by using in the change function.

this.down().down('grid').getSelectionModel().getSelection()[0].getData()

Thanks




Aucun commentaire:

Enregistrer un commentaire