PDA

View Full Version : Loading JSON data in LBAR of a panel



AkshayKalbhor
12 Feb 2014, 1:02 AM
Hi,

Can any one please help me with adding data from JSON into the LBAR of a panel??

mdnaveed42
12 Feb 2014, 1:46 AM
Hi,

Could you please elaborate your requirement..
Any ways, I assuming in two ways,

Example 1: Displaying JSON data in lbar


var data = {id: 42, text: 'Ext.Panel left bar from JSON' }; // JSON data
var filterPanel = Ext.create('Ext.panel.Panel', {
bodyPadding: 5, // Don't want content to crunch against the borders
width: 400,
title: 'Filters',
items: [{
xtype: 'datefield',
fieldLabel: 'Start date'
}, {
xtype: 'datefield',
fieldLabel: 'End date'
}],
lbar: [{
xtype: 'label',
html: data.text,
width: 100
}], // lbar
renderTo: Ext.getBody()
});


Example 2: Dynamically adding items to lbar


var data = {
id: 42,
text: 'Ext.Panel left bar from JSON'
};
var filterPanel = Ext.create('Ext.panel.Panel', {
bodyPadding: 5, // Don't want content to crunch against the borders
width: 500,
title: 'Filters',
items: [{
xtype: 'datefield',
fieldLabel: 'Start date'
}, {
xtype: 'datefield',
fieldLabel: 'End date'
}],
lbar: [{
xtype: 'container',
width: 100,
itemId: 'lbarContainer',
items: [{
xtype: 'label',
html: data.text,
width: 100
}]
}], // lbar
renderTo: Ext.getBody()
});


// Add items to existing lbar container
Ext.ComponentQuery.query('#lbarContainer')[0].add({
xtype: 'textfield'
});


// Add new lbar
filterPanel.addDocked({
xtype: 'button',
text: 'Lbar button',
dock: 'left'
});

Thanks,
Md Naveed
\m/

AkshayKalbhor
12 Feb 2014, 2:07 AM
Thanks for answering, I will try the same and inform you accordingly.

AkshayKalbhor
12 Feb 2014, 5:33 AM
Reframing my question : I was trying to achieve the menu attached in the screenshots.

1: In this screenshot the menu loads from the json store, and the child items popup when the menu item is clicked.

47895


2: in the below screenshot, the menu is collapsed and only the icons are shown in the panels "PlaceHolder", which is also to be populated from the JSON.

47896

So the Question :

# Can you please tell me the correct components from which this functionality can be achieved using Extjs 4.2

mdnaveed42
12 Feb 2014, 10:05 PM
Hi,

I think a "container" with "card layout" can do the trick.

On expanded view ..change the card (keeping the functionality same)

Maybe this might give you some help on animation part..
http://www.sencha.com/forum/showthread.php?266273-Card-Layout-Crossfade-Override-(ExtJS-4.2)


Thanks,
Md Naveed
\m/

AkshayKalbhor
13 Feb 2014, 10:27 PM
Thanks for the suggestion, But if we use panel for the main menu(expanded), it provides with a "placeholder" which when populated with data (in this case images) looks the same as shown in image 2 attached before,Also if we collapse the panel then the placeholder is shown.Now i am facing a problem regarding populating the elements from json in the placeholder of the panel.