Create Panel with title bar?

[Westside]

Hi,

I am using v 2.0, but clearly I posted this in 1.0 it looks like.

I am pretty new to Ext JS and I have been reading various tutorials, etc trying to do something useful and I can't figure out how to create a basic panel with a title bar or a panel with an area for a menu bar.

Can someone provide an example with HTML. It does not need to be long and exhaustive. I basically want to create a panel (with rounded corners ideally) and put my content (text and an html form) in the panel.

How can I do this?

Thanks,

-Westside

[Animal]

Start simple, and add to learn.

Here's the beginning:



new Ext.Panel({
title: 'Hello World',
frame: true,
height: 200,
width: 200,
html: 'Hello world content',
renderTo: document.body
});

[Animal]

This is very simply covered in the API docs and in the examples folder.

[Westside]

Hi,

Thanks for the quick reply. Yes I did see this part in the api and perhaps I phrased my question wrong. In any case your code snippet works, but I am only able to get it to work by putting it within:

Ext.onReady(function() {

});

Is this the way it is by default? Once the page has loaded, then you actually instantiate the panel and define the properties/values?

-Westside

[Animal]

Yes, the document has to be ready before you can start fiddling with it with javascript, even if it's empty, it still has to have a document.body there ready to access and start adding elements to.

[Westside]

Hi,

Ok, that helps, it does raise the question, how do you position things on the page where you want to if you can only fiddle with the js after it has loaded. The code you provided did create a panel, but I was not able to specify where I want it, I guess that is the problem I am having, now that I created the panel once the page loaded, how do I position it where I want it? Do you create sort of a empty layout full of divs and then populate them accordingly?

Traditionally I would just write out the HTML and setup the layout of the page in HTML, does this change when using Ext JS? Do I have to handle positioning within this onReady() function?

Sorry for the basic questions, I think once I get these answered I will understand the big picture.

Thanks,

-Westside

[Animal]

What, position things pixel by pixel?

You do not do that.

You use an Ext.Viewport to give you page the regions that your page design requires.

What does your page design look like?

[Westside]

Hi,

As of now, there is nothing on my page except for this panel. Traditionally I would just write out the HTML and use either tables or divs to position things. I guess I am looking for an example that shows the HTML and the use of Ext JS.

For example, if you look at the "view source" for the page "ext-2.0-rc1/docs/index.html, there is not a lot of html there aside from the js and the css, the body tag really only has:

<div id="header">
<a href="http://extjs.com" style="float:right;margin-right:10px;"><img src="resources/extjs.gif" style="width:83px;height:24px;margin-top:1px;"/></a>
<div class="api-title">Ext 2.0 - API Documentation</div>
</div>

<div id="classes"></div>

<div id="main"></div>
<select id="search-options" style="display:none">
<option>Starts with</option>

<option>Ends with</option>
<option>Any Match</option>
</select>
</body>
---------------------------------------------

So in my earlier post, your code worked with creating the panel, but how do you control where you want it? Do you create the empty divs in the HTML first and then create the Panel using Ext.Panel and render that Panel using " renderTo: 'myDiv' "

Any thoughts?

-Westside

[Animal]

Yes.

Forget HTML.

Look at the examples in examples/layout

[mxu]

new Ext.Panel({
...
frame: true,
...
});

i tried to set frame: true but background become 'blue', how can I adjust background color
at frame: true, ?

[Animal]

That is a theme provided by Ext.

Ext's CSS is quite complicated, so I wouldn't try to mess with it at the stage you are at now.

There are several user-written themes available which plug in new css style files.

But for now, Shouldn't you be learning how the classes work rather than worrying about froth like colour?