PDA

View Full Version : Vertical Navigation



hga77
20 Sep 2007, 7:05 AM
Hi,

I need a vertical menu within the west panel. You can have a look here: Link (http://www.greenroom-digital.com/sony/test_cms/html/)

The menu is actually made of two or three items max. So its just a matter of putting 2 or three buttons under each other. Or ofcourse if there is a nice ext method already build-in the framework, that I can use.

I have a div within the west-div called "nav-div". I think I should add the menu there.

So, you see I can't even put three buttons under each other...:">

Help please.

Thanks

nbinder
20 Sep 2007, 7:18 AM
I did the same thing the following (easy) way:

I used normal tabs and css to hide their headers.
Then i created a button group and assigned tabs.activate('name') to each one of them.
You can then change their look via css again.

Perhaps not the best way, but (as I said) an easy one.

hga77
20 Sep 2007, 7:27 AM
Thsnk for the reply.

Is there an example somewhere that someone knows of that I can just use? Sorry to ask this but I am very new to ext syntax.

Assuming I have three menu items, would it be possible to put three ext.ToolBars in a vertical order. Then adding a button within each ToolBar?

If so, how?

Thanks

Animal
20 Sep 2007, 12:41 PM
Use a Menu.

http://extjs.com/deploy/ext/docs/output/Ext.menu.Menu.html

hga77
21 Sep 2007, 12:59 AM
Thanks Animal.

Thing is I can't find an example of using it and making the items vertical. I just need an example please, if you would be so kind as to provide me with that example, that would be Ext-ellent :)

Animal
21 Sep 2007, 1:17 AM
Menu items are vertical. Just look at http://extjs.com/deploy/ext/examples/menu/menus.html

hga77
21 Sep 2007, 1:36 AM
Thanks.

I don't need a "drop down" vertical menu.

I just need to have three items under each other, with text in each, and being left aligned.

I have used the button component and its working good. But, I cant get the text to left align.

Have a look here:
http://www.greenroom-digital.com/sony/test_cms/html

user: admin
pass: admin

I've explained here: How do I left align button text (http://extjs.com/forum/showthread.php?t=13049)

Animal
21 Sep 2007, 1:41 AM
That's what a menu is. It's just a block of divs, one under the other each of which which react to being clicked on.

They only "drop down" (or fly out) if they are submenus of other menus.

hga77
21 Sep 2007, 1:58 AM
Now I just need to align the text within those buttons to left :((

hga77
21 Sep 2007, 2:11 AM
That's what a menu is. It's just a block of divs, one under the other each of which which react to being clicked on.

They only "drop down" (or fly out) if they are submenus of other menus.

Uhaa..I see what you're saying. So i can change it a make it show all the time, not drop down. But would it be possible for you to give me a simple example. That would really help me as I am very stuck at this point.

Thanks

Animal
21 Sep 2007, 2:23 AM
OK, first try, see what happens:



var menu = new Ext.menu.Menu({
id: 'navMenu',
items: [{
text: 'Home Admin',
handler: myFunc // The function that processes clicks
},{
text: 'Manage Newsletters',
handler: myFunc
},{
text: 'Add Newsletters',
handler: myFunc
}]
});
menu.render("west-div");


We can fix any probs with it as we go...

hga77
21 Sep 2007, 2:45 AM
Thank you.

I have added that in, but nothing displays in the "west-div".

Animal
21 Sep 2007, 2:51 AM
OK,



var menu = new Ext.menu.Menu({
cls: 'west-nav-menu',
id: 'navMenu',
items: [{
text: 'Home Admin',
handler: myFunc // The function that processes clicks
},{
text: 'Manage Newsletters',
handler: myFunc
},{
text: 'Add Newsletters',
handler: myFunc
}]
});
menu.render("west-div");
menu.el.show();


and in your CSS



.west-nav-menu {
position:static!important
}

hga77
21 Sep 2007, 2:58 AM
Added that but still nothing. btw thanks for your help :)

Animal
21 Sep 2007, 3:37 AM
Use the Menubar user extension. Add a file called Menubar.js containing this:



Ext.menu.Menubar = function(config){
Ext.menu.Menubar.superclass.constructor.call(this, config);
this.cls += " x-menubar";
if (this.orientation == "vertical") {
this.subMenuAlign = "tl-tr?";
this.cls += " x-vertical-menubar";
} else {
this.subMenuAlign = "tl-bl?";
this.cls += " x-horizontal-menubar";
}
};

Ext.extend(Ext.menu.Menubar, Ext.menu.Menu, {
plain: true,
cls: "",
minWidth : 120,
shadow : false,
orientation: "horizontal",

// private
render : function(container){
if(this.el){
return;
}
if (container) {
var el = this.el = Ext.get(container);
el.addClass("x-menu");
} else {
var el = this.el = new Ext.Layer({
cls: "x-menu",
shadow:this.shadow,
constrain: false,
parentEl: this.parentEl || document.body,
zindex:15000
});
}

this.keyNav = new Ext.menu.MenuNav(this);

if(this.plain){
el.addClass("x-menu-plain");
}
if(this.cls){
el.addClass(this.cls);
}
// generic focus element
this.focusEl = el.createChild({
tag: "a", cls: "x-menu-focus", href: "#", onclick: "return false;", tabIndex:"-1"
});
var ul = el.createChild({tag: "ul", cls: "x-menu-list"});
ul.on("click", this.onClick, this);
ul.on("mouseover", this.onMouseOver, this);
ul.on("mouseout", this.onMouseOut, this);
this.items.each(function(item){
var li = document.createElement("li");
li.className = "x-menu-list-item";
ul.dom.appendChild(li);
item.render(li, this);
}, this);
this.ul = ul;
// this.autoWidth(); // not for menu bars.
},

show: function(container) {
if(!this.el){
this.render(container);
}
this.fireEvent("beforeshow", this);
this.fireEvent("show", this);
},

hide: function(){
if(this.activeItem){
this.activeItem.deactivate();
delete this.activeItem;
}
},

onClick : function(e){
if (this.activeItem) {
this.activeItem.deactivate();
delete this.activeItem;
}
else {
var t;
if(t = this.findTargetItem(e)){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
}
}
this.fireEvent("click", this, e, t);
}
e.stopEvent();
},

onMouseOver : function(e){
if (this.activeItem) {
var t;
if(t = this.findTargetItem(e)){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
}
}
this.fireEvent("mouseover", this, e, t);
}
},

onMouseOut : Ext.emptyFn
});



and do



var menu = new Ext.menu.Menubar({
orientation: 'vertical',
id: 'navMenu',
items: [{
text: 'Home Admin',
handler: myFunc // The function that processes clicks
},{
text: 'Manage Newsletters',
handler: myFunc
},{
text: 'Add Newsletters',
handler: myFunc
}]
});
menu.render("west-div");

hga77
21 Sep 2007, 6:03 AM
Thank you very much.

This has so far helped me understand many Ext concepts.

The menu now displays, however, How would I go about defining the look of rollOver and rollOut. At present, it does not display any changed state while mouse rolling over/out on an item.

And one more question :)

The handler function is not being called, where as before it was:

var menu = new Ext.menu.Menubar({
orientation: 'vertical',
id: 'navMenu',
items: [{
text: 'Home Admin',
desc: 'home',
handler: menuHandler
},{
text: 'Manage Newsletters',
desc: 'manage_newsletters',
handler: menuHandler
},{
text: 'Add Newsletters',
desc: 'add_newsletter',
handler: menuHandler
}]
});
menu.render("west-div");

function menuHandler(item, e)
{
alert(item.desc);
switch (item.desc)
{
case 'home' :
getApp().broadcastEvent('onClickHome');
break;
case 'manage_newsletters' :
getApp().broadcastEvent('onClickAddNewsletter');
break;
case 'add_newsletter' :
getApp().broadcastEvent('onClickManageNewsletter');
break;
}
}

Animal
21 Sep 2007, 6:30 AM
Any errors from Firebug?

hga77
21 Sep 2007, 6:36 AM
No errors.

I also uploaded the "Menubar.css". But still no go.

hga77
21 Sep 2007, 6:38 AM
I also checked Charles and all files are loaded, ie. non are missing, no broken paths...

Animal
21 Sep 2007, 6:47 AM
menuHandler is defined after being referenced...

Not sure abuot highlighting though. Something to do with the menu being active but I can't quite remember now.

hga77
21 Sep 2007, 6:59 AM
menuHandler is defined after being referenced...

Not sure abuot highlighting though. Something to do with the menu being active but I can't quite remember now.

Ok Yeah I see...Same with actionscript...I moved the function before the reference but still not working

I even did this just to see:

handler: function(e,o){alert("clicked");menuHandler();}

But still nothing.

And I can't figure out the rollovers.

Hmm

Animal
21 Sep 2007, 7:01 AM
You'll have to dive into the source code.

hga77
21 Sep 2007, 7:07 AM
Thanks.

Would it be just in the Menubar.js you sent? or would I have to look at the Ext source code too?

hga77
21 Sep 2007, 7:52 AM
I dont think this menu was build to be used this way, vertical without without dropping down. Hence the complications.


onClick : function(e){
if (this.activeItem) {
this.activeItem.deactivate();
delete this.activeItem;
}
else {
var t;
if(t = this.findTargetItem(e)){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
}
}
this.fireEvent("click", this, e, t);
}
e.stopEvent();
},

onMouseOver : function(e){
if (!this.activeItem) {
var t;
if(t = this.findTargetItem(e)){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
}
}
this.fireEvent("mouseover", this, e, t);
}
},

onMouseOut : Ext.emptyFn


When I click an item, it shows the rollOver state. When I roll of, the over state stays. When I click again, the over state clears.

The following function for rollOut:

onMouseOut : Ext.emptyFn

Doesn't seem to be doing anything. Since rolling out doesn't clear the state. And ofcourse the handler doesn't work...

I've hit a brick wall here. This has been great as a learning experience but definitely time consuming for just a simple navigation...

hga77
21 Sep 2007, 8:18 AM
ok, I did the following:

onClick : function(e){

var t;
if(t = this.findTargetItem(e)){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
}
}
this.fireEvent("click", this, e, t);

e.stopEvent();
},

onMouseOver : function(e){

var t;
if(t = this.findTargetItem(e)){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
}
}
this.fireEvent("mouseover", this, e, t);

},

onMouseOut : Ext.emptyFn


Now the onMouseOver works. But the onMouseOut doesnt work!
When you roll out the entire menu, the last item you were at remains highlighted.

I think the following is not clearing the highlight:

onMouseOut : Ext.emptyFn

hga77
21 Sep 2007, 8:32 AM
I changed the onMouseOut function. Now its like this:

onClick : function(e){

if (this.activeItem) {
this.activeItem.deactivate();
delete this.activeItem;
}
e.stopEvent();
},

onMouseOver : function(e){
var t;
if(t = this.findTargetItem(e)){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
}
}
this.fireEvent("mouseover", this, e, t);
},

onMouseOut : function(e){
this.activeItem.deactivate();
delete this.activeItem;
}


This works. But...

I need the handler to work. Its driving me crazy why its not calling my function. Can someone please give me a hand here so we can finally close this thread. Thanks

Animal
21 Sep 2007, 11:08 PM
It should not be this difficult. Perhaps I posted old code of the Menubar class. I have used it in orientation:'horizontal' mode as a permanent menu bar, and I have seen a demo page where it is in vertical mode...

I think my version has been improved upon: http://extjs.com/learn/Extension:MenuBar

Demo: http://ux.designism.nl/ux/menubar/

The demo seems to work in vertical mode - I stopped in debug and hacked its config...

hga77
22 Sep 2007, 4:00 AM
Thank you for all your help. I've decided to use three buttons instead.