[英]How to add a title above a list in extjs /sencha touch
I want to add a title above a list in extjs / sencha touch. 我想在extjs / sencha touch中的列表上方添加一个标题。
The title will be dynamic and change according to the page as it will contain the page number and other details. 标题将是动态的,并根据页面进行更改,因为它将包含页码和其他详细信息。 Because of this I have amended my handler which updates the list with new results, so that as as well a list of results getting added to my
dealerList
card, it also adds a container: 因此我修改了我的处理程序,用新结果更新列表,以便将结果列表添加到我的
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({ ...
})
)
However when I check it, only the ext.list is displayed, no container above it. 但是当我检查它时,只显示ext.list,上面没有容器。 Note, I don't want a toolbar.
注意,我不想要工具栏。 There are also no errors in chrome.
chrome中也没有错误。
Here is my
dealerList
card:这是我的
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],
})
Edit 1: Here are the main config parameters for the list: 编辑1:以下是列表的主要配置参数:
{
flex: 1,
layout: {
type: "fit",
align: "stretch"
},
id: "results-list",
singleSelect: true,
scroll: "vertical",
}
Edit 2: I have made a discovery. 编辑2:我发现了一个。 If I get rid of the list then the container appears.
如果我删除列表,则会出现容器。 On a related noted I can't seem to get more than one item to appear using
myapp.cards.dealerList.items.add()
, even if I call the function twice and only load it with one argument. 在相关的注意事项中,我似乎无法使用
myapp.cards.dealerList.items.add()
获得多个项目,即使我调用该函数两次并仅使用一个参数加载它。
What you have to know is that Ext.List
component superclass is no more Ext.Panel
but Ext.DataView
. 你必须知道的是
Ext.List
组件超类不再是Ext.Panel
而是Ext.DataView
。 For this reason you can not not directly dock components on your list, in fact, if you take a look at the Ext.List
source code, you will see, inside the initComponent
function, the following lines of code: 因此,您不能直接将组件停靠在列表中,事实上,如果您查看
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'");
}
So, exaclty like this warning tell you, I suggest you do "wrap" your List component inside an Ext.Panel
on which you fill set the layout config as 'fit'
, then, you dock an Ext.Toolbar
on the top of this panel (not to the list). 所以,像这样警告的exaclty告诉你,我建议你将你的List组件“包装”在你填充的
Ext.Panel
中,将布局配置设置为'fit'
,然后,将Ext.Toolbar
停靠在此顶部面板(不在列表中)。 In this way, you can always change the toolbar title according to your needs by simple calling the setTitle
function. 通过这种方式,您可以通过简单地调用
setTitle
函数来根据需要更改工具栏标题。 Remember, that all the Sencha Touch components customizables, so if you want to give different styles to this toolbar, I suggest you to use the componentCls
config. 请记住,所有Sencha Touch组件都可以自定义,因此如果您想为此工具栏提供不同的样式,我建议您使用
componentCls
配置。
I post you a simple example that show you how to do that: 我给你发了一个简单的例子,告诉你如何做到这一点:
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'
}]
});
}
});
Hope this helps. 希望这可以帮助。
This is how I added a custom title to a scrollable list. 这就是我向可滚动列表添加自定义标题的方法。 But be careful to destroy the title and remove the list if you plan to use the same list and store (this depends on how you implemented your app).
但是如果您打算使用相同的列表和存储,请小心删除标题并删除列表(这取决于您实施应用程序的方式)。
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; } }
});
Removing title and clearing list where necessary: 必要时删除标题和清除列表:
var listTitle = Ext.fly('search-list-title'); if(listTitle){ listTitle.destroy(); } var clearSearchStore = Ext.getStore('Search'); clearSearchStore.removeAll();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.