Question

So I have a ExtJs 4 Grid Panel that has two columns.

Column ONE is a ComboBox with a custom renderer

Ext.ux.comboBoxRenderer = function(combo) {
    return function(value) {
        var idx = combo.store.find(combo.valueField, value);
        var rec = combo.store.getAt(idx);

        return (rec == null ? '<img src="/js/extjs4/resources/themes/images/default/grid/loading.gif" />' : rec.get(combo.displayField) );
    };
}

Column TWO is a numeric column

{
  allowBlank: false,
  header: 'Time',
  dataIndex: 'tedPaidTime',
  align: 'right',
  field: {
     xtype: 'numberfield',
     allowBlank: false,
     minValue: 0,
     maxValue: 100000
  },
  flex: 0.20,
  selectOnFocus:true
}

Now, when I load the DataStore, I want the FIRST column to be read only. Which is easy if I set the ReadOnly flag.

However, I have a button that adds a NEW record to store and I want that new record to NOT have the readonly flag.

So basically, once you change column one and save, you can not alter it. Only able to alter new records before they are saved.

The business rules here require them to delete the old record if it’s incorrect.

Thanks.

Answer 1

I was able to solve this myself.

Basically, I recorded the combo on the selectionchange event.
Then, in the focus event, I checked to see if it had a required data key from the store. If not, then I assume a new row and ran the following:

focus: function(combo) {
           var cb = combo;
           if(newTEDetailRecord) {
              if(newTEDetailRecord.data["activityKey"] == "") {
                 console.log("newTEDetailRecord", newTEDetailRecord);
                 cb.setEditable(true);
                 cb.setReadOnly(false);
                 cb.focus();
                 cb.selectText();
              } else {
                 cb.setReadOnly(true);
              }
           }
        },