PDA

View Full Version : navigation menu



stevieke
4 May 2009, 1:24 AM
Hello everybody

I want to have a navigation menu, but i don't know how to start:
I have readed something about Ext.menu.Menu(); but i can't handle it

what i want is just a navigation menu like this

* Project
* Relation
* ....

Something like "archives" on this page:
http://extjswordpress.net/about/

Thanx in advance
Steven

Animal
4 May 2009, 1:30 AM
Just use a Menu http://extjs.com/deploy/ext-3.0-rc1.1/docs/?class=Ext.menu.Menu

It will contain menu entries.

Examples in your examples directory.

First experiment with a simple Menu configured as region: 'west' of a test page, then when you have got the hang of it, create one in your app.

Simples.

stevieke
4 May 2009, 1:40 AM
thanx animal for the quick response



var menu = new Ext.menu.Menu();
var project = menu.additem({ text: 'Project' });



var panelExtra = new Ext.Panel({
collapsible: true,
collapsed: true,
title: "extra",
items:[menu]
});


Can you say what's wrong with my code then?

greetz steven

Animal
4 May 2009, 2:08 AM
I don't know!

What is wrong with your code?

(Is this a game?)

stevieke
4 May 2009, 2:12 AM
no,it's not a game, i'm serious

it's not displaying and i'm really don't know what i'm doing wrong...

Animal
4 May 2009, 2:13 AM
Is that really your EXACT code?

If so you are ignoring an error.

WHich means yoiu are not serious.

dawesi
4 May 2009, 2:20 AM
I really think you should change your picture back to Dr Cox... it suits your humour... lol...

Animal
4 May 2009, 2:25 AM
That's better.

stevieke
4 May 2009, 2:26 AM
this is my total code



/// <reference path="extjs/adapter/ext/ext-base.js" />
/// <reference path="extjs/ext-all-debug.js" />
Ext.onReady(function() {
var panelTree = new Ext.Panel({
collapsible: false,
html: "ok2"
});

// Create the menu
var menu = new Ext.menu.Menu();
var item = menu.add({ text: 'Project' });


var panelExtra = new Ext.Panel({
collapsible: true,
collapsed: true,
title: "extra",
items:[menu]
});

//PanelWest
var panelWest = new Ext.Panel({
region: "west",
collapsible: false,
items: [panelTree, panelExtra],
width: "20%"
});

//PanelCenter
var panelCenter = new Ext.Panel({
region: "center",
collapsible: false,
html: "ok",
width: "20%"
});

//Het vaste window
var win = new Ext.Window({
title: "Project",
renderTo: Ext.getBody(),
closable: false,
width: "95%",
height: 800,
plain: true,
layout: "border",
items: [panelWest, panelCenter],
resizable: false,
draggable: false,
collapsible: false,
maximizable: true
});
win.show();
});


everything is rendering, but when i collapse panelExtra it stays white...

so it doesn't give an error,but no result either

Animal
4 May 2009, 2:29 AM
You have overnesting, and some no layouts.

You don't need to put the Menu in a Panel. It's a BoxComponent in its own right, it will render itself when asked to.

Also, panelWest has two child Components (One of which, as discussed will be simply a Menu). How are you hoping that it will layout and size these two child Components?

stevieke
4 May 2009, 2:42 AM
maybe it's a bit overnesting, but my extra panel is rendering. So the two child components are sized and rendered.

I just want to know how i can build that menu...

Please

Animal
4 May 2009, 2:48 AM
Did you see the examples/menu directory?

Just create a Menu with items