View Full Version : ExtJS 4.2 Chart Records Combo behaving incorrectly

2 Feb 2015, 11:10 AM
I will try to make this question as detailed and as easy as possible to understand.

I have 2 different web servers running. One has ExtJS 4.0, the other has ExtJS 4.2. On both sites, I have the same code running for a particular pie chart.

On the pie chart window, I have a dropdown named 'Records' in which the user can check and uncheck to hide certain pieces of the pie chart. So for example, if I have a pie chart with pieces named 'Opened', 'Closed', 'On Hold', the user will see 3 checkboxes in the dropdown for each of those pieces, and if they uncheck it, the piece will be hidden. If checked, the piece will reappear. That all works fine on both servers.

I also have a refresh button which refreshes the pie chart info, it's just a simple ajax php call that returns each pie's values, then the pie is redrawn.

The issue arises when the user unchecks a record from the records drop down to hide a piece of the pie chart, then clicks on the refresh button.

On ExtJS 4.0, this works perfectly fine, and it refreshes correctly as it should, and the user can continue to hide or unhide pie pieces. However, on the server with ExtJS 4.2, the chart seems to reload fine, however as soon as the user unchecks another record from the records drop down, there will be a javascript error saying there is no such label in the store.

So for example, if I have a pie chart showing even 1/3 pieces for 'Opened', 'Closed', and 'On Hold', I uncheck 'Opened' in the records drop down, so the pie chart will show half 'Closed', half 'On Hold'. Then I click on refresh. The pie chart will show the original 1/3 pieces for opened, closed, and on hold, as expected. Then I try the following scenarios:

Scenario 1. Uncheck 'Closed'. error is returned because the closed label doesn't exist in the store.

Scenario 2. Uncheck 'Opened'. Opened piece is hidden, however the closed and on hold pieces remain as is, therefore the pie looks like a pie with a missing 1/3 piece, rather than showing a full pie with half closed and half on hold. Rechecking 'Opened' after this would make the entire pie 100% 'Opened'.

I debugged my code and found that after refresh is clicked, it runs removeRecord( record ) in the beforedeselect listener for all the pie pieces (except the piece(s) I unselected before clicking refresh), yet somehow it still artificially displays the correct pie chart. This would be the explaination behind why when the user tries to deselect another record to hide, it would return store errors.

Here is the little block of code for my records combo dropdown, which is identical on both my 4.0 and 4.2 servers. My only conclusion is something was changed between ExtJS 4.0 and 4.2, I just can't seem to find out what yet...

this.recordsCombo = Ext.createByAlias( 'widget.ext_combo', Ext.apply({
displayField: this.xField,
forceSelection: true,
listeners: {
beforedeselect: function( combo, record, index, eOpts ) {
this.removeRecord( record );
beforeselect: function( combo, record, index, eOpts ) {
this.reinsertRecord( record );
scope: this
multiSelect: true,
submitValue: false,
triggerAction: 'all',
trigger2Cls: false,
valueField: Ext.isDefined(this.store.reader) ? this.store.reader.idProperty : this.store.pkId

I tried looking on the ExtJS change logs for possible clues as to what has been updated for the charts that would cause a different behavior, with that functionality, but I can't seem to find anything that was remotely related to the issue I am having.

I would appreciate any morsel of information to possibly direct me to the cause of this 'bug?' Thanks!

4 Feb 2015, 12:44 PM

Can you post a test case that demonstrates the issue? If you can include the runnable code below or (ideally) create a Fiddle (https://fiddle.sencha.com), I'll be happy to test this along with you.