дисплейная карта с сенсорным экраном сенча

Я новичок в sencha touch и видел все видеоподкасты, но до сих пор не понимаю, как «отобразить» панель с панели вкладок (панель сверху!) и как переключаться с панели на другую без какого-либо слайда или чего-то еще (просто отображать это пожалуйста!)

В пути есть еще кое-что, например, наличие предварительного загрузчика и получение данных из JSON, а затем отображение вложенного списка. Но пока я застрял в этом простом сценарии...

вот что у меня пока...

Это index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Sencha 3</title>
<script type="text/javascript" src="lib/touch/sencha-touch.js"></script>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="phonegap.js"></script>
<script src="app/app.js" type="text/javascript"></script>
<script src="app/views/startcard.js" type="text/javascript"></script>
<script src="app/views/secondcard.js" type="text/javascript"></script>
<script src="app/views/plain.js" type="text/javascript"></script>
<script src="app/views/Viewport.js" type="text/javascript"></script>
</head><body></body>

app.js

Testdemo = new Ext.Application({
name: "TestDemo",
launch: function() {                                            
    this.views.viewport = new this.views.Viewport();
    this.views.homecard = this.views.viewport.getComponent('startcard');
}
});

Viewport.js

TestDemo.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
initComponent: function() {
    Ext.apply(this, {
       tabBar: {
            dock: 'bottom',
            layout: {
                pack: 'center'
            }
        },
        items: [
            { xtype: 'startcard'},
            { xtype: 'secondcard'},
        ]
    });
    TestDemo.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});

startcard.js

myPrefs = function() {
    //here is the problem! How can I display the panel myPrefs??
    this.StartCard.setActiveItem('myPrefs', {type:'slide', direction:'down'});
}

refreshHome = function() {
alert("Refresh me!");
}

var somelist = new Ext.Component({
title: 'testline 1',
cls: 'info',
html: 'This is plain Text.<br />Some JSON-Data should be listed here...'

})


TestDemo.views.StartCard = Ext.extend(Ext.Panel, {
title: "TestDemo",
iconCls: "home",
styleHtmlContent: true,
scroll: 'vertical',
initComponent: function() {
Ext.apply(this, {
    dockedItems: [
        {
        xtype: 'toolbar',
        dock: 'top',
        title: 'Some Test App',
        items: [
                {
                    iconMask: true,
                    ui: 'plain',
                    iconCls: 'settings',
                    itemId: 'btnHomeMore',
                    title: 'Do I need a title???',
                    handler: myPrefs
                    },
                    {
                        xtype: 'spacer'
                    },
                    {
                        iconMask: true,
                        ui: 'plain',
                        iconCls: 'refresh',
                        itemId: 'btnRefreshMe',
                        title: 'Refresh, i guess',
                        handler: refreshHome
                    }
                ]
        }
        ],
    items: [
            {
                itemId: 'MyStartPage',
                html: 'This is just a test'
            }
            ]
    });
TestDemo.views.StartCard.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('startcard', TestDemo.views.StartCard);

viewport sencha-touch
person user734767    schedule 02.05.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Хорошо, из вашего описания не совсем понятно, в чем вопрос, поэтому я постараюсь помочь со всеми вашими пунктами.

С помощью TabBar вы «отображаете» панель, делая ее активной. По умолчанию отображается первый элемент.

В ViewPort.js вам нужно будет добавить свойство «текст» к элементам, чтобы вкладка имела правильный текст.

Ext.apply(this, {
   tabBar: {
        dock: 'bottom',
        layout: {
            pack: 'center'
        }
    },
    items: [
        { xtype: 'startcard', text: 'Start Card'},
        { xtype: 'secondcard', text: 'Second Card'},
    ]
});

Однако я нигде не вижу, чтобы ваш тип «второй карты» был определен, поэтому он может вызывать ошибку. Вы должны загрузить свою страницу в Chrome/Safari и посмотреть, отображаются ли какие-либо ошибки JS с помощью консоли разработчика. Эти ошибки будут препятствовать правильной работе компонентов.

Щелчок по кнопке для этой вкладки теперь переключит на эту карту, используя любую анимацию, которую вы настроили как «cardSwitchAnimation» для TabBar.

person mistagrooves    schedule 02.05.2011
comment
Я хотел бы запустить функцию myPrefs с каждой карты, но каждый раз получаю сообщение об ошибке. Так что это не работает: this.StartCard.setActiveItem('myPrefs', {type:'slide', direction:'down'}); - person user734767; 04.05.2011
comment
'myPrefs' не является допустимым параметром для этой функции. Вам нужно указать объект Ext.Panel, на который вы хотите переключиться. Например, функция должна иметь следующий формат: this.StartCard.setActiveItem(new Ext.Panel(), {...}) - person mistagrooves; 04.05.2011