如何在Sencha Touch中的工具栏和NestedList之间放置图像？

Question

我试图在NestedList及其工具栏之间放置一个Image。我已经尝试重写NestedList，将列表中的第一项转换为Image，并自定义CSS中的填充属性。它很混乱，但它有点工作，但这并不是我想要的，因为现在Image正在与其他项目一起滚动。我希望Image保持固定，并在其下滚动项目，就像它是工具栏的一部分一样。我怎么能这样做？

我想实现这样的目标：

Answer 1

您可以创建这样的视图：

Ext.define('AppName.view.Main', {
    extend: 'Ext.Panel',
    xtype: 'main',
    config: {
        layout: 'fit',
        items: [
            {
                xtype: 'toolbar',
                height: '', // if u want to give
                width: '' , //if u want to give
                title: 'ToolBar',
                docked: 'top'
            },
            {
                xtype: 'image',
                src: '', //path of image
                height: '', // as per your need
                width: '',// as per your need
                docked: 'top'
            },
            {
                xtype: 'nestedlist',
                itemId:'categoryList',
                id:'categoryList',
                itemHeight: 25,
                store:'',  // Your Store,
                listConfig:{
                    itemTpl:'{ }' // your list value
                },
                displayField:' ' // display field
            },
            {
                xtype: 'toolbar',
                docked: 'bottom'
                // additional code that you need for config your bottom toolbar
            }
        ]
    }
});

Answer 2

是的，这很明显。事实上，我遇到了同样的问题，但这是你可以使用html5和css3的强大功能的地方。我玩了一些css属性，使它看起来像这个图像。

此处顶部工具栏包含标题，嵌套列表的工具栏包含“后退”按钮。