PDA

View Full Version : Main Menu Window Help



daleedom
5 Feb 2010, 6:09 AM
Yes I know this is ugly, but it is quick and dirty and effective.

I am trying to create a simple window with one or more columns of Buttons to serve as a main menu. I have a working example (see below) but I am trying to clean it up a bit.

The FieldSet border appears half way down the window, and I would like to center the buttons better in the available windows space.

I know enough of ExtJs to be dangerous!

If anyone can give me another approach or point to a thread or example that deals with this that would be great!

Thanks!



var column1={
xtype:'fieldset',
columnWidth: 1,
bodyStyle: 'padding: 4px 0px 25% 25%',
margins: 10,
items: [
{
xtype: "button",
text: Menu One' ,
width: 100 ,
style: {marginBottom: '10px'},
handler: function() {
alert('Btn 1 pressed');
}
},
{
xtype: "button",
text: 'Menu Two' ,
width: 100 ,
style: {marginBottom: '10px'},
handler: function() {
alert('Btn 2 pressed');
}
}
]
}
var MenuForm = new Ext.FormPanel({
anchor: '100%',
layout: 'column',
default: {bodyStyle: 'padding:15px'},
items: [ column1 ]

});


var win = new Ext.Window({
layout:'fit',
width: 200,
height: 300,
title: 'Main Menu',
closable: true,
resizable: false,
plain: true,
border: false,

items: [ MenuForm ]
});

MiamiCoder
6 Feb 2010, 5:41 PM
I will respectfully ask you to first fix the glaring errors in your sample code. For example, missing quotes and invalid properties.

daleedom
7 Feb 2010, 7:16 AM
Thank you for your constructive critique. I am sure the code hurt your eyes.

I found the glaring JS errors. However, my problem is that I don't fully understand the ExtJS framework....Like I said I know enough to be dangerous. So the Invalid parameters....I am not sure which is which. It may be I am confusing parameters that belong in a Parent container or a child container or xtype.

My main reason for posting here to help to get things clearer in my head. I am sure for you and many here my errors are so so obvious it is painful. However, half of being smart is knowing what you are dumb at. And I am really dumb right now concerning ExtJS.

So....Here is my corrected code. Any addition critque would be greatly appreciated.....Thanks



var column1={
xtype:'fieldset',
columnWidth: 1,
bodyStyle: 'padding: 4px 0px 25% 25%',
margins: 10,
items: [
{
xtype: 'button',
text: 'Menu One' ,
width: 100 ,
style: {marginBottom: '10px'},
handler: function() {
alert('Btn 1 pressed');
}
},
{
xtype: 'button',
text: 'Menu Two' ,
width: 100 ,
style: {marginBottom: '10px'},
handler: function() {
alert('Btn 2 pressed');
}
}
]
};

var MenuForm = new Ext.FormPanel({
anchor: '100%',
layout: 'column',
default: {bodyStyle: 'padding:15px'},
items: [ column1 ]

});


var win = new Ext.Window({
layout:'fit',
width: 200,
height: 300,
title: 'Main Menu',
closable: true,
resizable: false,
plain: true,
border: false,

items: [ MenuForm ]
});

daleedom
12 Feb 2010, 6:47 AM
I am sorry it took so long to get back to you....I thought I had posted a response, but it did not "take".

Anyway here is the updated code with the Glaring syntax errors removed. Apologies.

But the Glaring parameter errors remain because that is why I am posting....For those who know ExtJs better then I and can see the glaring issue fast.

I am trying to get my head around it all. It is a bit confusing.






//**** Generated: 08/02/10 : 22:04:13 ***///

function CMainMenu()
{
var column1={
xtype:'fieldset',
columnWidth: 1,
bodyStyle: 'padding: 4px 0px 25% 25%',
margins: 10,
items: [
{
xtype: "button",
text: 'Core Controls' ,
width: 100 ,
style: {marginBottom: '10px'},
handler: function() {
var oWin = new CCoreControls();
oWin.show();
}
},
{
xtype: "button",
text: 'Applications' ,
width: 100 ,
style: {marginBottom: '10px'},
handler: function() {
var oWin = new CApplicationList();
oWin.show();
}
}
]
};

var MenuForm = new Ext.FormPanel({
anchor: '100%',
layout: 'column',
default: {bodyStyle: 'padding: 15px'},
items: [ column1 ]

});


var win = new Ext.Window({
layout:'fit',
width: 200,
height: 300,
title: 'Main Menu',
closable: true,
resizable: false,
plain: true,
border: false,

items: [ MenuForm ]
});

win.show();
}