I cant dock a toolbar to a List component directly

[parky128]

Hi,

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?

[aconran]

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.

[allisterf]

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?

Allister

[allisterf]

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) {
dataview.up().push({
xtype: 'detailPanel',
html: "<h3>" + record.get('title') + "</h3>" + record.get('content')
});
navLocalNews.deselectAll();
}

});

What needs to change?
Any help would be appreciated.

Allister