Question

我有一个嵌套列表 - 当我到达最终项目时，我想调用一个将面板交换到轮播的处理程序。请参阅 - http://test.miaduk.com/mobile/TLE/

不幸的是，我似乎无法让任何处理程序处理嵌套的项目，也无法想到另一种方式。我仍然是Sencha的初学者，所以任何帮助都会受到赞赏。谢谢！

参见代码：

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


    /*Data Store
    *********************************************************************************/
var data = {
    text: 'Categories',
    items: [{
        text: 'Core Skills/Personal Development',
        items: [{
            text: 'Fishbone Diagram',
            leaf: true
        },{
            text: '5 Whys Technique',
            leaf: true
        },{
            text: 'SMART Objectives',
            leaf: true
        },{
            text: 'Circle of Influence',
            leaf: true
        },{
            text: 'Managing Stress',
            leaf: true
        }]
    },{
        text: 'Communication',
        items: [{
            text: 'Listening Skills',
            leaf: true
        },{
            text: 'Giving Feedback',
            leaf: true
        },{
            text: 'Recieving Feedback',
            leaf: true
        }]
    },{
        text: 'Customer Service',
        items: [{
            text: 'Listening and Confirming',
            leaf: true
        }]
    }]
};
Ext.regModel('ListItem', {
    fields: [{name: 'text', type: 'string'}]
});
var store = new Ext.data.TreeStore({
    model: 'ListItem',
    root: data,
    proxy: {
        type: 'ajax',
        reader: {
            type: 'tree',
            root: 'items'
        }
    }
});
var nestedList = new Ext.NestedList({
    fullscreen: true,
    title: 'Categories',
    displayField: 'text',
    dock: 'top',
    store: store
});


    /*Carousel
    *********************************************************************************/
    var carousel = new Ext.Carousel({
    fullscreen: true,
    displayField: 'text',
    dock: 'top',
        defaults: {
            cls: 'card'
        },
        items: [{
            html: '<img src="drainImage1.png">'
        },
        {
            title: 'Tab 2',
            html: '<img src="drainImage2.png">'
        }]
    });


    /*Tab Panel
    *********************************************************************************/

    var tabpanel = new Ext.TabPanel({
        tabBar: {
            dock: 'bottom',
            layout: {
                pack: 'center'
            }
        },
        fullscreen: true,
        ui: 'light',
        cardSwitchAnimation: {
            type: 'slide',
            cover: true
        },

        defaults: {
            scroll: 'vertical'
        },
        items: [{
            title: 'My Courses',
            html: '<h1>Course list to appear here</h1>',
            iconCls: 'favorites',
            cls: 'card2',
            badgeText: '3',
            dockedItems: nestedList
        },{
            title: 'Sample',
            cls: 'card2',
            iconCls: 'user',
            dockedItems: carousel
        },{
            title: 'Help',
            html: '<h1>Help</h1><p>Info on how to add to your home screen goes here</p>',
            cls: 'card3',
            iconCls: 'user'
        }]
    });

Answer 1

从Sencha NestedList

中检查此示例

http://dev.sencha.com/deploy/touch/examples/nestedlist/index.js

有一个“leafitemtap”事件可以挂钩到嵌套列表来执行回调：

nestedList.on('leafitemtap', function(subList, subIdx, el, e, detailCard) {
        var ds = subList.getStore(),
            r  = ds.getAt(subIdx);

        Ext.Ajax.request({
            url: '../../src/' + r.get('id'),
            success: function(response) {
                detailCard.setValue(response.responseText);
            },
            failure: function() {
                detailCard.setValue("Loading failed.");
            }
        });
    });

从嵌套列表中显示轮播 - 可能使用处理程序？

1 个答案: