Question

我想在extjs / sencha touch中的列表上方添加标题。

标题将是动态的，并根据页面进行更改，因为它将包含页码和其他详细信息。因此我修改了我的处理程序，它使用新结果更新列表，以便将结果列表添加到我的dealerList卡中，它还添加了一个容器：

myapp.cards.dealerList.items.add(
     new Ext.Container({
         html: "Dealer results",
         cls: "centered-title",
         baseCls: "x-toolbar-title",
         scroll: false,
         layout: {
             type: "hbox",
             align: "stretch"
         }
     }),
     new Ext.List({ ...
     })
 )

但是当我检查它时，只显示ext.list，上面没有容器。注意，我不想要工具栏。 chrome中也没有错误。

这是我的dealerList卡：

myapp.cards.dealerList = new Ext.Panel({
    scroll: false,
    layout: {
        type: "vbox",
        align: "stretch"
    },
    id: "dealer-list-results-card",
    dockedItems: [myapp.toolbars.dealerList, myapp.toolbars.dealerListNav],
})

编辑1：以下是列表的主要配置参数：

{
    flex: 1,
    layout: {
        type: "fit",
        align: "stretch"
    },
    id: "results-list",
    singleSelect: true,
    scroll: "vertical",
}

编辑2：我做了一个发现。如果我删除列表，则会出现容器。在相关的注意事项中，我似乎无法使用myapp.cards.dealerList.items.add()显示多个项目，即使我调用该函数两次并仅使用一个参数加载它。

Answer 1

您必须知道的是Ext.List组件超类不再是Ext.Panel而是Ext.DataView。因此，您不能直接将组件停靠在列表中，事实上，如果您查看Ext.List源代码，您将在initComponent函数内看到以下代码行：

if (Ext.isDefined(this.dockedItems)) {
    console.warn("List: List is not a Panel anymore so you can't dock items to it. Please put this list inside a Panel with layout 'fit'");
}

所以，像这个警告的exaclty告诉你，我建议你将你的List组件“包装”在你填充的Ext.Panel内，将布局配置设置为'fit'，然后你停靠{ {1}}位于此面板的顶部（不是列表）。通过这种方式，您可以通过简单地调用Ext.Toolbar函数，根据需要更改工具栏标题。请记住，所有Sencha Touch组件都可以自定义，因此如果您想为此工具栏提供不同的样式，我建议您使用setTitle配置。

我给你发了一个简单的例子，告诉你如何做到这一点：

componentCls

希望这有帮助。

Answer 2

这就是我向可滚动列表添加自定义标题的方法。但是，如果您打算使用相同的列表和存储，请小心删除标题并删除列表（这取决于您实施应用的方式）。

searchStore.load({

    callback: function(records){
        if(records.length > 0){
            var searchList = Ext.get('search-list'),

                firstRow = searchList.select('div.x-list-item').elements,
                html = item[0].outerHTML;

            item[0].outerHTML = 'div id="search-list-title" style="width: 100%;text-align: center;text-decoration: underline;">' + 'List Title: '/div>' + html;

        }
}


});

在必要时删除标题和清除列表：

{{1}}

如何在extjs / sencha touch中添加列表上方的标题

2 个答案: