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

【问题标题】：How to add a title above a list in extjs /sencha touch如何在 extjs /sencha touch 的列表上方添加标题
【发布时间】：2018-04-16 18:02:48
【问题描述】：

我想在 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() 显示多个项目，即使我调用该函数两次并且只使用一个参数加载它。

【问题讨论】：

标签： javascript extjs sencha-touch

【解决方案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'");
}

所以，就像这个警告一样，我建议你将你的 List 组件“包装”在一个 Ext.Panel 中，在其中填充设置布局配置为 'fit'，然后，你将一个 Ext.Toolbar 停靠在此面板的顶部（不在列表中）。这样，您可以随时通过简单地调用setTitle 函数来根据需要更改工具栏标题。请记住，所有 Sencha Touch 组件都是可自定义的，所以如果你想给这个工具栏赋予不同的样式，我建议你使用 componentCls 配置。

我向您发布一个简单的示例，向您展示如何做到这一点：

Ext.regApplication('EditableListSample.', {
    launch: function() {

    //Definition of the store Data Model
    Ext.regModel('Contact', {
        fields: ['firstName', 'lastName']
    });

    //Definition of the List Store
    var store = new Ext.data.JsonStore({
        model  : 'Contact',
        sorters: 'lastName',
        data: [
            {firstName: 'Tommy',   lastName: 'Maintz'},
            {firstName: 'Rob',     lastName: 'Dougan'}
        ]
    });

    //Definition of the wrapper panel
    var viewport = new Ext.Panel({
        fullscreen: true,
        layout: 'fit',
        items: [{
            //Definition of the list
            xtype: 'list',
            itemTpl: '{firstName} {lastName}',
            store: store,
            listeners: {
                itemtap: function(list, index){
                    //Updating the toolbar title
                    var firstName = list.getStore().getAt(index).get('firstName');
                    viewport.getDockedComponent('tbrListTitle').setTitle(firstName);
                }
            }
        }],
        dockedItems: [{
            //Definition of the custom toolbar
            xtype: 'toolbar',
            itemId: 'tbrListTitle',
            dock: 'top'
        }]
    });
}
});

希望这会有所帮助。

【讨论】：

嗨安德里亚。此解决方案的问题是工具栏不会随列表一起向上滚动。同样，如果我尝试使用 html 而不是工具栏添加面板，它也不会与列表一起滚动。
嗨，大卫。所以你想要一个随列表滚动的标题？你能更好地解释一下吗？
这解决了我遇到的问题。谢谢安德里亚！

【解决方案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;

        }
}

});

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

var listTitle = Ext.fly('search-list-title'); 如果（列表标题）{ listTitle.destroy(); } var clearSearchStore = Ext.getStore('搜索'); clearSearchStore.removeAll();

【讨论】：