Sencha Touch ViewPort rendering issue onTap - list

Question

I have a fully functional Sencha Touc 2.1.1 app bundled in Phonegap 2.5. In it, I have several lists that I use to spawn form panels for data entry and other sundry activities.
An example one is as follows (it happens on all my form panels that get opened via a list tap):
I have a list with an item template is rendered in this container:
Ext.define('EvaluateIt.view.Push', {
extend: 'Ext.Container',
fullscreen: true,
//requires: ['Ext.TitleBar'],
alias: 'widget.pushview',
config: {
layout: 'vbox',
layout: 'fit',
//id: 'pushview',
items: [
{
xtype: 'toolbar',
docked: 'top',
items: [
{
xtype: 'button',
itemId: 'loginButton',
text: 'Login',
iconCls: 'arrow_right',
iconMask: true
},
{
xtype: 'button',
itemId: 'logOutButton',
text: 'Logout',
iconCls: 'arrow_right',
iconMask: true
}
]
},
{
flex: 1,
xtype: 'pushList'
}
],
listeners: [{
delegate: '#logOutButton',
event: 'tap',
fn: 'onLogOutButtonTap'
}]
},
onLogOutButtonTap: function () {
this.fireEvent('onSignOffCommand');
}
});
The list is:
Ext.define('EvaluateIt.view.PushList', {
extend: 'Ext.dataview.List', //'Ext.tab.Panel',
alias : 'widget.pushList',
config: {
width: Ext.os.deviceType == 'Phone' ? null : 300,
height: Ext.os.deviceType == 'Phone' ? null : 500,
xtype: 'list',
store: 'SiteEvaluations', //getRange(0, 9),
itemTpl: [
'<div><strong>Address: {address}</strong></div> '
],
variableHeights: false
}
});
And the form that is opened on tapping an address rendered in the itemTpl is:
Ext.define('EvaluateIt.view.PushForm', {
extend: 'Ext.form.Panel',
alias : 'widget.pushForm',
requires: [
'Ext.form.Panel',
'Ext.form.FieldSet',
'Ext.field.Number',
'Ext.field.DatePicker',
'Ext.field.Select',
'Ext.field.Hidden'
],
config: {
// We give it a left and top property to make it floating by default
left: 0,
top: 0,
// Make it modal so you can click the mask to hide the overlay
modal: true,
hideOnMaskTap: true,
// Set the width and height of the panel
//width: 400,
//height: 330,
width: Ext.os.deviceType == 'Phone' ? screen.width : 350,
height: Ext.os.deviceType == 'Phone' ? screen.height : 500,
scrollable: true,
layout: {
type: 'vbox'
},
defaults: {
margin: '0 0 5 0',
labelWidth: '40%',
labelWrap: true
},
items: [
{
xtype: 'textfield',
name: 'address',
readOnly: true
},
/*{
xtype: 'checkboxfield',
id: 'addImage',
label: 'Upload Image'
},*/
{
xtype: 'button',
itemId: 'save',
text: 'Push to server'
}
]
}
});
This is called as a ViewPort via the following method in my controller:
onSelectPush: function(view, index, target, record, event) {
console.log('Selected a SiteEvaluation from the list');
var pushForm = Ext.Viewport.down('pushForm');
if(!pushForm){
pushForm = Ext.widget('pushForm');
}
pushForm.setRecord(record);
pushForm.showBy(target);
console.log('Selected a Push from the list ' + index + ' ' + record.data.address);
}
This usually works as expected:
Open Push view
Tap on address in list
PushForm opens for user to do their thang.
However! Occasionally, when the user taps on the address, instead of the PushForm opening a black arrow shows up underneath the address in the list (see attached image)
.
It is unpredictable when this will happen, but it does. So far, its only happened on my Android device, not on an emulator or in a Web browser (I have not yet heard from any of my iOS users about this yet).
Note: The only way to get the app to function "normally" again is to either do a complete restart or a force close of the application.
Any ideas what is causing it? Grazie!!