Question

I am developing an application using ExtJS, and in one of my models I have field which is an array type, how can I set a dataIndex in grid so the data does not repeat when I edit one cell?

My code is shown below.

{
        xtype: 'button',
        icon : Webapp.icon('add1.png'),
        iconAlign : 'top',
        handler : function() {  
            var gridView = Ext.ComponentQuery.query('gridpanel')[1];
            grid = gridView.headerCt;
            if(grid.getGridColumns().length >= 1){
                var column = Ext.create('Ext.grid.column.Column', { dataIndex: 'interval', text : contador, 
                    editor: {xtype: 'textfield', flex: 0.5, editable: true}});
                grid.insert(gridView.columns.length, column);
                gridView.getView().refresh();
                var botao = Ext.getCmp('buttonRemoverColuna');
                botao.setDisabled(false);
            }
            contador++;
        }
    }


Ext.define('model', {
extend : 'Ext.data.Model',
fields : [ {
    name : 'id',
    type : 'long'
}, {
    name : 'name',
    type : 'string'
}, {
    name: 'interval',
    type: 'array'
}]
});

Answer 1

The simple answer is that you have to give each new column that you insert a different dataIndex config.

Right now every one gets dataIndex: 'interval'.

That means if you put a value in the interval field in your store for that record, every single column that is connected to the interval field will show up with that value.

A simple way to do that would be to change the handler to this:

handler : function() {  
    var gridView = Ext.ComponentQuery.query('gridpanel')[1],
        grid = gridView.headerCt,
        columnCount = grid.getGridColumns().length;

    if (columnCount >= 1){
        var column = Ext.create('Ext.grid.column.Column', { 
                dataIndex: 'interval' + columnCount, 
                text: contador, 
                editor: {xtype: 'textfield', flex: 0.5, editable: true}
            });

        grid.insert(gridView.columns.length, column);
        gridView.getView().refresh();
        var botao = Ext.getCmp('buttonRemoverColuna');
        botao.setDisabled(false);
    }
    contador++;
}

Specifically, the following config from the handler will give it an incremented dataIndex, i.e. interval1, interval2, interval3, interval4, etc. I don’t know anything about your server side set-up so I don’t know if it will work for you:

dataIndex: 'interval' + columnCount, 

EDIT:

Assuming you are not defining a custom array data type, your interval field data type will actually default to string. It will be easy to accomplish what you want using the grid column’s renderer config, I’ll post an example in a moment but you may as well change the data type back to string.

EXAMPLE:

The basic idea is to add a renderer to the column config that will show the individual interval values in the added columns by splitting the real interval field value into an array. You will still need an implementation of the grid columns with seperate dataIndex configs as shown above so that we can identify what columns match up to what interval array value.

handler : function() {  
    var grid = Ext.ComponentQuery.query('gridpanel')[1],
        header = grid.headerCt,
        intervalIndex = header.getGridColumns().length - 1;

    if (intervalIndex >= 0){
        var column = Ext.create('Ext.grid.column.Column', { 
                dataIndex: 'interval' + intervalIndex, 
                text: contador, 
                editor: {
                    xtype: 'textfield', 
                    intervalIndex: intervalIndex,
                    flex: 0.5, 
                    editable: true
                },

                // this will make the values display properly when not editing
                renderer: function(value, meta, record) {
                    var intervals = record.get('interval').split(',');
                    return intervals[intervalIndex];
                }
            });

        grid.insert(gridView.columns.length, column);
        gridView.getView().refresh();
        var botao = Ext.getCmp('buttonRemoverColuna');
        botao.setDisabled(false);
    }
    contador++;
}

You will also need beforeedit and edit event listeners on the grid.

The beforeedit handler will split the interval values into the correct column fields when you start a row edit.

The edit handler will join the updated field values from the different columns into a single string and apply it to the real interval field when you complete a row edit.

Ext.create('Ext.grid.Panel', {
    // your other grid configs...
    listeners: {

        // this will make the values display properly when you start a row edit
        beforeedit: function(plugin, edit) {
            plugin.editor.items.each(function(field) {
                var idx = field.intervalIndex;
                if (idx) {
                    var value = edit.record.get('interval').split(',')[idx];
                    Ext.defer(function() {
                        field.setValue(value);
                    }, 10);
                }
            });
        },

        // update the value of the real "interval" field when done editing
        edit: function(plugin, edit) {
            var intervalArray = [],
                var regex = /interval\d/;

            Ext.Object.each(edit.newValues, function(key, value) {
                if (regex.test(key)) {
                    intervalArray.push(value);
                }
            });

            // sets the interval value into a comma seperated value string
            edit.record.set('interval', intervalArray.join(','));
        }
    }
});

With the above edit listener, the value of your model’s interval field will be updated with the values in your added columns as a CSV string e.g.: 'value1,value2,value3,etc'.

Parsing the string on your server side is up to you. But in most programming language there is a stringValue.split(",") type of function which will convert the CSV string into a real array.

If you wanted the interval value to be more “array-like” you could also wrap it in brackets:

edit.record.set('interval', '[' + intervalArray.join(',') + ']')

I don’t know if that would help your parsing or not.