View Full Version : How to reorder buttons on a toolbar programmatically

15 Feb 2013, 1:31 AM
Hello! Please help, if you can.
I have a toolbar with BoxReorderer functionallity and I really like its effect. But now I want to reorder buttons programmatically. I mean, I have a tree containing a structure of my toolbar and every time, when I swap two nodes, which correspond to buttons on the toolbar, I want to reorder those buttons like BoxReorderer does. I think it would be a very useful functionality.

Many thanks!

15 Feb 2013, 1:33 AM
Use the insert() method: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.container.AbstractContainer-method-insert

15 Feb 2013, 1:43 AM
Thank you, Evant! I have only one last question on this problem. The catch is, I want to retain that cool sliding effect of BoxReorderer and I'm interested to know whether insert method will do the job? Or, using it, I could only swap buttons? If not, I would still mark my question answered.

15 Feb 2013, 9:18 AM
User before render /after render to your buttons and map animate functions to show some sliding/fading effects.


startAnimate: function () {
var p1 = Ext.get('myElementId');
duration: 100,
to: {
opacity: 0
listeners: {
beforeanimate: function () {
afteranimate: function () {
scope: this
}, myBeforeAnimateFn: function () {
// your logic
myAfterAnimateFn: function () {
// your logic

"insert" will allow you to add the elements in specificed position and "add" will always add your element as last child of its parent.

15 Feb 2013, 11:17 AM
Thank you, Vasanth! That is all I needed.