PDA

View Full Version : How Do I Add An Item To An Existing Toolbar?



opticyclic
1 Dec 2012, 10:13 PM
I have a component that contains a toolbar with some items on it.
I want to extend that component and add my own item to the toolbar.

I have taken the overflow example (http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/toolbar/overflow.html) and modified it slightly so that I have some sort of contrived code to demonstrate my issue.

Ext.ux.Demo extends Ext.window.Window and contains a toolbar with some items on it.
I can create an instance of it and display it just fine.

Ext.ux.ToolbarAdder extends Ext.ux.Demo and I want to add items to the toolbar.
However, in the initComponent function the tbar is null and I don't understand how this should work.
I have tried several things like getToolbar() or tbar.push() but I don't know where I should be looking or what I should be doing.

How should I be adding the new items to the toolbar?


Ext.require(['Ext.window.Window', 'Ext.toolbar.Toolbar']);Ext.define('Ext.ux.Demo', {
extend: 'Ext.window.Window',
title: 'Standard',
closable: false,
height: 250,
width: 500,
bodyStyle: 'padding:10px',
contentEl: 'content',
autoScroll: true,


initComponent: function () {
var me = this;
me.tbar = [
{
xtype: 'splitbutton',
text: 'Menu Button',
iconCls: 'add16',
menu: [
{text: 'Menu Item 1'}
]
},
'-',
{
xtype: 'splitbutton',
text: 'Cut',
iconCls: 'add16',
menu: [
{text: 'Cut menu'}
]
},
{
text: 'Copy',
iconCls: 'add16'
},
{
text: 'Paste',
iconCls: 'add16',
menu: [
{text: 'Paste menu'}
]
},
'-',
{
text: 'Format',
iconCls: 'add16'
},
'->',
{
text: 'Right',
iconCls: 'add16'
},
{
text: 'Choose a Color'
}
];
me.callParent(arguments);
}
});


Ext.define('Ext.ux.ToolbarAdder', {
extend: 'Ext.ux.Demo',
initComponent: function () {
var me = this;
//Can I add items here?
me.callParent(arguments);
}


});


Ext.onReady(function () {


var bar = Ext.create('Ext.ux.ToolbarAdder', {
//Should I create toolbar items here?
}
);
bar.initComponent();
bar.tbar.push([
{
xtype: 'splitbutton',
text: 'This should be new',
iconCls: 'add16',
menu: [
{text: 'Menu Item 1'}
]
}
]);
bar.show();
});

mitchellsimoens
3 Dec 2012, 10:23 AM
This is how I would do it:


Ext.define('Ext.ux.Demo', {
extend : 'Ext.window.Window',
xtype : 'demo',

title : 'Standard',
closable : false,
height : 250,
width : 500,
bodyStyle : 'padding:10px',
contentEl : 'content',
autoScroll : true,

initComponent : function () {
var items = this.tbar || [];

items.concat([
{
xtype : 'splitbutton',
text : 'Menu Button',
iconCls : 'add16',
menu : [
{text : 'Menu Item 1'}
]
},
'-',
{
xtype : 'splitbutton',
text : 'Cut',
iconCls : 'add16',
menu : [
{text : 'Cut menu'}
]
},
{
text : 'Copy',
iconCls : 'add16'
},
{
text : 'Paste',
iconCls : 'add16',
menu : [
{text : 'Paste menu'}
]
},
'-',
{
text : 'Format',
iconCls : 'add16'
},
'->',
{
text : 'Right',
iconCls : 'add16'
},
{
text : 'Choose a Color'
}
]);

this.tbar = items;

this.callParent(arguments);
}
});

Ext.define('Ext.ux.ToolbarAdder', {
extend : 'Ext.ux.Demo',
xtype : 'toolbaradder',

initComponent : function () {
this.tbar = [
//... items here
];

this.callParent(arguments);
}
});