PDA

View Full Version : Creating Menu items dynamically



Pravin.Pawar
3 Sep 2012, 8:39 PM
Hi,

I have list of the items in database and need to create Menu control based on the available data in DB.

Please let me know how should I create Menu items dynamically.

sword-it
3 Sep 2012, 10:03 PM
Hi,

May you provide your code for better understanding the problem

Pravin.Pawar
4 Sep 2012, 7:58 PM
I have created AJAXMenu page which gets data from DB and returns into json format.

public partial class AjaxMenu : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
var result = new List<Group>()
{
new Group(){
ID=1, GroupName= "BlackBox",
Products= new List<Product>(){
new Product(){ProductID=101, ProductName="BlackBox-1"},
new Product(){ProductID=101, ProductName="BlackBox-2"}
}
},
new Group(){
ID=2, GroupName= "Front Office",
Products= new List<Product>(){
new Product(){ProductID=101, ProductName="iCare"},
new Product(){ProductID=101, ProductName="jCare"},
new Product(){ProductID=101, ProductName="KDDi"}
}
},
new Group(){
ID=3, GroupName= "CRM",
Products= new List<Product>(){
new Product(){ProductID=101, ProductName="CRM-Front Office"}
}
}
};

System.Web.Script.Serialization.JavaScriptSerializer jSearializer = new System.Web.Script.Serialization.JavaScriptSerializer();
Response.Write(jSearializer.Serialize(result));

}
}


In ExtJS; we can create menu items dynamically using following approach-

Ext.onReady(function () {

loadAjaxData();

function loadAjaxData() {
$.ajax({
url: "AJAXPages/AjaxMenu.aspx",
dataType: 'json',
success: function (data) {
createMenu(data);
}
});
}

function createMenu(data) {
var len = data.length
dynamicMenu = Ext.create('Ext.menu.Menu');
for (var i = 0; i < len; ++i) {
var subMenu = Ext.create('Ext.menu.Menu');
for (var p = 0; p < data[i].Products.length; ++p) {
subMenu.add({ text: data[i].Products[p].ProductName, handler: onItemClick });
}
dynamicMenu.add({ text: data[i].GroupName, menu: subMenu, handler: onItemClick });
}

function onItemClick(menuitem) {
Ext.Msg.alert("Alert", "You clicked on " + menuitem.text);
}

Ext.create('Ext.menu.Menu', {
width: 170,
height: 170,
floating: false,
plain: true,
renderTo: Ext.getBody(),
items: [{
text: 'Dynamic Menu',
menu: dynamicMenu
}, {
//xtype: 'menucheckitem',
text: 'Year: ',
menu: [{
xtype: 'container',
layout: 'hbox',
plain: true,
width: 150,
items: [{
xtype: 'textfield',
id: 'txtYear',
plain: true,
width: 50,
margin: '0 0 0 15'
}, {
xtype: 'button',
plain: true,
text: 'OK',
width: 50,
margin: '0 0 0 10',
handler: function () {
Ext.Msg.alert("Status", Ext.getCmp("txtYear").value);
}
}]
}]
}]
});
}
});