PDA

View Full Version : Dynamically add ext.menu.Menu to ext.panel.Panel



mirkotus
4 Dec 2013, 4:55 AM
I dynamically create several panels and add the into an accordion menu. For each of this panels I want to add an ext.menu.Menu component but when I try do that the menu is not visible and also not present in the DOM. I also create a few menu items which I add to the menu.




for (var i = 0; i < store.totalCount; ++i){
var rec = store.getAt(i);

var panelItem = new Ext.panel.Panel({
title: (Ext.Date.format(rec.data.dateBorn, 'd-m-Y')) + " " + rec.data.name, value:rec.data.VALUE_FIELD, });
panel.add(panelItem);
var userMenu = new Ext.menu.Menu({ width: 120, height: 70, className:"menu" }); panelItem.add(userMenu);}

scottmartin
4 Dec 2013, 6:13 AM
Have a look at the following:



Ext.application({
name : 'Fiddle',

launch : function() {

var panel = Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 500,
height: 500,
html: '<p>World!</p>',
renderTo: Ext.getBody()
});

var menu = Ext.create('Ext.menu.Menu', {
width: 100,
margin: '0 0 10 0',
floating: false, // so we can be a child of container
items: [{
text: 'regular item 1'
},{
text: 'regular item 2'
},{
text: 'regular item 3'
}]
});

panel.add(menu);

}
});

mirkotus
4 Dec 2013, 10:04 PM
Works perfect. Thank you!

Ankur Gupta
6 Nov 2017, 11:24 PM
Hi, I am new for Sencha Architect and I want to add menu dynamically in my application

1. first i created a button and add menu on them.
xtype: 'button',
itemId: 'menuToolbar',
width: 200,
text: 'Company Name',
menu: {
xtype: 'menu',
items: [
{
xtype: 'menuitem',
text: 'Menu Item'
}
]
}

2. I created a modal and bind with a store so i am getting my data like:
"listjson" : [
{"cmpId" : "1122" , "cmpNm" : "ABCD"},
{"cmpId" : "1123" , "cmpNm" : "EGFH"},
{"cmpId" : "1124" , "cmpNm" : "HIJK"}
]

My store code is:
Ext.define('Univision_ext.store.CompanyList', {
extend: 'Ext.data.Store',

requires: [
'Univision_ext.model.CompanyList',
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json'
],

constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'CompanyList',
autoLoad: true,
model: 'Univision_ext.model.CompanyList',
proxy: {
type: 'ajax',
url: 'url',
reader: {
type: 'json',
rootProperty: 'listjson'
}
}
}, cfg)]);
}
});

Now i want to display all company names in a list (which i created initially). what should i do in next?
Thanks in advance.