дисплей с сенсорным сенча - PullRequest
Новая
       18

дисплей с сенсорным сенча

0 голосов
/ 02 мая 2011

Я новичок в 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);

1 Ответ

1 голос
/ 03 мая 2011

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

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

В ViewPort.js вам необходимо добавить свойство 'text' к элементам, чтобы на вкладке был правильный текст. 

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

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

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

...