Question

我和Sencha Touch一起练习。我创建了一个简单的标签栏，它停靠在屏幕的底部。这是我的代码：

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {
        Ext.regModel('ListItem', {
            fields: [{name: 'text', type: 'string'}]
        });

        var d1 = new Ext.data.TreeStore({
                            model: 'ListItem',
                            root:{text:'D1',items:{}},
                            proxy: {
                                      type: 'ajax',
                                      reader: {
                                              type: 'tree',
                                              root: 'items'
                                          }
                            }
        });
            var d2 = new Ext.data.TreeStore({
                            model: 'ListItem',
                            root:{text:'D2',items:{}},
                            proxy: {
                                      type: 'ajax',
                                      reader: {
                                              type: 'tree',
                                              root: 'items'
                                          }
                            }
        }); 
        tabBar = new Ext.TabPanel({
            id:'tabPanel',
            fullscreen:true,
            tabBar: {
                dock: 'bottom'
            },
            items:[
                new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d1}),
                new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d2})
            ]
        });
    }
});

我接下来要做的是直接在标签栏上创建一个工具栏。此工具栏将打印一些文本（我最终将用于创建滚动新闻源）。如何直接在标签栏顶部添加工具栏？

Answer 1

你走了：

tabBar = new Ext.TabPanel({
            id:'tabPanel',
            fullscreen:true,
            tabBar: {
                dock: 'bottom'
            },
            items:[
                new Ext.NestedList({
                    dock:'left',
                    title:'title',
                    iconCls:'home', 
                    width:'350', 
                    store:d1,
                    dockedItems: [{
                        xtype: 'toolbar',
                        dock: 'bottom',
                        items: [{
                            text: 'Docked to the bottom'
                        }]
                    }]
                }),
                new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d2})
            ]
        });

第一个标签现在在标签栏上方有一个工具栏

Answer 2

今晚我正在玩类似的东西，尝试在标签栏上方添加一条消息栏。我找到了一个很好的方法来使用initComponent方法（我使用惰性实例化和Ext.extend来创建xtypes）。以下是适用于我的tabBar代码的修改版本：

tabBar = new Ext.TabPanel({
        id:'tabPanel',
        fullscreen:true,
        tabBar: {
            dock: 'bottom'
        },
        items:[
            new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d1}),
            new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d2})
        ]
        listeners: {
              beforerender: function(){
                  this.addDocked({
                      html: 'hello world',
                      dock: 'bottom'
                  });
              }
        }
    });

在Sencha Touch中堆叠工具栏和tabpanel

2 个答案: