PDA

View Full Version : Bug in Ext.menu.TextItem



Animal
26 Mar 2007, 6:10 AM
The TextItem class does not create text items with the correct line-height or padding. The span added is missing the "x-menu-item" class. The fix is simply to add it:



/**
* @class Ext.menu.TextItem
* @extends Ext.menu.BaseItem
* @constructor
* @param {String} text
*/
Ext.menu.TextItem = function(text){
this.text = text;
Ext.menu.TextItem.superclass.constructor.call(this);
};
Ext.extend(Ext.menu.TextItem, Ext.menu.BaseItem, {
hideOnClick : false,
itemCls : "x-menu-item x-menu-text", // <-- needs the x-menu-item class
onRender : function(){
var s = document.createElement("span");
s.className = this.itemCls;
s.innerHTML = this.text;
this.el = s;
Ext.menu.TextItem.superclass.onRender.apply(this, arguments);
}
});

jack.slocum
26 Mar 2007, 1:12 PM
The intention for TextItem is to be raw additions of anything you want. I don't think it should apply any CSS to the item. However, I am open to reconsidering that - can you give me an example of what you are doing with it?

Animal
26 Mar 2007, 11:05 PM
I'm just putting an informational piece of text into a MenuBar.

Because the text doesn't have line-height or padding, then if it's the only item (Such as "No menus for user Nige") then the MenuBar element is not sized correctly - it's height is too small.

Without the added "x-menu-item" class:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/menutextitembad.jpg

With :

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/menutextitemgood.jpg

I think that if you put text into a standard, vertical Menu along with outhe standard MenuItems, it would "crunch" the layout because of the lack of line-height and padding for text.

Animal
26 Mar 2007, 11:13 PM
Here's the menu example page with a text item added:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/menutextitembad1.jpg

With this fix:



/**
* @class Ext.menu.TextItem
* @extends Ext.menu.BaseItem
* @constructor
* @param {String} text
*/
Ext.menu.TextItem = function(text){
this.text = text;
Ext.menu.TextItem.superclass.constructor.call(this);
};
Ext.extend(Ext.menu.TextItem, Ext.menu.BaseItem, {
hideOnClick : false,
itemCls : "x-menu-item x-menu-text",
onRender : function(){
var s = document.createElement("span");
s.className = this.itemCls;
s.innerHTML = String.format(
'{0}{1}',
this.icon || Ext.BLANK_IMAGE_URL, this.text);
this.el = s;
Ext.menu.TextItem.superclass.onRender.apply(this, arguments);
}
});


I get this

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/menutextitemgood1.jpg

sjivan
28 May 2007, 11:48 AM
I just ran into this issue myself. Using Ext.menu.Item and setting the text instead of using Ext.menu.TextItem effectively results in the output that Animal produced after his changes to TextItem.I think it is good the have a "raw" addition to the menu but the class TextItem is a little misleading. Maybe a note in the docs of TextItem stating that the contents are added in raw form might be useful.

Sanjiv

cgoss
2 Aug 2007, 12:47 PM
I ran into the same problem when using the FilteredGridView, but neither of these code fixes worked correctly. However, I solved it by just adding a disabled menu item:


menu.add({text:'text item', disabled:true});

Seems to have a bit too much padding, but works nonetheless.