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

2019-11-02 07:35:16 阅读：196 来源： 互联网

我想在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也没有错误.

Here is my dealerList card:

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()似乎看不到一个以上的项目,即使我两次调用该函数并且仅使用一个参数加载它也是如此.

解决方法:

您必须知道,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'
        }]
    });
}
});

希望这可以帮助.

标签：extjs,sencha-touch,javascript
来源： https://codeday.me/bug/20191102/1989890.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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