Chart issue with DeftJS5

[teck.n...@gmail.com]

Hi guys,

I got a strange issue within my application when I'm using a chart component: Cannot read property '_incr_' of undefined Observable.js:1306

Here is a small project to reproduce it:

app.json:

    "requires": [

        "sencha-charts"

    ],

app.js:

Ext.application({
    name: 'ChartTestApp',

    extend: 'ChartTestApp.Application',

    autoCreateViewport: false
});

Application.js

Ext.define('ChartTestApp.Application', {
   extend: 'Deft.mvc.Application',
   name: 'ChartTestApp',

   init: function() {

    return Ext.create('ChartTestApp.view.main.Main');

   }

});

Main.js

Ext.define('ChartTestApp.view.main.Main', {
    extend: 'Ext.container.Container',
    requires: [
        'Ext.chart.PolarChart',

        'Ext.chart.series.Pie',
    ],

    items: [{

        xtype: 'polar',

        width: 500,

        height: 500,

        store: Ext.create('Ext.data.JsonStore', {

        fields: ['os', 'data1' ],

        data: [

            { os: 'Android', data1: 68.3 },

            { os: 'BlackBerry', data1: 1.7 },

        ]}),

        series: [{

            type: 'pie',

            angleField: 'data1',

        }]

    }]

});

I'm using DeftJS5 + extJS 5.1. If I remove DeftJS from the code (change Deft.mvc.Application to Ext.app.Application), there is no more problem.
Is there any compatibility issues with the charting components?

Thx!

[Brian Kotek]

Hmm, can you clarify? Are you saying it works if you remove Deft JS from the project completely (as in, the library isn't included at all)? Or it works if you simply don't use Deft.mvc.Application?

Deft.mvc.Application was created as a simple convenience class. You're not required to use it. If everything else works when you don't use the Deft Application class, and If Ext 5.1 has introduced some conflict with this class, I would just recommend not using it. 

--
Deft JS home page: http://deftjs.org/
Wiki: https://github.com/deftjs/DeftJS/wiki
For rules and tips on asking questions on the Deft JS mailing list: https://github.com/deftjs/DeftJS/wiki/Asking-Questions-on-the-Mailing-List
---
You received this message because you are subscribed to the Google Groups "Deft JS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to deftjs+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/deftjs/2b4cda56-2d69-4072-9173-c9c516ddb454%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[teck.n...@gmail.com]

It's not specifically related to Deft.mvc.Application: as long as Deft JS is loaded into the application, we will get that issue with the chart. 

[Brian Kotek]

Hmm, I know they made some major changes to the underlying event system in 5.1 (part of the effort to merge Ext JS and Touch, I believe). Since this error seems related to the event system (it's happening in Ext.mixin.Observable, where the count of listeners is incremented), so those changes in 5.1 could be the issue.

I'm not sure if you have the time or inclination to investigate this further and let us know what you find. I haven't used Ext JS 5.1...in fact most of my current work is with AngularJS. Obviously, it's very hard to keep up with changes to Ext JS while learning and using something completely different as well. That said, I may be doing some Ext JS work again in the near future, and if that happens, I'll have more time to focus back on Deft JS again. But until then, we may need to rely on folks like you who are still actively using the Sencha libraries on a regular basis to offer suggestions or fixes.

To view this discussion on the web visit https://groups.google.com/d/msgid/deftjs/3d104368-7cf0-4f15-9216-4caf304a7637%40googlegroups.com.

[teck.n...@gmail.com]

After investigation, it looks like the issue is coming from Deft.event.LiveEventBus after the Ext.ComponentManager has registered the series from the chart:

function() {
  Ext.Function.interceptAfter(Ext.ComponentManager, 'register', function(component) {
    Deft.event.LiveEventBus.register(component);
});

The register method from Deft.event.LiveEventBus  is called after Ext.ComponentManager has registered a component:

register: function(component) {
  component.on('added', this.onComponentAdded, this);
  component.on('removed', this.onComponentRemoved, this);
},

component.on will add a listener to the component by calling doAddListener in Ext.mixin.Observable:

if (event.addListener(fn, scope, options, caller, manager)) {                        
  me.hasListeners._incr_(ename);
}

At that moment, me is the chart series and hasListeners is undefined as it hasn't been created by Ext.mixin.Observable constructor yet:

constructor: function(config) {
  var me = this,
      self = me.self,
      declaredListeners, listeners, bubbleEvents;
      me.hasListeners = new me.HasListeners();
 ...
}

I had the feeling that the register method from Deft.event.LiveEventBus was executed too early so I defer its call by a few ms. Then everything was working fine! 

And I could clearly see a different sequence:

• Without defering the register call: Ext.ComponentManager.register -> Deft.event.LiveEventBus.register -> Ext.mixin.Observable.doAddListener -> ERROR
• With defering the register call: Ext.ComponentManager.register -> Ext.mixin.Observable.constructor -> Deft.event.LiveEventBus.register -> Ext.mixin.Observable.doAddListener -> GOOD

Obviously this solution is quite dirty as we don't have control on the sequence. Any better ideas are welcome :)

Another thing that came to my mind is that Deft.event.LiveEventBus is used for live component selectors. However I do remember that this feature is deprecated in Deft JS5 as we are using Sencha ViewController. So is it still used or can I remove it as well as all its dependancies (Deft.mvc.ComponentSelectorListener, Deft.mvc.ComponentSelector) ? It would actually solve the issue :)

[teck.n...@gmail.com]

Could someone confirm the last question related to the live selectors in Deft JS 5? Thx!

[Brian Kotek]

I plan to try and look into this in the next week or so. I think removing the live event listener should be OK, we just need to try and make sure that this doesn't affect anything else in Ext JS *or* Touch apps.

To view this discussion on the web visit https://groups.google.com/d/msgid/deftjs/f55ff5c8-9ac0-4bc5-95d6-24e23bf1d61f%40googlegroups.com.

[Krzysztof Biliński]

Hi,

I think it is a bug in Sencha code. Look at the constructor of Ext.chart.series.Series:

constructor: function (config) {
 var me = this;
 me.getId();
 me.sprites = [];
 me.dataRange = [];

// Original place of component register
// Ext.ComponentManager.register(me);

 if (config) {
 // Backward compatibility with Ext.
 if (config.tips) {
 config = Ext.apply({
 tooltip: config.tips
 }, config);
 }
 // Backward compatibility with Touch.
 if (config.highlightCfg) {
 config = Ext.apply({
 highlight: config.highlightCfg
 }, config);
 }
 }

 me.mixins.observable.constructor.call(me, config);

// register component here, after observable constructor call
 Ext.ComponentManager.register(me);
 },

Simply move component registration after mixin constructor. It should work fine.

Chris

[teck.n...@gmail.com]

Hi Krzysztof,

Thx a lot! That fix works like a charm and makes more sense!

...

[Brian Kotek]

Thanks for hunting that down. Did anyone report the issue to Sencha via the bug tracking forum? (I really wish they had a true public issue tracker...)

I'll also add that John, Isaac and I have been off doing other things, and haven't had the same time to put into Deft that we did in the past. We're looking into what we can do to ensure that Deft JS keeps moving forward. We'll keep you posted as we figure things out. 

Brian

To view this discussion on the web visit https://groups.google.com/d/msgid/deftjs/0bcbbaa0-bec3-415e-8208-f081485dcdec%40googlegroups.com.

[Krzysztof Biliński]

Hi,

It took me a while to hunt it down :| I've just reported it to Sencha (Sencha forum bug). Unfortunatelly their support don't work as it should and sometimes doesn't work at all. We will see how long does it take to fix this bug ;)

That is good to hear that Deft is not dead. I'm using it in every project since version 0.8 and it is the best thing that has happened after I realized how much does ExtJS suck in few places. Deft showed me how things should be done and frankly I don't understand why Sencha hasn't incorporated it to ExtJS 5. Instead of this they showed us new MVVM, which also has few holes in it IMHO.

Chris