Question

如何在Sencha Touch中加载选项卡时触发事件？我希望AJAX中的某些内容不够重要，不能立即加载，而且Sencha Touch似乎错过了ExtJS的autoLoad属性。

我可以在面板上绑定什么来检测面板是否已被激活？

Answer 1

您可以在面板本身或TabPanel中的事件卡片开关中监听激活事件 cardswitch事件仅在设置了第一张卡后才会触发，因此如果您希望在初始化时触发操作，请在TabPanel上为activate事件添加一个侦听器。

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 Touch Docs的更多信息：
http://dev.sencha.com/deploy/touch/docs/?class=Ext.TabPanel
http://dev.sencha.com/deploy/touch/docs/?class=Ext.Panel

选项卡加载时触发事件，或使用ajax加载选项卡？

1 个答案: