extjs 4 MVC - form is undefined - forms

Question

I'm using EXT.JS 4 with MVC.
I have a view and a controller declared as below:
view/company/MarketData.js
Ext.define('Market.view.company.MarketData', {
extend: 'Ext.form.Panel',
requires: ['Market.store.HistoricalMarketData'],
store:'HistoricalMarketData',
xtype: 'companyMarketData',
initComponent: function() {
this.callParent();
},
items: [{
xtype:'fieldset',
columnWidth: 0.5,
border:true,
padding:5,
//disabled:true,
collapsible: false,
defaultType: 'textfield',
defaults: {anchor: '100%'},
layout: 'anchor',
items :[{
fieldLabel: 'Time',
//xtype: 'displayfield',
name: 'time',
readOnly:true
}, {
fieldLabel: 'Open',
//xtype: 'displayfield',
name: 'open'
}, {
fieldLabel: 'High',
//xtype: 'displayfield',
name: 'high'
}, {
fieldLabel: 'Low',
//xtype: 'displayfield',
name: 'low'
}, {
fieldLabel: 'Close',
//xtype: 'displayfield',
name: 'close'
}, {
fieldLabel: 'Volume',
//xtype: 'displayfield',
name: 'volume'
}]
}]
});
view/controller/ChartController.js
Ext.define('Market.controller.ChartController', {
extend:'Ext.app.Controller',
stores:['HistoricalMarketData'],
models: ['MarketData'],
views: ['company.MarketData'],
init: function() {
this.control({
'#companyChartItemId series[type=column]': {
itemmouseup:this.onItemMouseUp
},
'#companyChartItemId': {
mouseenter:this.onMouseEnter
}
});
},
onItemMouseUp: function (item) {
//do something
},
onMouseEnter: function (e) {
var view = this.getCompanyMarketDataView();
var form = view.superclass.getForm();
var store = this.getHistoricalMarketDataStore();
var data = store.getAt(0);
form.loadRecord(data);
}
});
the problem is that onmouseenter event the form is undefined:
onMouseEnter: function (e) {
var view = this.getCompanyMarketDataView();
var form = view.superclass.getForm();
Any thoughts how can I recover the form from the view?

Answer 1

You can use Ext.ComponentQuery.query(), which returns an array of matching components.
For example
Ext.ComponentQuery.query('companyMarketData')[0].doSomething();
It is good practice to use itemIds for your components.
Also, did you try passing the default params to the onMouseEnter function?
You seem to be calling view.superclass.getForm(), but you are not passing the view param, which should be first in order. Instead, you are passing e.