PDA

View Full Version : How to create a simple drop-down box?


billybob
23 Jun 2007, 2:33 PM
I can't figure out how to do anything at all in this library except the Elements package.


So that's no use because I need a drop down list. Let me tell ya where I'm at...


I go to the API docs, and go to the MenuButton package (thinking that's the right one). That's basically it. I look for the constructor and it says:

public function MenuButton(String/HTMLElement/Element renderTo, Object config)

So I find the syntax of :



//why i'm using this OnReady I've no idea btw, except that is actually runs my functions
//even when i don't want them to
Ext.onReady(function(){
//edited...
var menu = new Ext.menuButton({'mydiv', objectOfWhat?});


});//end of onReady


That's it! That's all I got in 2 hours of figuring how this code is supposed to print to the screen.

I just want the dropdown list blank for now...don't need to worry about filling it in. I just want to see the damn button rendered to the screen. What am I missing here? I have my DIV tag with the id=mydiv.
nbinder
23 Jun 2007, 3:17 PM
Have you seen

http://extjs.com/deploy/ext/docs/index.html

? Follow the link, then go to Examples and Demos, Toolbar and Menus.

You'll see a working example of a dropdown menu. For me that was absolutely sufficient to create the menu I needed. At least, that's a good starting point.
billybob
23 Jun 2007, 3:53 PM
Yeah, but I can't seem to extract the smallest amount of code just to learn what is going on.


For instance, where does the solid blue bar come from? How do i create just the bar? Or just the 'Button w/menu' button on the bar? Nothing works at all if I try to seperate things and the examples sem to be linked to all kinds of css/js files. It's just not straightforward to me at all.


here's another example I just created:



Ext.onReady(function(){


//this is a valid object creation right?
var text1 = new Ext.form.TextArea({
inputType: text,
maxLength: 12
)}

text1.setValue("this a test");
text1.applyTo("mydiv");

alert("never gets here");

});//end of onReady




To me that seems like I'm creating a textfield object, setting the defualt value of the string to = this is a test, and applying the object to the 'mydiv' tag in my HTML file. What am i missing? A concept perhaps?

here are all the files i have as 'include' or imports, if you will, in my html file:


<link rel="stylesheet" type="text/css" href="ext-all.css">
<link rel="stylesheet" type="text/css" href="mycss.css">


<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="ext-core.js"></script>
<script language="javascript" src="basic.js"></script><!-- Common Styles for the examples


And I suspect these are all good because I can use the elements package to do things.
evant
23 Jun 2007, 4:53 PM
Why don't you look at the examples? The code is there in plain text, you can't be trying too hard.

The simplest example for adding a menu:



<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-all.css">
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript">
//create a new menu object
var menu = new Ext.menu.Menu(
{
id: 'mainMenu',
items: [
//add a menu item
new Ext.menu.CheckItem(
{
text: 'I am a menu,
checked: true
})
]
}
);
var tb = new Ext.Toolbar('toolbar'); //create a toolbar and bind it to the HTML element with an id of toolbar
//add the menu to the toolbar button
tb.add(
{
text:'Button w/ Menu',
menu: menu // assign menu by instance
},
);
</script>
</head>
<body>
<div id="toolbar"></div>
</body>
</html>
billybob
23 Jun 2007, 5:32 PM
I have many many times. That code you posted doesn't work for me. I'm pretty sure I dwindled down something similar a 100 different ways today.

The package files are there too....and they work, I have a basic Resize example working where I resize a box.
evant
23 Jun 2007, 5:36 PM
Being vague isn't going to help. What doesn't work? Do you get an error message? If so, what does the error message say?
billybob
23 Jun 2007, 6:02 PM
Being vague isn't going to help. What doesn't work? Do you get an error message? If so, what does the error message say?

Sorry, I thought the same thing, but I had to do something real quick.

No, no errors. No errors from the browser at all. Just nothing displays. Literally, nothing happens.

Does anything appear for you? Are you doing something special?
evant
23 Jun 2007, 6:18 PM
Woops, wrap the code in an onReady block:



Ext.onReady(function()
{
var menu = new Ext.menu.Menu(
{
id: 'mainMenu',
items: [
//add a menu item
new Ext.menu.CheckItem(
{
text: 'I am a menu,
checked: true
})
]
}
);
var tb = new Ext.Toolbar('toolbar'); //create a toolbar and bind it to the HTML element with an id of toolbar
//add the menu to the toolbar button
tb.add(
{
text:'Button w/ Menu',
menu: menu // assign menu by instance
},
);
}
);


Blindly copying code isn't going to get you anywhere (especially when people like me who don't test anything try to help you out ;))
billybob
23 Jun 2007, 8:50 PM
I tried that too, before you posted it, not completely knowing which way was right though. I just blindly copied again in a new file and it worked, and I was screaming WTF! Did you hear me?

So I went to my original html file where I created my DIV tables and such, still not working. But, at least I found out why.


I had the ext-all.css import first, then my own CSS file, then all the libraries (JS), then my JS file.


What I did was move my CSS import statement below the library import and now it works. This is not good...too much time spent on something so trivial.

Thanks for your help!!! Now I can go back and test other things I thought should've been working, but weren't.