私は過去2週間にわたってsenchatouch2.0を学んでいて、2つの問題に遭遇しました。私がやりたいのは、ページに静的なトップバーとボトムバーを配置し、下部のドックに配置されたボタンで動的なコンテンツを制御できるようにすることです。私はこれを私が望むように機能させるために4時間を費やしました、私はほとんどそこにいますが、私は少しのガイダンスが必要です。
私の最初の問題は、静的なトップドックに画像を追加したいということです。別の形式で提案されたコードは機能しません。
var topBar = new Ext.BoxComponent(
{
xtype: 'box',
autoEl: {tag: 'img', src:'/resources/icons/icon.png'}
}
)
このコードではエラーは発生しませんが、必要な画像も表示されません。画像は60x30ピクセルです
私が抱えている2番目の問題は、ユーザーがアイコンをクリックするとページが変更されて新しいページが表示されるように、下部のドックにアイコンを追加したいということです。下部のドックにあるアイコンの1つにリンクしたい、3つのフィールドがあるフォームがあるので、アイコンをクリックするとフォームが表示されます。完全なコードは次のとおりです。
Ext.setup({
phoneStartupScreen : 'resources/images/icon.png',
icon : 'resources/images/Homescreen.png',
glossOnIcon : false,
onReady : function() {
var topBar = new Ext.BoxComponent(
{
xtype: 'box',
autoEl: {tag: 'img', src:'/resources/icons/icon.png'}
}
)
var tapHandler = function (btn, evt) {
alert("Button '" + btn.text + "' tapped.");
}
var form = new Ext.form.FormPanel({
items:
[
{
xtype: "textfield",
name: "name",
label: "Name",
placeHolder: "your name here"
},
{
xtype: "emailfield",
name: "email",
label: "Email",
placeHolder: "you@example.com"
},
{
xtype: "urlfield",
name: "url",
label: "Url",
placeHolder: "http://www.example.com"
}
]
})
var searchPageContent ={
html:'This is a test for search page'
}
var userPageContent ={
html:'This is a test for user page'
}
var dockedItems = [
{
xtype : 'toolbar',
dock : 'top',
items : topBar
},
{
xtype: "toolbar",
dock: "bottom",
items: [
{
xtype: 'spacer'
},
{
iconMask: true,
iconCls: "favorites",
items: form
},
{
xtype: 'spacer'
},
{
iconMask: true,
iconCls: "search",
items: searchPageContent
},
{
xtype: 'spacer'
},
{
iconMask: true,
iconCls: "user",
items: userPageContent
},
{
xtype: 'spacer'
},
]
}
]
new Ext.Panel({
id : 'buttonsPanel',
fullscreen : true,
dockedItems : dockedItems
});
}
});
前述のように、静的な上部バーと下部バーを作成できましたが、画像が上部バーで機能しません。これが最初の問題であり、3つのボタンのいずれかをクリックしても何も起こりません。お気に入りボタンをクリックしたときにフォームを表示したいのですが、何も起こりません。どこが間違っているのですか?
ありがとうございました