Обновление Sencha Touch Содержимое вкладкиПанель с кнопками - PullRequest
Новая
       311

Обновление Sencha Touch Содержимое вкладкиПанель с кнопками

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

Я пытался изучить Sencha Touch, и я застрял на чем-то, что, вероятно, довольно очевидно.Я пытаюсь обновить tabPanel с событием кнопки.Я хотел бы нажать на первую кнопку, чтобы загрузить «maptestPanel» в той же панели.Это карта, загруженная из собственного файла js.

Панель карты выглядит нормально сама по себе: 

 maptestPanel =  new Ext.Panel({
                      layout: 'fit',
                      fullscreen: true,
                      items: [map]
                  });

Но я не вижу, как правильно разместить ее во вкладке панели

Код: 

Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {

    var navBar = new Ext.Toolbar({
        dock : 'top',
        title: 'Some App Name',
    });

    var topPanel = new Ext.Panel({
        dockedItems: [navBar],
        fullscreen : true,
        //html: 'Test Panel'
    });


    var tapHandler = function(button, event) {
            btnPanel.update(maptestPanel); //I'm sure part of the problem is here   
    }   


    var SomeDate1 = new Ext.Button({
        text:"Some date",
        minWidth:200,
        height: 45,
        cls:"listButtonTop",
        handler:tapHandler                  
        });

    var SomeDate2 = new Ext.Button({
        text:"Another Date",
        minWidth:200,
        height: 45,
        cls:"listButton"
    });

    var SomeDate3 = new Ext.Button({
        text:"And Another Date",
        minWidth:200,
        height: 45,
        cls:"listButtonBottom"
    });


    var btnPanel = new Ext.Panel ({
        id: 'date',
        items: [SomeDate1,SomeDate2,SomeDate3],         
    });

    var tabpanel = new Ext.TabPanel({
        layout: 'card',
        tabBar: {
            dock: 'bottom',
            layout: {
                pack: 'center'
            }
        },
        fullscreen: true,
        ui: 'dark',
        cardSwitchAnimation: {
            type: 'slide',
            cover: true
        },
        defaults: {
            scroll: 'vertical'
        },
        items: [{
            title: 'Maps',
            //html: '<h1>Place holder</h1>',
            iconCls: 'maps',
            cls: 'card1',
            items: [btnPanel]               
        }, {
            title: 'Favs',
            html: '<h1>Place holder</h1>',
            iconCls: 'favorites',
            cls: 'card2',
            badgeText: '4',
            layout: 'fit'
            //items: [SomeList, SomeOtherList, AnotherList]
        }, {
           title: 'Info',
            html: '<h1>Place holder</h1>',
            cls: 'card4',
            iconCls: 'info'
        }]
    });
   }
});

Спасибо за любой совет или направьтесь в правильном направлении.

Ответы [ 2 ]

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

Я знаю только «классическую» сенчу, но это должно работать точно так же: так что вы можете просто добавить mapPanel (но скрытый) в tabPanel, и в обработчике кнопок показать его, скрывая панель кнопок.

Кроме того, говоря о макетах, я не думаю, что вам нужно точно определять макет: «карточка» в tabPanel, поскольку она использует макет карты по определению

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

Есть несколько вещей, которые нужно сделать, чтобы исправить этот код:

1) У «Карт» нет макета.Поскольку он имеет единственный дочерний элемент, здесь уместно будет использовать layout: 'fit'.

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

3) Чтобы динамически добавлять элементы в контейнер, используйте метод add () для контейнера.Вам также нужно вызвать doLayout (), чтобы вызвать макет для контейнера.

btnPanel.add(maptestpanel);
btnPanel.doLayout();

Однако в этом случае я не понимаю, почему вы добавляете карту на панель, она не дает вам никакой дополнительной функциональности.Вместо этого я бы добавил карту непосредственно в btnPanel.

4) У btnPanel также нет макета, поэтому вам нужно будет также выбрать соответствующий макет, возможно, макет vbox.

...