I have few docked items :
dockedItems: [{
xtype: 'toolbar',
items: [{
xtype:'button',
icon: g_settings.iconUrl + 'add-icon.png',
text: 'Abc',
handler: this._add
},{
icon: g_settings.iconUrl + 'remove-cancel-icon.png',
text: 'Del',
disabled: true,
itemId: 'delete',
scope: this,
handler: this.onDeleteClick
}]
},{
xtype:'toolbar',
dock: 'bottom',
items: [{
xtype: 'button',
height: 30,
// padding: '0 0 0 50',
icon: g_settings.iconUrl + 'add-file-to-doc.png',
text: 'Select',
itemId: 'conndoc',
scope: this,
disabled: true,
handler: this._connToDocument
}]
}, {
xtype: 'pagingtoolbar',
id: 'id-docs-paging',
store: 'Documents',
dock: 'bottom',
displayInfo: true
}],
The xtype:pagingtoolbar and the toolbar with text: Select are both with position bottom and the second contains just one button which by default is on the left side of the toolbar but I want to stay at the right side. I tried “->” and other options from ExtJS documentation but since I have only one item in the toolbar I think I can’t use the standard options.So how I could position a single item in a toolbar to be at the right side?
Thanks
Leron
P.S
I forgot – the paginationg toolbar always appears above the toolbar with the icon even though it’s last in the list with docked items, but I want the pagination to be the latest at the bottom, so if anyone could help me with this issue too…
Ok, so the both issued are resolved, maybe not so difficult, but may come in handy to someone else. So, as i wrote in my comment above – to move the button to the right side of the toolbar i just used this
items: ['->',{. As for the second part, it appears that the first element who hasdock: 'bottom'property will be positioned at the very bottom and every element that comes next in the code and has the same position will be put at the bottom, but above the previous element. So the important thing here was to write my elements in the right order having in mind the information above.