Dynamically add ext.menu.Menu to ext.panel.Panel - extjs

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);
}
If I create a menu item and add to the panel it is shown, but I want to have them in a menu, What is wrong here?

Menu is by default floating component. To configure component as floating or not floating you can use floating configuration property.
So if you want to display menu directly in your panel the configuration of menu should be:
var userMenu = new Ext.menu.Menu({
width: 120,
height: 70,
className:"menu",
floating: false,
});

Related

Set layout = 'Fit' to tab item

I have a tabpanel as follows-
var topTab = Ext.create('Ext.tab.Panel', {
region: 'center'
});
I am adding tab items on click of a button
topTab.add(someGrid);
this works well. Only the issue is, this grid is not getting fit into the tab item. I want to set layout = 'fit' to this tab.
I tried adding
topTab.items[0].setLayout but it is not working. Also tried giving height to the grid.
Any suggestions. (Using ExtJs 6)

Isotope grid layout fails on window resize

I'm having problems with isotope in my site. I thought I tackled them all but now there is still a problem when resizing the window. On resize of the window the whole grid is moved way down on the page. This is not fixed by re-doing the layout when the window size changes. Triggering a .isotope('layout') always moves the whole grid to the bottom of the page. My code also implements infinite scroll, that is why I have the part on the hiddenelem's children. I'm also using bootstrap btw.
The (important) part of the code:
if (typeof g_Isotopegrid === 'undefined') {
g_Isotopegrid = $('.grid').isotope({
itemSelector: '.grid-item',
stamp: '.stamp',
masonry: {
columnWidth: 255,
gutter: 30
}
});
}
// Append all the hidden items to the visible items element
hiddenElm.children().each(function () {
var aItem = $(this);
// Append the items to the visible div
aItem.appendTo(visibleElm).imagesLoaded(function() {
g_Isotopegrid.isotope('appended', aItem);
});
});
Any help is appreciated!
In Bootstrap I never set static width:
masonry: {
columnWidth: 255,
gutter: 30
}
just item's class:
masonry: {
columnWidth: '.grid-item',
gutter: 30
}
When you are using Bootstrap is better for item width use bootstrap's classes.
The problem was that we were not using the direct container of the grid items as the element to apply isotope to.

How can I change the width of all panels, when user changes width of one panel?

I use Ext JS. And I have a list of "panels". When user changes width of one panel, I need to change width of another panels automatically. Now when user changes one panel, another panels are not changed. Here is my code:
for (i = 0; i < resources.length; i++) {
table.add({
xtype: 'panel',
title: resources[i].name,
id: prefixResourceId + resources[i].id,
height: constHeight,
resizable:{
pinned:false,
dynamic:true,
floating:true
},
width: widthConst,
layout: 'fit'
});
}
I tryed to use this code:
listeners: {
resize: function(p) {
new Ext.Resizable(p.getEl(), {
pinned:false,
dynamic:true,
resizeElement: function() {
//this block works only when page are loaded
}
});
}
insdead of this:
resizable:{
pinned:false,
dynamic:true,
floating:true
},
But result is the same.
How can I change the width of all panels, when user changes width of one panel?
Put all the panels inside a surrounding panel, let the user change the size of this one, and all the contained panels will adapt their size automatically.

mapPanel topToolbar functions doesn't works

I use geoExt with ExtJs3.4 in my application!.I create a mapPanel and add openlayers map into it with below code.
var mapPanel = new GeoExt.MapPanel({
renderTo: 'gxmap',
height: 500,
width: 800,
map: map,
title: 'Map'
});
after that i create extjs toggle button
var button = new Ext.Button({
text: 'Measure Things',
enableToggle: true,
handler: function(toggled){
if (toggled) {
polygon.activate();
} else {
polygon.deactivate();
}
}
});
when i want to add this button to map panel i get topPanel of mapPanel and after that when i want to use topPanel functions these functions doesn't works!
mapPanel.getTopToolbar().addButton(button);
or below code
topToolbar = mapPanel.getTopToolbar();
topToolbar.addButton(button);
when i see chrome developer tool i see this error for addButton function or other functions of topToolbar of panel!
error:
uncaught typeError: cannot call method 'addButton' of undefined
why i can't use topToolbar functions?
Link for tutorial of geoext that use mapPanel.getTToolbar().addButton(button);
Adding Buttons to map
I had the same problem. You have to add this extra line before the mapPanel creation:
var toolbar = new Ext.Toolbar();
And inside the mapPanel add this property:
tbar: toolbar
You can add now your button to the toolbar:
mapPanel.getTopToolbar().addButton(button);

How to query current expanded item in accordion layout

OK, so here is the way I can find current collapsed in accordion layout:
Ext.getCmp("myaccordion").query("{collapsed}")
How in the same manner I can find expanded one? I can't see expanded property. Moreover, this code:
Ext.getCmp("myaccordion").query("not:{collapsed}")
crushes my browser down.
UPD: here is my decision, based on example in ExtJS docs:
Ext.ComponentQuery.pseudos.expanded = function(items) {
var res = [];
for (var i = 0, l = items.length; i < l; i++) {
if (!items[i].collapsed) {
res.push(items[i]);
}
}
return res;
};
And then I just query this way Ext.getCmp("myaccordion").query(">*:expanded")
But can we make it shorter, using :not somehow?
You don't have to use a function for this component query.
If you have other panels somewhere in your framework that are not collapsed query('[collapsed=false]') would also include those so that was probably the problem you were having.
But you can limit the query to only direct children by calling child instead:
Ext.getCmp("myaccordion").child("[collapsed=false]");
Or you can limit it to direct children in the selector string itself if you give the accordion an id config, as it looks like you did: (id: 'myaccordion'). You can use:
Ext.ComponentQuery.query('#myaccordion > panel[collapsed=false]')
If you have the accordion configured for only one expanded panel at a time (the default config) that will give you an array with one item - the expanded panel. If you have more than one expanded panel they will each be contained in the array.
You could do:
Ext.onReady(function(){
var p1 = Ext.create('Ext.panel.Panel', {
renderTo: document.body,
width: 100,
height: 100,
title: 'Foo',
collapsed: true
});
var p2 = Ext.create('Ext.panel.Panel', {
renderTo: document.body,
width: 100,
height: 100,
title: 'Foo',
collapsed: false
});
console.log(Ext.ComponentQuery.query('[collapsed=false]'));
});

Resources