ExtJS 6 - Bind disabled property to new records in a store

Question

I'm trying to enable/disable a button when the store getNewRecords() function return the length, but not work!

bind: {
  disabled: "{!grid.getStore().getNewRecords().length}"
}

Fiddle: https://fiddle.sencha.com/fiddle/1sj5

Someone have idea to how resolve this?

Answer 1

You need to create a formula in your viewmodel:

viewModel: {
    formulas: {
        hasNewRecords: function (r) {
            return this.getView().down("treepanel").getStore().getNewRecords().length > 0;
        }
    }
}

then you can use it for your bindings:

bind: {
    disabled: "{hasNewRecords}"
}

(probably not the best way to get the data you want).

You can read about it here, here and here .

Answer 2

What you're wanting to do here is currently not possible in the framework. Instead, you should create a ViewModel data value and modify that where need be, like this:

var form = Ext.create("Ext.form.Panel", {
    viewModel: {
        data: {
            newRecords: false
        }
    },
    items: [{
        xtype: "textfield",
        labelField: "Add Child",
        name: "col1",
        value: "Teste 123"
    }],
    tbar: {
        xtype: "button",
        text: "Add new record",
        handler: function () {
            var data = this.up("form").getForm().getFieldValues();
            var rec = grid.getStore().getAt(0);
            data["treeCol"] = rec.childNodes.length + 1;
            // setting value, so binding updates
            this.lookupViewModel().set('newRecords', true);
            rec.appendChild(data);
        }
    },
    bbar: {
        xtype: "button",
        text: "button to disabled when new records",
        bind: {
            disabled: "{newRecords}"
        }
    },
    renderTo: Ext.getBody()
});

Answer 3

Or by simply doing this.

In your controller:

me.getView().getViewModel().set('storeLen', store.getNewRecords().length);

In your ViewModel, simply do this:

formulas : {
    hasNewRecords : {
          get : function(get){
                var length = get('storeLen') // --> gets the one you set at your controller
                return length > 0 ? true : false;
            }
      }
}

In your View:

bind : {
  disabled : '{hasNewRecords}'
}