Сенча Touch TabBar + навигация по страницам. Почему это ломается? - PullRequest
Новая
       31

Сенча Touch TabBar + навигация по страницам. Почему это ломается?

0 голосов
/ 28 ноября 2011

Я новичок для SenchaTouch. Я начал работать над приложением, и результаты до сих пор таковы: http://mobz.com.br:86. (на основе демонстрации Sencha-Touch-tabs-and -barsbars-demo )

Теперь я начал играть с ним, и у меня возникли трудности с установлением ситуации в моей голове. У меня большой опыт работы с JQuery, но что касается дизайна этой библиотеки, монета еще не выпала.

Я получил TabPanel с 5 разделами. Я сосредоточусь только на одном разделе, потому что там, где моя проблема.

Проблема

Как вы можете видеть в моем приложении , когда кто-то нажимает на элемент ingressos (тикеты на английском языке), приложение загружает вторую панель, но загружает ее с ошибками.

Он загружается без строки заголовка, без кнопки «Назад», а также добавляет пустую шестую кнопку справа.

Но если я сначала загружаю вторую панель, то при загрузке страницы она загружается без проблем с пользовательским интерфейсом.

Мой код

Сначала я объявляю свой ViewPort 

Mobz.views.Viewport = Ext.extend(Ext.TabPanel, {
    fullscreen: true,
    initComponent: function() {
        Ext.apply(this, {
            tabBar: {
                dock: 'bottom',
                layout: {
                    pack: 'center'
                }
            },
            items: [
                { xtype: 'destaques', id: 'home' },
                { xtype: 'ingressos' },
                { xtype: 'mobilizacoes' },
                { xtype: 'locais' },
                { xtype: 'minhaconta' }
            ]
        });
        Mobz.views.Viewport.superclass.initComponent.apply(this, arguments);
    }
});

Затем, в файле ingressos.js , я определяю вкладку .

Сначала я получил панель для загрузки предметов в нее. 

Mobz.views.Ingressos = Ext.extend(Ext.Panel, {
    id: "ingressos",
    title: "Ingressos", //title of the page
    iconCls: "arrow_right", // icon of the tab at the bottom
    styleHtmlContent: true,
    fullscreen: true,
    layout: 'card',
    initComponent: function () {
        Ext.apply(this, {
            dockedItems: [{
                xtype: "toolbar",
                title: "Ingressos"
            }],
            items: [Mobz.views.IngressosList]
        });
        Mobz.views.Ingressos.superclass.initComponent.apply(this, arguments);
    }
});
Ext.reg('ingressos', Mobz.views.Ingressos);

Это начальный элемент , который загружается в панель. 

Mobz.views.IngressosList = new Ext.List({
    id: 'ingressoslist',
    itemTpl: IngressosList_Template,
    store: Mobz.stores.IngressosStore,
    onItemTap: function (subIdx) {
        //Mobz.views.IngressoCinemaList.update(subIdx);
        Mobz.views.viewport.setActiveItem(Mobz.views.IngressoCinemaList, { type: 'slide', direction: 'left' });
    }
});

И это вторая панель.

Панель, к которой относится первая панель. 

Mobz.views.IngressoTitle = new Ext.Panel({
    id: 'ingressotitle',
    tpl: IngressoTitle_Template,
    data: Mobz.stores.IngressoTitle_Store
});
Mobz.views.IngressoCinemaList = new Ext.List({
    id: 'ingressocinemalist',
    itemTpl: IngressoCinemaList_Template,
    store: Mobz.stores.IngressoCinemaListStore,
    flex: 1, grouped: true,
    dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text: 'Back',
                ui: 'back',
                handler: function () {
                    Mobz.views.viewport.setActiveItem(Mobz.ingressos, { type: 'slide', direction: 'right' });
                }
            }]
        }
    ],
    onItemDisclosure: function () {
        app.views.viewport.setActiveItem(Mobz.views.IngressosHorario, { type: 'slide', direction: 'left' });
    }
});
Mobz.views.Ingresso = new Ext.Panel({
    id: 'ingresso',
    layout: {
        type: 'vbox',
        align: 'fit'
    },
    items: [Mobz.views.IngressoHorario_IngressoECinemaTitles, Mobz.views.IngressoCinemaList]
});

Вот и все.

Я надеюсь, что некоторые из вас, ребята, попросят пациента прочитать все мои примеры кода. Я буду признателен за любую помощь.

Шломи.

1 Ответ

2 голосов
/ 29 ноября 2011

Во-первых, вы должны понять логику о панелях.

У вас есть TabPanel и 5 панелей. Если вы запускаете свой код, когда нажимаете тикет, как описано в проблеме, ваш код добавляет новую панель в TabPanel. Но вам нужно установить активный элемент панели Ingression (вторая панель находится в tabPanel).

Теперь запустите решение;

На второй вкладке есть панель (скажем, senchaTabItem), макет которой - макет карты. И эта панель имеет панель со списком Ingressos. Мы хотим удалить эту панель и заменить новую панель, чтобы не вызывать метод tabPanel, а вызывать метод senchaTabItem.

Так что если вы замените код ниже 

Mobz.views.viewport.setActiveItem(Mobz.views.IngressoCinemaList, { type: 'slide', direction: 'left' });

с рабочим кодом (код ниже). 

Mobz.views.viewport.getActiveItem().setActiveItem(Mobz.views.IngressoCinemaList, { type: 'slide', direction: 'left' });

На вашем сайте; он находится на линии 170 в ingressos.js

Я пытался, и это работает, я надеюсь, что это помогает

...