View Full Version : Dynamic Toolbar

3 Jun 2012, 2:05 AM
Hi to all,

I need to create a dynamic toolbar. I mean that any user should get his/her personalized menu options.
Unlogged user: 'Welcome' | 'Sign In'
Logged-in user: 'Welcome Freddy' | 'Your orders' | 'Sign Out'
Logged-in admin: 'Welcome Meggy' | 'Users' | 'Reports' | 'Sign Out'

So I need to load with AJAX request (it's a pure HTML file) all the items for the current page. With links, styles and icons. I cannot find any example to solve this problem.

Please, can anybody give me a cue to the issue? Any help will be appreciated.

Thank you

3 Jun 2012, 7:29 AM
I found a solution, it works, but looks a little strange since I build the toolbar inside the Ajax request. Is it OK?

renderToolbar = function () {
url: __srvData + '/toolbarItems.ashx',
params: { id: '26' },
success: function (response) {
var tItems = Ext.decode(response.responseText);
Ext.create('Ext.toolbar.Toolbar', {
id: 'personalToolbar',
renderTo: 'ptbar',
items: tItems


4 Jun 2012, 11:20 AM
An Ext.toolbar.Toolbar supports a loader (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.toolbar.Toolbar-cfg-loader) configuration which will allow you to dynamically populate toolbar components. Visit the docs for Ext.ComponentLoader (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.ComponentLoader) for a loader configuration example.