javascript - Uncaught TypeError: binding.destroy is not a function in ExtJs 5

Question

I am using Ext.util.StoreHolder mixin in my extjs 5.1 view.I found problem with Ext.destroy() method which throws error while destroying view having bindable mixin Ext.util.StoreHolder. I can not destroy that view, it giving me error

Uncaught TypeError: binding.destroy is not a function

at Ext.define.privates.removeBindings

My view is using mixin:

mixins: {
    bindable: 'Ext.util.StoreHolder'
},

Is there any problem with Ext.util.StoreHolder mixin? Why can't I destroy that view?

Edit -> , please find my code

Ext.define('MyApp.view.ux.CustomPagingBar', {
    extend: 'Ext.toolbar.Toolbar',
    alias : 'widget.custompagingbar',
    mixins: {
        bindable: 'Ext.util.StoreHolder'
    }
});

Find Fiddle here Grid with Paging bar destroy issue

Answer 1

Make sure that you are unbinding the store when destroy is called on the view.

I think this should work.

Ext.define('MyApp.view.ux.CustomPagingBar' ,{
   extend: 'Ext.toolbar.Toolbar',
   alias : 'widget.custompagingbar',
   mixins: {
      bindable: 'Ext.util.StoreHolder'
  },

  // other code

  onDestroy: function(){
      var me = this;
        me.bindStore(null);
        // some other custom code if you want
        me.callParent();
    }


});

    // me.bindStore(null); this will unbind the store from the view before it is destroyed

Answer 2

In Ext JS 5, Ext.mixin.Bindable has a new config--"bind"-- which allows bind descriptors to be defined on components.

In my component's "bind" method is overwriting this, and so the binding cleanup process is trying to destroy a binding, but doesn't have the proper configuration for it.

Commenting "bind" method prevent the destroy issue.