View Full Version : I cant dock a toolbar to a List component directly

8 Feb 2012, 8:40 AM

I cant add a toolbar as a docked item directly to a List component in designer. Here is some non designer UI code I am trying to re-produce:

Ext.define('PinpointersTouch.view.UnitList', {
extend: 'Ext.dataview.List',
xtype: 'unitslist',
emptyText: 'There are no vehicles in your tracking list.',
config: {
itemTpl: new Ext.XTemplate(...),
store: 'CurrentGrid',
items: [{
xtype: 'toolbar',
docked: 'bottom',
ui: 'light',
items: [{
xtype: 'label',
html: 'Show:',
style: 'color:white;'
xtype: 'selectfield',
store: 'TrackingListWithShowAll',
displayField: 'UnitName',
valueField: 'UntID',
itemId: 'selectVehicle'

Do I need to use a Container first and then add a List component and the toolbar as a docked item instead?

8 Feb 2012, 9:06 AM
Use a panel and you will be able to dock the toolbar.

I'll check with the Touch team today to see what has changed in regard to docking.

17 Jun 2012, 11:59 AM
Just to clarify, you can't dock to a list directly, but you can place a panel, put the list in there? Do you put the thing your docking in the panel too, and dock it to the parent?


17 Jun 2012, 11:08 PM
Okay - not sure if I'm doing this right.

Adding a panel (with fit layout) and putting both my image and list in the panel, and docking the image to the parent panel to make sure it sits at the top, worked fine.

What I now lost was the ability to push the detail of the list through the controller. Does the controller ref have to be different if the list component is sitting in another component?

My List ID is LocalNews (ref is #LocalNews)
The containing panel ID is LocalNewsPanel.

This is the code that no longer works to push the detail of each list item

Ext.define('MyApp.controller.NewsControl', {
extend: 'Ext.app.Controller',
config: {
refs: {
navLocalNews: '#LocalNews'

control: {

"navLocalNews": {
itemtap: 'onLocalNewsListItemTap'

onLocalNewsListItemTap: function(dataview, index, target, record, e, options) {
xtype: 'detailPanel',
html: "<h3>" + record.get('title') + "</h3>" + record.get('content')


What needs to change?
Any help would be appreciated.