PDA

View Full Version : Form panel rendering issue



horcle_buzz
15 Jul 2013, 6:56 PM
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');
}


});


My list looks like:


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'
}


]
}
});


Which 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)

44892


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!!

mitchellsimoens
18 Jul 2013, 3:30 AM
In your EvaluateIt.view.Push class, you do realize you have two layouts and last one wins so you only have fit layout:


layout: 'vbox',
layout: 'fit',

horcle_buzz
18 Jul 2013, 9:35 AM
Yeah, I saw that after I posted this. I removed the extraneous one.

Still: No one has any ideas as to what this issue with this problem could possibly be? (It definitely was not the two layouts)