Dynamic toolbars troubles

[eddow]

Hello,

I didn't manage to have my toolbar modified dynamically.

So, with this declaration :

			ptk.viewport = new Ext.container.Viewport({
				layout: 'border',
				items: [
			        ptk.page = new Ext.panel.Panel({
						layout: 'fit',
						region: 'center'
					}),
	                ptk.statusBar = new Ext.toolbar.Toolbar({
		                height: 26,
		                border: false,
		                margins: '0',
		                region: 'south'
			        }),
			        ptk.toolbar = new Ext.toolbar.Toolbar({
		                height: 26,
		                border: false,
		                margins: '0',
		                region: 'north'
		            })
			    ]
			});

I tried these ways :

1. 
   

   ptk.toolbar.add('-');

   Just has no visible effect.

2. 			ptk.viewport.items.remove(ptk.toolbar);
   			ptk.toolbar.destroy();
   			ptk.toolbar = new Ext.toolbar.Toolbar({
   		                height: 26,
   		                border: false,
   		                margins: '0',
   		                region: 'north',
   		                items: ['-']
   		            });
   			ptk.viewport.items.add(ptk.toolbar);
   			ptk.viewport.doLayout();

   Note: Even if I use directly

   ptk.viewport.add

   and

   ptk.viewport.remove

   This raise an exception in AbstractLayout.js:129 on

   target.insertBefore(item.el.dom, position || null);

   : item.el.dom is undefined.

[pavel.psycho.kurnosov]

You don't have to remove all items for clean toolbar. I create sample based on your code - hope it's will help you:

Ext.onReady(function () {
    Ext.require('Ext.window.Window');


    var statusBar = new Ext.toolbar.Toolbar({
        height: 26,
        border: false,
        margins: '0',
        region: 'south'
    });
    var toolbar = new Ext.toolbar.Toolbar({
        height: 26,
        border: false,
        margins: '0',
        region: 'north'
    });

    var win = Ext.create('Ext.window.Window', {
        title: 'Hello',
        height: 200,
        width: 400,
        layout: 'fit',
        items: [
            statusBar, toolbar
        ]}).show();

    //dynamic new add
    statusBar.add('-');
    statusBar.add({text: 'add more',
        handler: function () {
            statusBar.add('-');
            statusBar.add({text: 'name'});
        }});
    statusBar.add({text: 'clear all',
        handler: function () {
            statusBar.removeAll();
        }});
});