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.
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:
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. Note, I don't want a toolbar. There are also no errors in 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],
})
Edit 1: Here are the main config parameters for the list:
{
flex: 1,
layout: {
type: "fit",
align: "stretch"
},
id: "results-list",
singleSelect: true,
scroll: "vertical",
}
Edit 2: I have made a discovery. If I get rid开发者_C百科 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.
What you have to know is that Ext.List
component superclass is no more Ext.Panel
but 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:
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). In this way, you can always change the toolbar title according to your needs by simple calling the setTitle
function.
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.
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();
精彩评论