Phonegap 2.5 に完全に機能する Sencha Touc 2.1.1 アプリがバンドルされています。その中には、データ入力やその他のさまざまなアクティビティ用のフォーム パネルを生成するために使用するリストがいくつかあります。
例は次のとおりです（リストタップで開かれるすべてのフォームパネルで発生します）：
このコンテナーでレンダリングされる項目テンプレートを含むリストがあります。
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);
}
これは通常、期待どおりに機能します。
- プッシュ ビューを開く
- リスト内のアドレスをタップ
- PushForm が開き、ユーザーが感謝を表します。
でも！ユーザーがアドレスをタップすると、PushForm が開く代わりに、リストのアドレスの下に黒い矢印が表示されることがあります (添付の画像を参照)。
.
これがいつ起こるかは予測できませんが、起こります。これまでのところ、エミュレーターや Web ブラウザーではなく、私の Android デバイスでのみ発生しました (これについて iOS ユーザーからまだ聞いていません)。
注: アプリを再び「正常に」機能させる唯一の方法は、完全に再起動するか、アプリケーションを強制終了することです。
何が原因なのですか？グラツィエ!!