2

私は過去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つのボタンのいずれかをクリックしても何も起こりません。お気に入りボタンをクリックしたときにフォームを表示したいのですが、何も起こりません。どこが間違っているのですか？

ありがとうございました

4

1 に答える 1

1

煎茶との数日間の格闘の後、私はほとんど私が望むものを持っている例を見つけたのでそれを修正しました、そしてそれは私が望むように正確にうまくいきました。これで、静的なトップバーとページアイコンのある静的なボトムバーができました。ページアイコンをクリックすると、メインコンテンツがスクロールし、新しいページが表示されます。

Ext.setup({
onReady: function() {

    var topBar = new Ext.BoxComponent({   
        layout: 'hbox',

        html:
               '<img src="resources/icons/icon.png" height="30", width="48"/>',
       flex: 1,
       style:{
           textAlign: 'center'  
       }
    })
    var dockedItems = [ 
       {
           //this creates the top bar, places it at the top of the page and gives it a background image
            xtype : 'toolbar',
            dock : 'top',
            style: 'background-image:url("resources/images/backgroundSmall.png"); background-repeat: repeat-x;',
            items : topBar

        }
    ]
    // Sub-page sections


    // Main portion of the page, which includes top toolbar and content
    var welcome = new Ext.Panel({
        items: [{
            html: 'this is the welcome screen'
        }],
        title: "Welcome",
        iconCls: "welcome",
    });
    var search = new Ext.Panel({
        items: [{
            html: 'this is the search screen'
        }],
        title: "Search",
        iconCls: "search",
    });


    // This is the outer panel with the bottom toolbar
    var wrapper = new Ext.TabPanel({
        fullscreen: true,
        tabBar: {
            dock: 'bottom',
            style: 'background:#8a9cB2;',
            layout: {
                pack: 'center'
            }
        },
        items: [
            welcome,
            search,
            {
                iconMask: true,
                iconCls: "search"
            },
            {
                iconMask: true,
                iconCls: "user"
            }
        ],
        dockedItems: dockedItems
    });
}

}）;

于 2012-05-10T12:59:25.707 に答える