Событие, вызванное загрузкой вкладки или загрузкой вкладки с помощью ajax? - PullRequest
Новая
       0

Событие, вызванное загрузкой вкладки или загрузкой вкладки с помощью ajax?

1 голос
/ 13 сентября 2011

Как запустить событие, когда вкладка загружена в Sencha Touch?Я хочу использовать AJAX для некоторого контента, который недостаточно важен для немедленной загрузки, и Sencha Touch, похоже, пропускает свойство ExtJS autoLoad.

Что можно привязать к панели, чтобы определить, чтопанель активирована?

1 Ответ

2 голосов
/ 14 сентября 2011

Вы можете прослушать событие, активируемое на самой панели, или переключатель карт событий в TabPanel.
Событие cardwitch срабатывает только после установки первой карты, поэтому, если вы хотите, чтобы действие инициировалось при инициализации, добавьте прослушиватель для события активации на TabPanel. 

Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {
        var tabpanel = new Ext.TabPanel({
            tabBar: {
                dock: 'bottom',
                layout: {
                    pack: 'center'
                }
            },
            fullscreen: true,
            ui: 'light',
            cardSwitchAnimation: {
                type: 'slide',
                cover: true
            },

            //
            // Listen for cardswitch event in TabPanel
            //
            listeners: {
                cardswitch: function(comp, newCard, oldCard, index, animated) {
                    console.log(newCard.title, oldCard.title, index, animated);               
                }
            },

            defaults: {
                scroll: 'vertical'
            },
            items: [{
                title: 'About',
                html: '<h1>Bottom Tabs</h1><p>Docking tabs to the bottom will automatically change their style. The tabs below are type="light", though the standard type is dark. Badges (like the 4 &amp; Long title below) can be added by setting <code>badgeText</code> when creating a tab/card or by using <code>setBadge()</code> on the tab later.</p>',
                iconCls: 'info',
                cls: 'card1',
                //
                // Listen for activate event in panel
                //
                listeners: {
                    activate: function(comp){
                        console.log(comp.title);
                        //
                        // Ajax Request
                        //
                        Ext.Ajax.request({
                            url: 'your_url_here.json',
                            success: function(response, opts) {
                                //
                                // Update panel html with ajax response
                                //
                                comp.update(response.responseText);
                            },
                            failure: function(response, opts) {
                                console.log('server-side failure with status code ' + response.status);
                            } 
                        });
                    }
                }
            }, {
                title: 'Favorites',
                html: '<h1>Favorites Card</h1>',
                iconCls: 'favorites',
                cls: 'card2',
                badgeText: '4'
            }, {
                title: 'Downloads',
                id: 'tab3',
                html: '<h1>Downloads Card</h1>',
                badgeText: 'Text can go here too, but it will be cut off if it is too long.',
                cls: 'card3',
                iconCls: 'download'
            }, {
                title: 'Settings',
                html: '<h1>Settings Card</h1>',
                cls: 'card4',
                iconCls: 'settings'
            }, {
                title: 'User',
                html: '<h1>User Card</h1>',
                cls: 'card5',
                iconCls: 'user'
            }]
        });
    }
});

Подробнее о сенсорных документах Sencha:
http://dev.sencha.com/deploy/touch/docs/?class=Ext.TabPanel
http://dev.sencha.com/deploy/touch/docs/?class=Ext.Panel

...