PDA

View Full Version : add Menu to a tbar



libertux
28 Oct 2007, 1:56 AM
Hi
is this code correct?



tbar:[{
tooltip:{title:'File Menue', text:'This is the File Menue!'},
text:'File'
menu:menu = new Ext.menu.Menu(..... <------ I MEAN THIS PARAMETER!
}

if no, haw can i add a menue to a window tbar?
THNKS

28 Oct 2007, 4:30 AM
no menu =


menu : new Ext.menu.Menu({config info})

Animal
28 Oct 2007, 4:46 AM
The result of an assignment statement is the value being assigned. If you want to save the menu into a variable to reference later, then that's a compact way of doing it.

C and Java both work like this which allows you to write tight (if a little less understandable) code. For example



if ((this.result = getResult()) == "test")) {
}

Animal
28 Oct 2007, 4:47 AM
The OP does need a comma between all the property declarations though. Like after 'File'

Animal
28 Oct 2007, 4:50 AM
And the tooltip spec is either text, or a config object for an Ext.QuickTip.

An Ext.QuickTip is a Panel. To specify a Panel's content use html:'This is a panel's <b>content</b>'

libertux
28 Oct 2007, 6:06 AM
hi thks for replay ;)
i test this code


createDesigner : function(src){
var desktop = this.app.getDesktop();

var win = desktop.getWindow('bogus'+src.windowId);
if(!win){win = desktop.createWindow({
id: 'bogus'+src.windowId,
title:src.text,
width:640,
height:480,
iconCls: 'bogus',
shim:true,
animCollapse:true,
constrainHeader:true,

tbar:new Ext.Toolbar([{
text:'Our first Menu',
menu:{
id: 'basicMenu',
items:[{
text: 'An item'
},{
text: 'An item2'
}]
}
}]);
});
}
win.show();
}


but it not work
any help
thks

Animal
28 Oct 2007, 7:59 AM
'not work'?

Well, thanks for the hints. I'll just get my crystal ball out...

Animal
28 Oct 2007, 8:07 AM
I just rejigged it to run without your other classes, and ran it right here in the Firebug console like this:



createDesigner = function(src){
var win = Ext.getCmp('bogus'+src);
if(!win){
win = new Ext.Window({
id: 'bogus'+src,
title:src,
width:640,
height:480,
iconCls: 'bogus',
shim:true,
animCollapse:true,
constrainHeader:true,
tbar:new Ext.Toolbar([{
text:'Our first Menu',
menu:{
id: 'basicMenu',
items:[{
text: 'An item'
},{
text: 'An item2'
}]
}
}])
});
}
win.show();
}
createDesigner("Foo Bar")

Animal
28 Oct 2007, 8:09 AM
If you do not look for error messages, you are not developing.

You code had basic syntax errors in.

libertux
28 Oct 2007, 11:05 AM
hi evrybody (specialy : animal !)
thks its work naw ;)
the code is :


...
createDesigner : function(src){
var acc =function(event){
Ext.MessageBox.show({
title: 'New Clicked',
msg: 'New Orel Process Diagram',
width:400,
buttons: Ext.MessageBox.OK,
});
}

var qit=function(event){
win.close();
};


var desktop = this.app.getDesktop();
var menud = new Ext.menu.Menu({
id:'mn',
items:[{text:'New', handler:acc},{text:'Open'},'-',{text:'Save'},'-',{text:'Exit', handler:qit}]
});

var win = desktop.getWindow('bogus'+src.windowId);
if(!win){win = desktop.createWindow({
id: 'bogus',
title:src.text,
width:640,
height:480,
iconCls: 'bogus',
shim:true,
animCollapse:true,
constrainHeader:true,
tbar:[{text:'File', menu:menud},{text:'Edit'}]
});
}
win.show();
}
...

the result is :

http://www.screenshots.cc/view_thumb/4f5ba2034/1.PNG
link : http://www.screenshots.cc/view_image/4f5ba2034/1.PNG
naw i read in api document that 'window' have a public propertie called 'body'
haw can we use it?
are there a tutorial?
THKS

Animal
28 Oct 2007, 12:45 PM
A body is one of these: http://extjs.com/deploy/dev/docs/?class=Ext.Element

You may use it to contain HTML if you want.

Or, you may use the Panel itself as a layout host to contain other Panels.

Those are the two ways of using a Panel. Containing HTML or a layout.

libertux
29 Oct 2007, 3:33 AM
hai (animal ;) )
can you give me a link to a totrial to be able to insert a layout to a window panel ?
i can't see a panel attribute or method in the window API !

THKS

libertux
29 Oct 2007, 4:39 AM
HI everybody ;)
I read that i can build my app in a 'Viewport' then can i insert this 'Viewport' in a window?
if not what about a panel (adding it into a window)?
THKS

29 Oct 2007, 10:52 AM
you can set the layout of the window to 'border', which essentially achieves the same result inside of a window.

libertux
30 Oct 2007, 1:32 AM
hi every body ;)
i have to create an app like shown in this :
http://img89.imageshack.us/img89/8393/ttuu0.th.jpg (http://img89.imageshack.us/my.php?image=ttuu0.jpg)

can i made it into a layout and insert the layout to layout property of a window
THKS

libertux
30 Oct 2007, 3:26 AM
hi every body
i maade this into a window code :


var win = desktop.getWindow('bogus'+src.windowId);
if(!win){win = desktop.createWindow({
id: 'bogus',
title:src.text,
width:640,
height:480,
iconCls: 'bogus',
shim:true,
animCollapse:true,
constrainHeader:true,
border:
new Ext.Panel({
title: 'Border Layout',
layout:'border',
items: [{
title: 'North Panel',
region: 'north',
height: 20,
minSize: 15,
maxSize: 30,
split: true, initialSize: 50
},{
title: 'South Panel',
region: 'south',
height: 20,
minSize: 75,
maxSize: 250,
margins: '0 5 5 5',
split: true, initialSize: 50
},{
title: 'West Panel',
region:'west',
width: 20,
minSize: 10,
maxSize: 30,
split: true, initialSize: 100
},{
title: 'East Panel',
region:'east',
width: 20,
minSize: 10,
maxSize: 30,
split: true, initialSize: 100
},{
title: 'Main Content',
region:'center',
}]
})


});
}
win.show();
}


the window is shown but no spliter !!!!
can you help please ;)

libertux
30 Oct 2007, 5:19 AM
Hi I made it :D :))
http://img98.imageshack.us/img98/622/11ld7.th.jpg (http://img98.imageshack.us/my.php?image=11ld7.jpg)

that's the code if it can be usefull for someone ;):


var win = desktop.getWindow('bogus'+src.windowId);
if(!win){win = desktop.createWindow({
id: 'bogus',
title:src.text,
width:640,
height:480,
iconCls: 'bogus',
shim:true,
animCollapse:true,
constrainHeader:true,

layout:'border',
items: [{
//title: 'South Panel',
region: 'south',
height: 100,
minSize: 75,
maxSize: 250,
margins: {top: 0, left: 5, right: 5, bottom: 5},
split:true
},{
//title: 'West Panel',
region:'west',
margins: {top: 5, left: 5, right: 0, bottom: 0},
cmargins: '5 5 0 5',
width: 200,
minSize: 100,
maxSize: 300,
split:true
},{
//title: 'Main Content',
region:'center',
margins: {top: 5, left: 0, right: 0, bottom: 0},
split:true,

},{
//title: 'east Panel',
region:'east',
margins: {top: 5, left: 0, right: 5, bottom: 0},
cmargins: '5 5 0 5',
width: 200,
minSize: 100,
maxSize: 300,
split:true
}],


tbar:[{text:'File', menu:menud},{text:'Edit'}]
});
}
win.show();
}


THKS

30 Oct 2007, 5:38 AM
please post 2.x questions in the 2.x section in the future :)