We Keep Coding

Rally App SDK 2.0rc1 - Why does my combobox ignore datastore filters only on first click?

I have the following code (sloppy, I know...first javascript app). I am trying to get a combobox to populate with a list of features that fall under a given release (as selected in the first combobox). Almost everything is now working correctly, except everytime I click the feature combobox for the first time, it loads ALL features and completely ignores the filter. Even if I change the release box first, the feature box still populates with all features only on first click. Subsequent times it shows the correctly filtered features.
Even stranger, I've tried writing the total records in the Feature Store to the console, so I can see when this happens. When the feature combobox is first created, it has the correct number of records in it. However, as soon as I click the feature combobox for the first time, it triggers the "load" listener of the combobox, and pulls in all the features, ignoring the filter completely.
I'm so boggled, I've tried so many things to debug this, and at this point have no other options. Does anyone have any ideas as to why it would load the correct data first, then reload it and ignore the filters on first click?
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var relComboBox = Ext.create("Rally.ui.combobox.ReleaseComboBox", {
fieldLabel: 'Choose a Release',
width: 300,
listeners: {
ready: function(combobox) {
this._releaseRef = combobox.getRecord().get("_ref");
this._loadFeatureInfo();
},
select: function(combobox) {
this._releaseRef = combobox.getRecord().get("_ref");
this._loadFeatureInfo();
},
scope: this
}
});
this.add(relComboBox);
},
_loadFeatureInfo: function() {
var featureStore = Ext.create("Rally.data.WsapiDataStore", {
model: "portfolioitem/Feature",
fetch: ["Name", "_ref"],
autoLoad: true,
filters: [
{
property: "Release",
operator: "=",
value: this._releaseRef
}
],
listeners: {
load: function(store) {
this._updateFeatureBox(store);
},
scope: this
}
});
},
_createFeatureBox: function(featureStore) {
this._featureComboBox = Ext.create("Rally.ui.combobox.ComboBox", {
fieldLabel: 'Choose a Feature to move',
store: featureStore,
listeners: {
select: function (combobox) {
this._featureRef = combobox.getRecord().get("_ref");
//calls method to get and display children of this feature in a grid
},
scope: this
}
});
this.add(this._featureComboBox);
},
_updateFeatureBox: function(featureStore) {
if (this._featureComboBox === undefined) {
this._createFeatureBox(featureStore);
} else {
this._featureComboBox.clearValue();
this._featureComboBox.bindStore(featureStore);
//calls method to get and display children of this feature in a grid
}
}

This is probably an issue caused by the featureStore loading twice: once when you created it, and the combobox also tells it to load again once the user opens the combobox to pick a Feature.
I encountered a very similar issue with a combobox on Stories, and I'd betcha dollars to donuts that Matt Greer's answer:
Strange Load behavior with Rally.ui.combobox.ComboBox
To my question, is the answer to yours too...

Second change listener in a Sencha Touch 2 view breaks build

I've got a Sencha Touch 2 view that's using this ratings class: Ext.ux.touch.rating, with two instances:
{
xtype: 'rating',
id: 'rating1',
value: -1,
itemCls: 'x-rating-star',
itemHoverCls: 'x-rating-star-hover',
listeners: {
change: function () {
Ext.getCmp('ratingBtn').setDisabled(Ext.getCmp('rating2').getValue() == -1)
}
}
},
...
{
xtype: 'rating',
id: 'rating2',
value: -1,
itemCls: 'x-rating-star',
itemHoverCls: 'x-rating-star-hover',
listeners: {
change: function () {
Ext.getCmp('ratingBtn').setDisabled(Ext.getCmp('rating1').getValue() == -1)
}
}
},
...
{
xtype: 'button',
ui: 'confirm',
text: 'Rate',
id: 'ratingBtn',
disabled: true
},
I'm trying, with the code above, to get ratingBtn (IDs are named slightly differently in my code) to be enabled once both ratings have been filled.
If I only have the first listener attached, things work fine (except no action on the second rating changing). If I attach the second listener with a console.log(this) or console.log(this.parent) or even Ext.getCmp('ratingBtn'), the app builds fine.
But if I attempt to invoke setDisabled() on the element (and this only happens for the second listener...and happens even if I call it as setDisabled(false)), I get this when compiling (plus a huge stack trace):
[ERROR] TypeError: 'undefined' is not an object
Stack trace:
file:////[snipped]/app/view/[snipped].js?_dc=1371009329838 : 346 : Anonymous
with line 346 being the line where I attempted to call setDisabled().
I can't find a way (including pushing both listeners to the controller) to get rid of this error, or one effectively identical to it. Even doing naughty things like document.getElementById return null, so the build tool says.
So, how do I fix this issue? I realize that the above code won't win any awards for OOP, but it should at least build...right?!? How do I get it to do that?

Extjs store isn't loaded after changing active tab

I have a grid.panel on the side with table names and I'd like to show the table(or it's structure) when the user clicks on it, in another grid.panel inside a tab view.
what i did:
in the actionlistener
var store = Ext.data.StoreManager.lookup('Tables');
currentTable = store.findRecord('name',record.get('name'));
var structureView = Ext.ComponentQuery.query('structure')[0];
structureView.showTable(currentTable);
in the view
showTable: function(table) {
this.storeObj.getProxy().url = '/tables/stucture/' + table.data.name;
this.storeObj.load();
this.update();
}
In the Tables store I have table descriptors, with some basic data like name, etc. and the list with table names displays the content of this store. So I look up the Tables store and get the tabledescriptor and pass it to the view, which then loads the store('Columns' in this case) with the data it will display. And all this works fine until I switch tabs. After changing the active tab and then changing back data is not refreshed on clicking on another table's name and I get this: Uncaught TypeError: Cannot call method 'removeChild' of null. It seems that it can't load the store anymore after changing the active tab. I found this issue on forums but I couldn't find a solution for it.
Do you have any ideas?
Thanks for your time.
Edit:
Ext.define('App.view.Table.Structure', {
extend: 'Ext.grid.Panel',
alias: 'widget.structure',
store: 'Columns',
width: 800,
storeObj: undefined,
initComponent: function () {
this.columns = [{
header: 'Column name',
dataIndex: 'name',
flex: 1
}, {
header: 'Position',
dataIndex: 'position',
flex: 1
}, {
header: 'Default value',
dataIndex: 'defaultValue',
flex: 1
}, {
header: 'Column type',
dataIndex: 'type',
flex: 1
}, ];
this.storeObj = Ext.StoreManager.lookup('Columns');
this.callParent(arguments);
}

Well I managed to solve it at last, but I don't really understand why this solved the problem. So this is what I did:
Every time I needed to update the Columns store(or the others) I looked it up
instead of just looking it up in the initcomponent.
Instead of calling update() method I called reconfigure()
Now it works like charm, but I don't see why update didn't do the trick and why I had to look up the store every time I wanted to call load() on it... So if someone could explain it I would be thankful.

Mixing configuration objects and Ext.create defined objects creates unclickable panel

If I have an application which contains panels created with Ext.create, and those panels have items which are created with both Ext.create and configuration objects, I get a panel whose interface is completely unclickable and doesn't respond to any interaction.
I've create a sample JSFiddle which illustrates the issue. Click the "TEST" button to see an example of this failure.

You can't do component creation at class definition time. That is, using Ext.create directly inside config object of Ext.define:
Ext.define('App.views.Panel1', {
id:'panel1',
extend:'Ext.Panel',
config:{
title: 'test',
layout:'card',
items:[
{
items:[
{
xtype: 'button',
text: 'TEST',
handler:function(){
Ext.getCmp('panel1').setActiveItem(Ext.getCmp('panel2'));
}
}
]
},
// not good
Ext.create('App.views.Panel2', {id:'panel2'})
]
}
});
Even if this would work, it would result in all instances of Panel1 sharing one Panel2 instance.
Instead you should do your component creation at initialization time:
Ext.define('App.views.Panel1', {
id:'panel1',
extend:'Ext.Panel',
config:{
title: 'test',
layout:'card',
items:[
{
items:[
{
xtype: 'button',
text: 'TEST',
handler:function(){
Ext.getCmp('panel1').setActiveItem(Ext.getCmp('panel2'));
}
}
]
}
]
},
initialize: function() {
this.add(Ext.create('App.views.Panel2', {id:'panel2'}));
this.callParent();
}
});
The initialize method is a good place to do any kind of extra work you want to do every time you create an instance of your component class. callParent is there because we override initialize of a parent class which might have some of its own logic in there which we want to keep.

ExtJS: share store between grid and chart

I'm writing a simple application storing and displaying timestamped messages. Messages are JSON objects containing, say 2 main fields like:
{
"emitted": "2011-12-08 12:00:00",
"message": "This is message #666"
}
I have a model to describe these messages:
Ext.define('Message', {
extend: 'Ext.data.Model',
fields: [
{ name: 'emitted', type: 'date' },
{ name: 'message', type: 'string' }
]
});
I have no problem displaying these messages in a grid. However, i would now like to display these messages in a chart. For instance, I would be able to grab numbers (like the #666 in the above example) and display a line chart.
Ideally, i don't want to create a new store for the chart, i would like to reuse the same message store, but apply a filter on the fields to grab the proper value. I don't know, something that might look like:
var chart = {
xtype: 'chart',
...
series: [{
type: 'line',
axis: ['left', 'bottom'],
xField: 'emitted',
yField: {fieldName:'message', fieldGrabber: function(v) {
new RegExp("This is message #(\d+)$", "g").exec(v)[1]
}}
}]
};
Does this kind of thing is possible in ExtJS ?
I just tried to explain what I'm trying to do, i have no idea where to find such a feature: in the chart class, in the store class, or using a kind pf proxy to the store.
Side note:
I cannot ask the data to be properly formatted to the server. The messages I receive are not backed up anywhere, they are just live events streamed to the client via socketIO.
Any advices greatly appreciated!

You should extract the value inside you model to a separate field:
Ext.define('Message', {
extend: 'Ext.data.Model',
fields: [
{ name: 'emitted', type: 'date' },
{ name: 'message', type: 'string' },
{ name: 'nr', convert: function(v, r){
return r.get('message').replace(/^.*#/, '');
} }
]
});
Or you might be better off just having the 'nr' field and using a renderer in Grid that displays it as "This is message #{nr}".
Then you can use the 'nr' field directly in you chart.

I switched to Highcharts and threw ExtJS out to the trash :P