Проблема расположения сенсорной карты Sencha - PullRequest
Новая
       0

Проблема расположения сенсорной карты Sencha

1 голос
/ 20 апреля 2011

Я пытаюсь создать сайт для iphone, используя sencha touch. Я новичок в сенче и доб.

Я хотел бы иметь макет с верхним и нижним колонтитулами. Его можно понимать как мастер-страницу с верхним и нижним колонтитулами, которая будет использоваться на каждой странице.

Верхний и нижний колонтитулы должны быть прокручиваемыми (не закрепленными!), И я хотел бы иметь анимацию между страницами.

Как правило, на веб-сайте будет располагаться заголовок, меню и нижний колонтитул. Если пользователь нажимает какую-либо кнопку в меню (например, «О»), страница должна сдвинуться вправо до страницы «О». Эта страница будет иметь заголовок, некоторый контент, кнопку «Назад» и нижний колонтитул. Верхний и нижний колонтитулы будут выглядеть так же, как на домашней странице.

Я видел много решений с закрепленными верхним и нижним колонтитулами, но я не нашел ни одного, который бы работал так, как я хочу (проблема в том, что я хочу, чтобы верхний и нижний колонтитулы можно было прокручивать).

Я пытался использовать панель макета карты, вложенную в панель vbox, я также пытался использовать панель макета карты, вложенную в панель нужного макета, вложенную в панель vbox (см. Пример кода). 

//home, video and contact panels are quite similar to about panel
about = new Ext.Panel({
                layout: {
                    type: 'vbox',
                    pack: 'start'
                },
                items: [
                    {
                        html: ['<div class="pageWrapper"><h1><span>About</span></h1></div>']
                    }
                ] // end items
            });

    cardPanel = new Ext.Panel({
            layout: 'card',
                items: [home, about, video, contact]
            });

    cardWrapper = new Ext.Panel({
                layout: 'fit',
                items: [cardPanel]
            });

    var mainPanel = new Ext.Panel({
                layout: 'vbox',
                scroll: 'vertical',
                fullscreen: true,
                items: [header, cardWrapper, btnBack, footer]
            });

Когда я использую приведенный выше код, cardWrapper имеет высоту = 0 и ширину = 0. Я могу видеть только домашнюю страницу, когда я устанавливаю высоту и ширину cardWrapper в какое-то значение. Я также попытался установить: autoHeight: правда Для домашней панели, cardPanel и cardWrapper не повезло: /

Есть ли у вас другие идеи, как мне добиться этого макета сайта?

1 Ответ

0 голосов
/ 21 апреля 2011

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

Во-вторых, установить для свойства 'flex' свойства cardPanel значение 1 и задать фиксированную высоту (или сгибание) для верхнего и нижнего колонтитуламожет решить проблему, которую вы видите.

Итак: 

var cardPanel = new Ext.Panel({
   flex: 1,
   layout: 'card',
   items: [home, about, video, contact]
});

var header = new Ext.Panel({
   height: 100,
   html: "<h1>Header</h1>"
});

var footer = new Ext.Panel({
   height: 100,
   html: "<h1>Footer</h1>"
});

var mainPanel = new Ext.Panel({
            layout: 'vbox',
            scroll: 'vertical',
            fullscreen: true,
            items: [header, cardPanel, btnBack, footer]
});

Наконец, вы можете попробовать превратить панель карт в карусель.Вы можете отключить индикатор на объекте с помощью свойства «индикатор».Для переключения между картами вы должны использовать тот же вызов setActiveItem.

...