Sencha Touch:选项卡面板内的嵌套列表

时间:2010-11-08 15:10:06

标签: extjs sencha-touch

我还是Sencha Touch / ExtJS的新手,我正在探索演示和入门示例。但我偶然发现了这个问题,当我在选项卡面板项目上插入嵌套列表时,我无法再导航列表项。

这是我的代码:

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

onReady: function(){ 

    // store with data
    var data = {
        text: 'Groceries',
        items: [{
            text: 'Drinks',
            items: [{
                text: 'Water',
                items: [{
                    text: 'Sparkling',
                    leaf: true
                },{
                    text: 'Still',
                    leaf: true
                }]
            },{
                text: 'Coffee',
                leaf: true
            },{
                text: 'Espresso',
                leaf: true
            },{
                text: 'Redbull',
                leaf: true
            },{
                text: 'Coke',
                leaf: true
            },{
                text: 'Diet Coke',
                leaf: true
            }]
        },{
            text: 'Fruit',
            items: [{
                text: 'Bananas',
                leaf: true
            },{
                text: 'Lemon',
                leaf: true
            }]
        },{
            text: 'Snacks',
            items: [{
                text: 'Nuts',
                leaf: true
            },{
                text: 'Pretzels',
                leaf: true
            },{
                text: 'Wasabi Peas',
                leaf: true
            }]
        },{
            text: 'Empty Category',
            items: []
        }]
    };
    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: 'Groceries',
        displayField: 'text',
        dock: 'top',
        store: store
    });

    var btnSpecTop = [
        { ui: 'back', text: 'Back'},
        { xtype: 'spacer' },
        { ui: 'default', text: 'Login' }
    ] // end btnSpecTop


    var tapHandler = function (btn, evt) {
        alert("Button '" + btn.text + "' tapped.");
    }        


    var dockedItems = [{
        xtype: 'toolbar',
        dock: 'top',
        title: 'Demo',
        items: btnSpecTop,
        defaults: { handler: tapHandler }
        },
        {
            xtype: 'tabpanel',
            layout: 'card',
            dock: 'top',
            fullscreen: true,
            items:[{
                title: 'test1',
                html: '<p>test 1</p>'
            },
            {
                title: 'test2',
                html: '<p>test 2</p>',
                dockedItems: nestedList
            },
            {
                title: 'test3',
                html: '<p>test 3</p>'
            }]
        }                
    ]

    var appPanel = new Ext.Panel({
        id: 'appPanel',
        fullscreen: true,
        dockedItems: dockedItems            
    });

}   // end onReady 
});

希望有人能伸出援助之手。谢谢!

2 个答案:

答案 0 :(得分:3)

此错误仅出现在Sencha Touch的RC前版本上。 :)

答案 1 :(得分:0)

我不知道您使用的是哪种版本的sencha-touch,但导航是sencha-touch-1.1.0 工作得很好,并没有错误被扔到控制台,所以在观察你的同时再试一次 控制台,我认为存在问题