Sencha Touch ViewPort проблема рендеринга на вкладке
У меня полнофункциональное приложение Sencha Touc 2.1.1 в комплекте с Phonegap 2.5. В нем у меня есть несколько списков, которые я использую для создания панелей форм для ввода данных и других различных действий.
Один из примеров выглядит следующим образом (это происходит на всех моих панелях форм, которые открываются при нажатии на список):
У меня есть список с шаблоном элемента, который отображается в этом контейнере:
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');
}
});
Список:
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
}
});
И форма, которая открывается при нажатии на адрес, отображаемый в itemTpl:
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'
}
]
}
});
Это называется ViewPort через следующий метод в моем контроллере:
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);
}
Обычно это работает как ожидалось:
- Открыть просмотр Push
- Нажмите на адрес в списке
- PushForm открывается для пользователя, чтобы сделать их Thang.
Тем не мение! Иногда, когда пользователь нажимает на адрес, вместо открытия PushForm под адресом в списке появляется черная стрелка (см. Прикрепленное изображение).
,
Когда это произойдет, непредсказуемо, но это происходит. До сих пор это происходило только на моем Android-устройстве, а не на эмуляторе или в веб-браузере (пока я не слышал об этом ни от одного из моих пользователей iOS).
Примечание. Единственный способ заставить приложение работать "нормально" снова - это выполнить полный перезапуск или принудительное закрытие приложения.
Есть идеи, что вызывает это? Grazie!!