View works fine in OS X Safari but has problems on iPhone

[NMFord]

Hey guys,

I am having problems with one of my views. The toolbar docked to the bottom when you are viewing an item's references sometimes appears greyed out. The strange thing is, the buttons that should be there if you could see it still work. So it's as if the toolbar is there but just not rendering correctly. There is some strange behavior going on so I'm pretty sure I've done something wrong with my code.

(Works fine in Safari and Chrome on my laptop, the issue is only present when I move to the phone making it hard for me to debug it quickly).

EDIT: Also works fine on android phones!

You can see it in action here (enter CDK1 into the search box and click the references tab to see the problem)
http://finite-element.com/sencha/index.html

Here is the code for the view:

BioGene.views.GeneView = Ext.extend(Ext.TabPanel, {
scroll: 'vertical',
readIntoView: function () {
var rifArray = BioGene.views.geneView.rifArray;
var refPaging = BioGene.views.geneView.refPaging;
pagedRifArray = new Array();
var start = BioGene.views.geneView.refPaging.start - 1;
for (var i = start; i < BioGene.views.geneView.refPaging.end; i++) {
pagedRifArray.push(rifArray[i]);
}
BioGene.stores.geneRifStore.proxy.data = pagedRifArray;
BioGene.stores.geneRifStore.load();
var title = refPaging.start+' - '+refPaging.end+' of '+rifArray.length;
BioGene.views.geneView.pagingBar.setTitle(title);
if (refPaging.page > 1) {
BioGene.views.geneView.prevButton.setVisible(true);
}
else {
BioGene.views.geneView.prevButton.setVisible(false);
}
if ((refPaging.page*getCookie("bg_references")) < rifArray.length) {
BioGene.views.geneView.nextButton.setVisible(true);
}
else {
BioGene.views.geneView.nextButton.setVisible(false);
}
BioGene.views.geneView.doComponentLayout();
},
initComponent: function () {

this.refPaging = new Array();
this.rifArray = new Array();

this.nextButton = new Ext.Button({
iconCls: 'arrow_right',
iconMask: true,
hidden: true,
handler: function () {
BioGene.views.geneView.refPaging.page = BioGene.views.geneView.refPaging.page + 1;
BioGene.views.geneView.refPaging.start = ((BioGene.views.geneView.refPaging.page * getCookie("bg_references")) - getCookie("bg_references"))+1;
BioGene.views.geneView.refPaging.end = BioGene.views.geneView.refPaging.page * getCookie("bg_references");
if (BioGene.views.geneView.refPaging.end > BioGene.views.geneView.rifArray.length) {
BioGene.views.geneView.refPaging.end = BioGene.views.geneView.rifArray.length;
}
BioGene.views.geneView.readIntoView()
},
scope: this
});

this.prevButton = new Ext.Button({
iconCls: 'arrow_left',
iconMask: true,
hidden: true,
handler: function () {
BioGene.views.geneView.refPaging.page = BioGene.views.geneView.refPaging.page - 1;
BioGene.views.geneView.refPaging.start = ((BioGene.views.geneView.refPaging.page * getCookie("bg_references")) - getCookie("bg_references"))+1;
BioGene.views.geneView.refPaging.end = BioGene.views.geneView.refPaging.page * getCookie("bg_references");
if (BioGene.views.geneView.refPaging.end > BioGene.views.geneView.rifArray.length) {
BioGene.views.geneView.refPaging.end = BioGene.views.geneView.rifArray.length;
}
BioGene.views.geneView.readIntoView()
},
scope: this
});

this.backButton = new Ext.Button({
text: 'Results',
ui: 'back',
handler: function () {
Ext.dispatch({
controller: BioGene.controllers.bioGeneController,
action: 'backToSearch',
slideDirection: 'right'
});
},
scope: this
});

this.searchButton = new Ext.Button({
text: 'Search',
ui: 'back',
handler: function () {
Ext.dispatch({
controller: BioGene.controllers.bioGeneController,
action: 'index',
slideDirection: 'right'
});
},
scope: this
});

this.topToolbar = new Ext.Toolbar({
title: 'Gene Display',
items: [
this.backButton,
this.searchButton
]
});

this.pagingBar = new Ext.Toolbar({
title: '1-10 of 50',
dock: 'bottom',
defaults: {
ui: 'plain'
},
items: [
this.prevButton,
{ xtype: 'spacer' },
this.nextButton
],
hidden: true
});

this.geneTab = new Ext.Panel({
title: 'Gene',
scroll: 'vertical',
styleHtmlContent: true,
tpl: new Ext.XTemplate(
'<b>Official Symbol:</b> {gene_symbol}<br />',
'<b>Name:</b> {gene_description}<br />',
'<b>Aliases:</b> {gene_aliases}<br />',
'<b>Organism:</b> {gene_organism}<br />',
'<b>Other Designations:</b> {gene_designations}<br />',
'<b>Chromosome:</b> {gene_chromosome}<br />',
'<b>Location:</b> {gene_location}<br />',
'<b>MIM:</b> {gene_mim}<br />',
'<b>GeneID:</b> {gene_id}'
),
listeners:{
activate: function(cmp) {
if(BioGene.views.geneView.pagingBar.hidden == false) {
BioGene.views.geneView.pagingBar.setVisible(false);
BioGene.views.geneView.doComponentLayout();
}
}
}
});

this.functionTab = new Ext.Panel({
title: 'Function',
styleHtmlContent: true,
scroll: 'vertical',
tpl: new Ext.XTemplate(
'{gene_summary}'
),
listeners:{
activate: function(cmp) {
if(BioGene.views.geneView.pagingBar.hidden == false) {
BioGene.views.geneView.pagingBar.setVisible(false);
BioGene.views.geneView.doComponentLayout();
}
}
}
});

this.referencesTab = new Ext.List({
title: 'References',
id: "refList",
singleSelect: false,
scroll: 'vertical',
styleHtmlContent: true,
store: BioGene.stores.geneRifStore,
itemTpl: new Ext.XTemplate(
'<tpl for=".">{rif} [<a href="#" id="{pubmed_id}" class="abClick" onclick="return false;">Abstract</a>]<br/><br/></tpl>'
),
itemSelector:'a.abClick',
listeners:{
'itemtap': function(dataview, index, item, e){
alert("roar");
},
activate: function(cmp) {
BioGene.views.geneView.pagingBar.setVisible(true);
BioGene.views.geneView.doComponentLayout();
}
}
});

this.items = [this.geneTab,this.functionTab,this.referencesTab];

this.dockedItems = [this.topToolbar,this.pagingBar];

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

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

});

[NMFord]

I tried rewriting the code in a different manner but it still exhibited similar issues, (toolbar wasn't visible on the phone in its correct place yet was still functional, although sometimes the bar rendered at the top of the screen but the buttons were interacted with using the grey area at the bottom where it was supposed to be)

Yet again it worked perfectly in Safari and Chrome on my laptop.

Frustrating!


BioGene.views.GeneView = Ext.extend(Ext.TabPanel, {
scroll: 'vertical',
readIntoView: function () {
if (BioGene.views.geneView.pagingBar)
{
BioGene.views.geneView.dockedItems.remove(BioGene.views.geneView.pagingBar);
BioGene.views.geneView.pagingBar.destroy();
}
var rifArray = BioGene.views.geneView.rifArray;
var refPaging = BioGene.views.geneView.refPaging;
pagedRifArray = new Array();
var start = BioGene.views.geneView.refPaging.start - 1;
for (var i = start; i < BioGene.views.geneView.refPaging.end; i++) {
pagedRifArray.push(rifArray[i]);
}
BioGene.stores.geneRifStore.proxy.data = pagedRifArray;
BioGene.stores.geneRifStore.load();
var title = refPaging.start+' - '+refPaging.end+' of '+rifArray.length;

if (refPaging.page > 1) {
this.prevButton = new Ext.Button({
iconCls: 'arrow_left',
iconMask: true,
handler: function () {
BioGene.views.geneView.refPaging.page = BioGene.views.geneView.refPaging.page - 1;
BioGene.views.geneView.refPaging.start = ((BioGene.views.geneView.refPaging.page * getCookie("bg_references")) - getCookie("bg_references"))+1;
BioGene.views.geneView.refPaging.end = BioGene.views.geneView.refPaging.page * getCookie("bg_references");
if (BioGene.views.geneView.refPaging.end > BioGene.views.geneView.rifArray.length) {
BioGene.views.geneView.refPaging.end = BioGene.views.geneView.rifArray.length;
}
BioGene.views.geneView.readIntoView();
},
scope: this
});
}
else {
this.prevButton = new Ext.Button({
iconCls: 'arrow_left',
iconMask: false,
scope: this
});
}
if ((refPaging.page*getCookie("bg_references")) < rifArray.length) {
this.nextButton = new Ext.Button({
iconCls: 'arrow_right',
iconMask: true,
handler: function () {
BioGene.views.geneView.refPaging.page = BioGene.views.geneView.refPaging.page + 1;
BioGene.views.geneView.refPaging.start = ((BioGene.views.geneView.refPaging.page * getCookie("bg_references")) - getCookie("bg_references"))+1;
BioGene.views.geneView.refPaging.end = BioGene.views.geneView.refPaging.page * getCookie("bg_references");
if (BioGene.views.geneView.refPaging.end > BioGene.views.geneView.rifArray.length) {
BioGene.views.geneView.refPaging.end = BioGene.views.geneView.rifArray.length;
}
BioGene.views.geneView.readIntoView();
},
scope: this
});
}
else {
this.nextButton = new Ext.Button({
iconCls: 'arrow_right',
iconMask: false,
scope: this
});
}
this.pagingBar = new Ext.Toolbar({
title: title,
dock: 'bottom',
defaults: {
ui: 'plain'
},
items: [
this.prevButton,
{ xtype: 'spacer' },
this.nextButton
]
});
BioGene.views.geneView.dockedItems.add(this.pagingBar);
BioGene.views.geneView.doComponentLayout();
},
initComponent: function () {

this.refPaging = new Array();
this.rifArray = new Array();

this.backButton = new Ext.Button({
text: 'Results',
ui: 'back',
handler: function () {
Ext.dispatch({
controller: BioGene.controllers.bioGeneController,
action: 'backToSearch',
slideDirection: 'right'
});
},
scope: this
});

this.searchButton = new Ext.Button({
text: 'Search',
ui: 'back',
handler: function () {
Ext.dispatch({
controller: BioGene.controllers.bioGeneController,
action: 'index',
slideDirection: 'right'
});
},
scope: this
});

this.topToolbar = new Ext.Toolbar({
title: 'Gene Display',
items: [
this.backButton,
this.searchButton
]
});

this.geneTab = new Ext.Panel({
title: 'Gene',
scroll: 'vertical',
styleHtmlContent: true,
tpl: new Ext.XTemplate(
'<b>Official Symbol:</b> {gene_symbol}<br />',
'<b>Name:</b> {gene_description}<br />',
'<b>Aliases:</b> {gene_aliases}<br />',
'<b>Organism:</b> {gene_organism}<br />',
'<b>Other Designations:</b> {gene_designations}<br />',
'<b>Chromosome:</b> {gene_chromosome}<br />',
'<b>Location:</b> {gene_location}<br />',
'<b>MIM:</b> {gene_mim}<br />',
'<b>GeneID:</b> {gene_id}'
),
listeners:{
activate: function(cmp) {
if (BioGene.views.geneView.pagingBar)
{
BioGene.views.geneView.dockedItems.remove(BioGene.views.geneView.pagingBar);
BioGene.views.geneView.pagingBar.destroy();
}
}
}
});

this.functionTab = new Ext.Panel({
title: 'Function',
styleHtmlContent: true,
scroll: 'vertical',
tpl: new Ext.XTemplate(
'{gene_summary}'
),
listeners:{
activate: function(cmp) {
if (BioGene.views.geneView.pagingBar)
{
BioGene.views.geneView.dockedItems.remove(BioGene.views.geneView.pagingBar);
BioGene.views.geneView.pagingBar.destroy();
}
}
}
});

this.referencesTab = new Ext.List({
title: 'References',
id: "refList",
singleSelect: false,
scroll: 'vertical',
styleHtmlContent: true,
store: BioGene.stores.geneRifStore,
itemTpl: new Ext.XTemplate(
'<tpl for=".">{rif} [<a href="#" id="{pubmed_id}" class="abClick" onclick="return false;">Abstract</a>]<br/><br/></tpl>'
),
itemSelector:'a.abClick',
listeners:{
'itemtap': function(dataview, index, item, e){
alert("roar");
},
activate: function(cmp) {
BioGene.views.geneView.readIntoView();
}
}
});

this.items = [this.geneTab,this.functionTab,this.referencesTab];

this.dockedItems = [this.topToolbar];

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

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

});

[NMFord]

Just tested it on my Android too, it works fine on Android phones in addition to the laptop browsers but is buggy on the iPhone,

Does anyone have any idea why?