Ext Toolbar 动态添加按钮

Question

[code="java"]
var toolBar = new Ext.Toolbar({});
var bb = {
text : 'TEXT',
id : 'bb_id'
}
var button = new Ext.Button({
text : 'ADD',
renderTo : 'button_id',
handler : function(){
//add button for toolbar
toolBar.items.add('bb_id',bb); //This is not work
}
})
[/code]

Answer 1

Notes :

* If the Container is already rendered when add is called, you may need to call doLayout to refresh the view which causes any unrendered child Components to be rendered. This is required so that you can add multiple child components if needed while only refreshing the layout once. For example:

  var tb = new Ext.Toolbar();
  tb.render(document.body);  // toolbar is rendered
  tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
  tb.add({text:'Button 2'});
  tb.doLayout();             // refresh the layout

意思就是动态添加后,需要调用toolbar的doLayout()刷新一下布局