PDA

View Full Version : how can i find SIMPLE examples on layouts and Forms?



elhanan
1 Nov 2010, 3:58 AM
hi..

i'm looking for a way to separately define TextFields,CheckBox, lables, and then attach them to a form (meaning i don't want to do the whole item inline array thing. to define a variables and render them to various divs, and then contain them to a form.

i'm rather confused becouse the examples show the use Ext.form.form, and i only FormPanel. is there a difference?
also do i know another object to display the form (i see the use of window object is being employed.

so i wanna know the principal of how layout work, and if it's possible to define one large form, and display several groups of panels in it.

Condor
1 Nov 2010, 4:03 AM
No, no, NO!!! Do NOT render components inside a layout!!!

Instead, add() components to the container and call container.doLayout().

Example:

var form = new Ext.form.FormPanel({...});
var field1 = new Ext.form.TextField({...});
var field2 = new Ext.form.ComboBox({...});
form.add(field1);
form.add(field2);
form.doLayout();

and yes, you can put panels (fieldsets, tabpanels or whatever component/container you like) in a form.

elhanan
1 Nov 2010, 4:41 AM
yes this is what i did:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title id='title'>HTML Page setup Tutorial</title>
<link rel="stylesheet" type="text/css" href="./ext321js/resources/css/ext-all.css" />
<script type="text/javascript" src="./extjs321/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="./extjs321/ext-all-debug-w-comments.js">
</script>

<script type="text/javascript">


var form = new Ext.form.FormPanel({
baseCls: 'x-plain',
labelAlign: 'right',
labelWidth: 175,
buttonAlign: 'right'
});

var employee_name = new Ext.form.TextField({
fieldLabel: 'Name',
name: 'name',
width: 190
});

var employee_birthDate = new Ext.form.DateField({
fieldLabel: 'Birth Date',
name: 'birthDate',
width: 90,
allowBlank: false,
format: 'm-d-Y'
});

var employee_active = new Ext.form.Checkbox({
fieldLabel: 'Active',
name: 'active'
});

form.add(employee_name);
form.add(employee_birthDate);
form.add(employee_active);


form.doLayout();

</script>
</head>
<body>
<div id="employee-form">
</div>
</body>
</html>


and i.. got nothing, i mean NOTHING, no script error (using fire bug) no form, not rendering, zilch, it's very frustrating.

btw what exactly should be in the tomcat?

Animal
1 Nov 2010, 4:46 AM
If (and it's a big if) you are going to use isolated Ext widgets inside an old fashioned HTML "web page" (As opposed to using a Viewport to encapsulate the whole application), then you render the outermost Container. in this case, your form.

Condor
1 Nov 2010, 4:47 AM
You are never rendering the form!

Ext.onReady(function(){
form.renderTo('employee-form');
});
(but I would recommend using an Ext.Viewport instead).

elhanan
1 Nov 2010, 5:04 AM
i have no idea what's viewPort, as i said eariler the reason i need seperate widgets is that we have custom jsp tags for each widget which will use Velolicty Template engine to render the final output, so i have no control over the layout itself.

elhanan
1 Nov 2010, 5:07 AM
i added that exact same line to the buttom of the script tags and firebugs says renderTo is not a function.

Condor
1 Nov 2010, 5:13 AM
Can you post what your Velocity templates generate now?

elhanan
1 Nov 2010, 5:27 AM
i did , you saw them, a while back:), but i havn't gotten that far yet, what you are seeing is a simple html page i created.
i'm not even using tomcat, just locally.

i'm also not sure, i've copied everything i need to .extjs321 folder, right now i have only adatpers, resources and the contenrs of the root folder, is there something else?