Viewport Apply Условная панель инструментов с Sencha Touch - PullRequest
Новая
       27

Viewport Apply Условная панель инструментов с Sencha Touch

1 голос
/ 19 января 2011

Я иду по маршруту MVC с Сенчей. У меня панель Viewport инициализирована так же, как в твиттере: 

/**
* @author Jeff Blake
*/
Ext.regApplication('App', {
defaultTarget: 'viewport',
defaultUrl   : 'Viewport/index',
name         : 'App',
icon         : "mobile/public/resources/images/icon.png",
phoneStartupScreen : "mobile/public/resources/images/phone_startup.png",
//useHistory   : false,
//useLoadMask : true,

launch: function() {
    Ext.Viewport.init();
    Ext.Viewport.onOrientationChange();

    this.viewport = new App.Viewport({
        application: this
    });

    Ext.dispatch({
        controller: 'User',
        action    : 'index'
    });
}
});

/**
* @class App.Viewport
* @extends Ext.Panel
* This is a default generated class which would usually be used to initialize your     application's
* main viewport. By default this is simply a welcome screen that tells you that the app was 
* generated correctly.
*/
App.Viewport = Ext.extend(Ext.Panel, {
id        : 'viewport',
layout    : 'card',
fullscreen: true,
cardSwitchAnimation: 'slide',

initComponent: function() {

    Ext.apply(this, {

        dockedItems: [
            {
                // Top Bar
                dock   : 'top',
                xtype  : 'toolbar',
                title  : 'Whats Good',
                items: [
                    {
                        text: 'About'
                    },

                ]
            }


        ]
    });


App.Viewport.superclass.initComponent.apply(this, arguments);
}

});
Ext.reg('App.Viewport', App.Viewport);

Новый код: 

if (!App.viewport.getDockedComponent(homeBar)) {
        var homeBar = new App.HomeBar();
        App.viewport.addDocked(homeBar);
    }

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

Я пытался использовать Ext.apply (App.Viewport, {dockedItems: [App.LoginBar]}); Но это не работает. В настоящее время он работает, чтобы добавить панель инструментов в текущую визуализированную панель и установить ее в полноэкранный режим, но, к сожалению, переходы и вещи ведут себя странно, так как структура 

Panel
Toolbar
    Panel
    Toolbar
    /end Panel
/end Panel

У кого-нибудь есть предложение?

Ответы [ 2 ]

2 голосов
/ 19 января 2011

Чтобы программно добавить закрепленный элемент, я бы порекомендовал использовать 

viewport.addDocked(loginBar);

Подобные методы гораздо лучше, чем пытаться обновить исходную конфигурацию компонента.

Затем есть метод .removeDocked (), чтобы снова его снять.

Также убедитесь, что вы имеете дело с экземплярами компонентов, а не пытаетесь обновить их класс.

1 голос
/ 21 января 2011

Чтобы получить ссылку на область просмотра вашего приложения, вы можете войти через пространство имен 'App', которое автоматически создается свойством name конфигурации regApplication.

Таким образом, вы можете заставить свою кнопку на панели инструментов делатьэто например: 

{
    text: 'About',
    handler: function() {
        App.viewport.getDockedItems()[0].setTitle('Pressed!');
    }
},

Что изменит название при нажатии кнопки.

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

...