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'
    }
});

Error stack

Find Fiddle here Grid with Paging bar destroy issue

Why are you using StoreHolder explicitly in your view? Can you share some code? — Yellen, Jun 05 '15 at 11:20
@Yellen I have updated my question with my code..I am using `StoreHolder` for paging bar which I use for grid views...Initially I was using `Ext.util.Bindable` in ExtJs 4.2 but after up gradation to ExtJs 5.1, I replace Ext.util.Bindable with Ext.util.StoreHolder — Abhijit Muke, Jun 05 '15 at 11:59
I have added snapshot of error stack in questions...yes Grid view has that paging bar.. — Abhijit Muke, Jun 05 '15 at 13:44
@Yellen...`var pagingBar = me.queryById('paging-bar'); if(pagingBar){ pagingBar.bindStore(Store); }` — Abhijit Muke, Jun 08 '15 at 05:53

Yellen · Answer 1 · 2015-06-05T13:28:42.387

2

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

edited Jun 05 '15 at 13:28

answered Jun 05 '15 at 13:23

Yellen

1,785
16
35

You've onDestroy defined inside your CustomPagingBar? – Yellen Jun 05 '15 at 13:29
1

http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.Component-method-destroy – Yellen Jun 05 '15 at 13:29
no I don't have any onDestroy inside CustomPagingBar..I try your updated answer but still getting same problem `binding.destroy is not a function` – Abhijit Muke Jun 05 '15 at 13:31
Can you test in Chrome and enable pause on exception and check which binding is causing it? – Yellen Jun 05 '15 at 13:33
@Yellen...I try your answer to add onDestroy inside CustomPaginBar...still having same issue....`binding.destroy is not a function`. After debugging more it show me location where the error get thrown..`removeBindings() method from Ext.mixin.Bindable` – Abhijit Muke Jun 08 '15 at 12:09
@AbhijitMuke - I cannot say much unless I see much more of the code. – Yellen Jun 09 '15 at 13:13
@Yellen....I think you can help me...can we discuss more in chat http://chat.stackoverflow.com/rooms/80061/uncaught-typeerror-binding-destroy-is-not-a-function-in-extjs-5 – Abhijit Muke Jun 09 '15 at 13:26
1

@AbhijitMuke - You should post it in Sencha forum as well. – Yellen Jun 09 '15 at 13:31
@Yellen I got exact same problem because of a store binding: `items: [ { xtype: 'infocard', bind: { store: '{infoStore}' },`. I've replaced `onDestroy` method you gave on the panel which I'm using the `bind` config and placed it as listener but both way did not work. Still says: `binding.destroy() property not defined`. How can I over come? – Nuri Engin Feb 26 '18 at 11:44
I'm developing sencha's admindashboard and error raises during closing view on `Tab`. Probably view's `destroy` method and binding's are messing up. – Nuri Engin Feb 26 '18 at 11:47
@NuriEngin which extjs version are you using? – Yellen Feb 28 '18 at 10:10
@Yellen I'm using 6.5.3 – Nuri Engin Feb 28 '18 at 10:12

score 0 · Accepted Answer · answered Jun 10 '15 at 13:31

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.

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

2 Answers2