Ext.Button not click/tappable and page scrolling down

[NMFord]

Hi,

I'm still a novice learning the framework and in the process of building my first app.

I have a few immediate issues that I've run into and was wondering if someone could provide some guidance or advice.

Here are the issues I am having.
The button on my toolbar on my index page isn't even clickable.
When viewing the page on my phone it scrolls down and I can't even see the top toolbar.
There is a error in the safari debug console sencha-touch-debug.js:20820 (http://localhost:8888/sencha/lib/touch/sencha-touch-debug.js)
TypeError: 'undefined' is not an object (evaluating 'config.isComponent')
Here is my code, I also have a view setup for the 'information' page but haven't included the code in here, it's the same as the code for the index view except the button goes back to the index, was just trying to setup something very simple to start with to see if I could get the basics working:

I would really appreciate any help!

App.js

var App = new Ext.Application({
name: 'BioGene',
useLoadMask: true,

launch: function () {
Ext.dispatch({
controller: BioGene.controllers.bioGeneController,
action: 'index'
});
}
});

My Controller:


Ext.regController('BioGeneController', {

'index': function (options) {

if (!BioGene.views.mainView) {
BioGene.views.mainView = new BioGene.views.MainView();
}

BioGene.views.mainView.setActiveItem(
BioGene.views.SearchIndexView
);
},

'information': function (options) {

if (!BioGene.views.mainView) {
BioGene.views.mainView = new BioGene.views.MainView();
}

BioGene.views.mainView.setActiveItem(
BioGene.views.InformationView
);
}

});


BioGene.controllers.bioGeneController = Ext.ControllerManager.get('BioGeneController');

MainView.js

BioGene.views.MainView = Ext.extend(Ext.Panel, { fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function () {


Ext.apply(BioGene.views, {
searchIndexView: new BioGene.views.SearchIndexView(),
informationView: new BioGene.views.InformationView()
});

this.items = [
BioGene.views.searchIndexView,
BioGene.views.informationView
]


BioGene.views.MainView.superclass.initComponent.call(this);

}
});

SearchIndexView:

BioGene.views.SearchIndexView = Ext.extend(Ext.Panel, { layout: 'fit',
initComponent: function () {


this.infoButton = new Ext.Button({
text: 'Information',
ui: 'normal',
handler: this.onInfoTap,
scope: this
});


this.topToolbar = new Ext.Toolbar({
title: 'Search',
layout: 'hbox',
items: [
this.infoButton
]
});


this.dockedItems = [this.topToolbar];


BioGene.views.SearchIndexView.superclass.initComponent.call(this);
},


onInfoTap: function () {
Ext.dispatch({
controller: BioGene.controllers.bioGeneController,
action: 'information'
});
}

});

[mitchellsimoens]

Just by looking at it it looks good. I tried to recreate your UI outside of your code to test to make sure it works and it does, which isn't surprising me.


new Ext.Panel({
fullscreen : true,
layout : 'card',
cardSwitchAnimation : 'slide',
items : [
{
xtype : 'panel',
layout : 'fit',
dockedItems : [
{
xtype : 'toolbar',
title : 'Search',
items : [
{
text : 'Information',
ui : 'normal',
handler : function() {
console.log('hi');
}
}
]
}
]
}
]
});

[NMFord]

Just by looking at it it looks good. I tried to recreate your UI outside of your code to test to make sure it works and it does, which isn't surprising me.

I zipped up my structure for you so you can take a better look (sans sencha files)

http://finite-element.com/sencha.zip

[NMFord]

No worries, I fixed it :)

I followed the call stack in the javascript debugging console and found I had capitalised something in the wrong place!