我想在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'
}]
});
}
});
希望这可以帮助.
原文地址:https://codeday.me/bug/20191102/1989890.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。