PDA

View Full Version : Menu is not getting displayed as the height mentioned.



AtulDawkhare
12 Jan 2012, 3:43 AM
Hi,

First of all Thanks for the reply that you guys are giving me.

Today I have some ExtJS menu problem. I have searched a lot but didn't find the exact help / hint.

My Query :- I want to display menu on some text. But I didn't know how to attached menu to a text / lable so I have created button and assigned menu to it. Please correct if there is any other way to do this.

Now when I clicked on the menu I am able to see the menu, but the height menu is not as per the height that I have mentioned in the height config. Also I want to show scroll bar after some limit, So I searched and found code for this but that is also not working properly.

Please give me some hints on this


var assertMenuHeight = function(m)
{
var maxHeight = Ext.getBody().getHeight() - 30;
if (m.el.getHeight() > maxHeight)
{
m.el.setHeight(maxHeight);
m.el.applyStyles('overflow: -moz-scrollbars-vertical;');
m.el.applyStyles('overflow-x: hidden;');
m.el.applyStyles('overflow: scroll;');

}
};


function onItemClick(item){ Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text); }


var menu = Ext.create('Ext.menu.Menu',
plain: true,
layout: 'vbox',
layoutConfig:
{
align: 'stretch',
pack: 'start'
},
style:
{
overflow: 'auto' // For the Combo popup
},
forceLayout: true,
width: 150,
height: 50,
listeners: { beforeshow: assertMenuHeight},
items: [
{
text: 'Show All',
checked: true,
checkHandler: onItemClick }, '-',
{
text: 'Aero Glass1',
checked: true,
group: 'theme'
},
{
text: 'Aero Glass2',
checked: true,
group: 'theme'
},
{
text: 'Aero Glass3',
checked: true,
group: 'theme'
},
{
text: 'Aero Glass4',
checked: true,
group: 'theme'
} ,
{
text: 'Aero Glass5',
checked: true,
group: 'theme'
},
{
text: 'Aero Glass6',
checked: true,
group: 'theme'
} ,
{
text: 'Aero Glass6',
checked: true,
group: 'theme'
}
]
});


Ext.create('Ext.Button',
{
text: 'Requirement (20)',
renderTo: 'RequirementBO',
menu:menu
});

mitchellsimoens
12 Jan 2012, 9:54 AM
What version? Using your code (and commenting out the beforeshow listener) it looked pretty good in 4.1.0 beta 1

AtulDawkhare
12 Jan 2012, 9:01 PM
I am using ExtJS 4.

It is showing me the menu with scroll bar, but the height is not as per expected.

I have attached the screen shot. This will give you the clear idea.
30679

So my Query is the , height of the menu is too much, even I gave 10 px i..e




var menu = Ext.create('Ext.menu.Menu',
{
width: 150,
height: 10,


then also the is no change in menu. Please suggest what is missing Or wrong here.
and Also my requirement to add menu to a text / label , but as i didn't get any help so I have attached menu to button. Is this is valid process to do ?

Please give me some hint

AtulDawkhare
13 Jan 2012, 5:38 AM
Please reply me

AtulDawkhare
16 Jan 2012, 1:20 AM
Can you please suggest me what is wrong here?

findajit
16 Jan 2012, 5:17 AM
@Atul,

The problem I see is that the menu implementation removes the height that you specify and then has got its own logic to calculate the height. Look at the following code inside the doConstrain() method in Ext.menu.Menu class:


delete me.height;

I added the following override:



Ext.override(Ext.menu.Menu, {
doConstrain : function() {
var me = this,
y = me.el.getY(),
max, full,
vector,
returnY = y, normalY, parentEl, scrollTop, viewHeight;

//delete me.height;
me.setSize();
full = me.getHeight();
if (me.floating) {
//if our reset css is scoped, there will be a x-reset wrapper on this menu which we need to skip
parentEl = Ext.fly(me.el.getScopeParent());
scrollTop = parentEl.getScroll().top;
viewHeight = parentEl.getViewSize().height;
//Normalize y by the scroll position for the parent element. Need to move it into the coordinate space
//of the view.
normalY = y - scrollTop;
max = me.maxHeight ? me.maxHeight : viewHeight - normalY;
if (full > viewHeight) {
max = viewHeight;
//Set returnY equal to (0,0) in view space by reducing y by the value of normalY
returnY = y - normalY;
} else if (max < full) {
returnY = y - (full - max);
max = full;
}
}else{
max = me.getHeight();
}
// Always respect maxHeight
if (me.maxHeight){
max = Math.min(me.maxHeight, max);
}
if (full > max && max > 0){
me.layout.autoSize = false;
me.setHeight(max);
if (me.showSeparator){
me.iconSepEl.setHeight(me.layout.getRenderTarget().dom.scrollHeight);
}
}
vector = me.getConstrainVector(me.el.getScopeParent());
if (vector) {
me.setPosition(me.getPosition()[0] + vector[0]);
}
me.el.setY(returnY);
}
});

(All I have done is commented the delete statement. Remember, I am giving this solution based on your requirement. This may not apply in all the use cases you may have with your menu...so review it critically!)

and then I could get the menu with the scroll bar and I can change the height by putting the following code (I have removed some of the properties from your code):


var menu = Ext.create('Ext.menu.Menu', {
width: 150,
height: 200,
autoScroll: true,
autoHeight: true,
items: [
{
text: 'Show All',
checked: true,
checkHandler: onItemClick }, '-',
{
text: 'Aero Glass1',
checked: true,
group: 'theme'
},
{
text: 'Aero Glass2',
checked: true,
group: 'theme'
},
{
text: 'Aero Glass3',
checked: true,
group: 'theme'
},
{
text: 'Aero Glass4',
checked: true,
group: 'theme'
} ,
{
text: 'Aero Glass5',
checked: true,
group: 'theme'
},
{
text: 'Aero Glass6',
checked: true,
group: 'theme'
}
]
});


Ext.create('Ext.Button',
{
text: 'Requirement (20)',
renderTo: Ext.getBody(),
menu:menu
});



Here is a screenshot showing the menu with the scrollbar:
30742

AtulDawkhare
16 Jan 2012, 10:39 PM
Hi

After overriding the menu's class doConstrain metho , now I can see the bar also now it is considering height.
But I am getting one error


Uncaught TypeError: Object [object Object] has no method 'getScopeParent'


I tired to understand that, but was not able to find the cause.

Also if the menu items are more , there is scoll bar gets enabled, when I scroll to down / up I can not see the menu title properly, but when I mouse over the text I can see the text properly.

Attached images
1] after scroll down
30761
2] after mouse over on Menu text
30762

Please suggest what is wrong here.

findajit
17 Jan 2012, 2:09 AM
@Atul,

What is the version of ExtJS you are using? I tested my code in 4.0.7

AtulDawkhare
17 Jan 2012, 7:07 AM
I am using 4.0 version.

Do I need to update to the latest one ?

findajit
17 Jan 2012, 9:26 AM
Move to 4.0.7 ( I would not recommend 4.1 Beta right now) and let me know if you have any issue!

mitchellsimoens
17 Jan 2012, 9:35 AM
Move to 4.0.7 ( I would not recommend 4.1 Beta right now) and let me know if you have any issue!

Would disagree with this.

AtulDawkhare
17 Jan 2012, 8:54 PM
What might be the cause for this error.

Also I will update the mine extjs version and cross check the error.

findajit
17 Jan 2012, 9:51 PM
Would disagree with this.

I am sure you would...and excuse me if I have got you wrong, but trust me...for various practical reasons it does not make sense to use the alpha/beta versions of the framework irrespective of the how good it is as compared to the last "stable" one!

@Atul,

Will look into the 4.0 version of the code and let you know the resolution!

mitchellsimoens
17 Jan 2012, 9:56 PM
I am sure you would...and excuse me if I have got you wrong, but trust me...for various practical reasons it does not make sense to use the alpha/beta versions of the framework irrespective of the how good it is as compared to the last "stable" one!

It's always good to test your app with the next release even if it is in alpha/beta stage. Getting stuck in an old version is no good.

findajit
17 Jan 2012, 9:59 PM
@Atul,

You shall use the following code with 4.0 as there are changes in 4.0.7 and due to that you were getting the 'getScopePartent is undefined' error:



doConstrain : function() {
var me = this,
y = this.el.getY(),
max, full,
returnY = y, normalY, parentEl, scrollTop, viewHeight;

//delete me.height;
me.setSize();
full = me.getHeight();
if (me.floating) {
parentEl = Ext.fly(me.el.dom.parentNode);
scrollTop = parentEl.getScroll().top;
viewHeight = parentEl.getViewSize().height;
//Normalize y by the scroll position for the parent element. Need to move it into the coordinate space
//of the view.
normalY = y - scrollTop;
max = me.maxHeight ? me.maxHeight : viewHeight - normalY;
if (full > viewHeight) {
max = viewHeight;
//Set returnY equal to (0,0) in view space by reducing y by the value of normalY
returnY = y - normalY;
} else if (max < full) {
returnY = y - (full - max);
max = full;
}
}else{
max = me.getHeight();
}
// Always respect maxHeight
if (me.maxHeight){
max = Math.min(me.maxHeight, max);
}
if (full > max && max > 0){
me.layout.autoSize = false;
me.setHeight(max);
if (me.showSeparator){
me.iconSepEl.setHeight(me.layout.getRenderTarget().dom.scrollHeight);
}
}
me.el.setY(returnY);
}

Let me know if you still have the problem.

AtulDawkhare
18 Jan 2012, 3:35 AM
Hi ,
Thanks a lot for this help. Thanks for putting so much efforts to get it solved.
Actually I am also learning new things from this example.

Now there is not error in the console.

Only the on scroll I can't see the menu item title properly. This , I mentioned earlier with images when I mentioned about the "getScopeParent()" error.

Let me know what I am suppose to do here.