[英]How to add a title above a list in extjs /sencha touch
我想在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()
獲得多個項目,即使我調用該函數兩次並僅使用一個參數加載它。
你必須知道的是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'
,然后,將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'
}]
});
}
});
希望這可以幫助。
這就是我向可滾動列表添加自定義標題的方法。 但是如果您打算使用相同的列表和存儲,請小心刪除標題並刪除列表(這取決於您實施應用程序的方式)。
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'); if(listTitle){ listTitle.destroy(); } var clearSearchStore = Ext.getStore('Search'); clearSearchStore.removeAll();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.