JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" type="text/css" href="//cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all-debug.css" />
JavaScript
var data = [
{
yearOne: 1,
yearTwo: 1
}, {
yearOne: 1,
yearTwo: 1
}, {
yearOne: 1,
yearTwo: 1
}
];
/* MODEL */
Ext.define('YrModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'yearOne',
type: 'int'
}, {
name: 'yearTwo',
type: 'int'
}],
});
/* STORE */
Ext.create('Ext.data.Store', {
storeId: 'YrStore',
model: "YrModel",
data: data,
autoLoad: true,
proxy: {
type: 'memory',
reader: {
type: 'json'
}
}
});
/* COMBOBOX STORE */
var comboboxStore = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"yearOne", "name":"Year One"},
{"abbr":"yearTwo", "name":"Year Two"}
]
});
/* COMBOBOX */
var combobox = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose a year',
store: comboboxStore,
queryMode: 'local',
editable: false,
displayField: 'name',
valueField: 'abbr'
});
/* LISTENER TO COMBOBOX SELECT EVENT */
combobox.on({
select: onComboboxSelect
});
/* METHOD THAT HANDLE THE COMBOBOX SELECT EVENT */
function onComboboxSelect(combo, records){
var yearSelectValue = null;
var yearSelected = (records.length > 0)
? records[0].get('abbr')
: null;
var selectedRecords = Ext.getCmp('yearGrid').getSelectionModel().getSelection();
Ext.getStore('YrStore').each(function(record, index, count) {
yearSelectValue = record.get(yearSelected);
record.set(yearSelected, yearSelectValue + 1);
});
Ext.getCmp('yearGrid').getSelectionModel().select(selectedRecords);
}
/* GRID */
Ext.create('Ext.grid.Panel', {
id: 'yearGrid',
title: 'Year Data',
renderTo: Ext.getBody(),
store: Ext.getStore('YrStore'),
selModel: Ext.create('Ext.selection.CheckboxModel'),
viewConfig:{
...