PDA

View Full Version : Forms ?: 2 colums/2 rows with on spanning?



michael.prichard
30 Apr 2007, 11:36 AM
I am so new at Javascript. I am trying to figure out how to build a form with two columns with one row having two columns and the second row spanning that.

I want to build a search page w/

<start datefield> <end datefield>
<search box> <search button>

How should I approach this?

Thanks,
Michael

tryanDLS
30 Apr 2007, 11:41 AM
Look at the dynamic form example - it illustrates multi column forms. There have also been examples posted in the forums of this - specifically building an address entry form.

michael.prichard
30 Apr 2007, 12:38 PM
I have been looking at the examples but I am still a little confused.

Can I have multiple columns within a fieldset?

michael.prichard
30 Apr 2007, 1:20 PM
I use this code:



var top = new Ext.form.Form({
labelAlign: 'top'
});

top.column(
{style:'margin-left:10px'}, // precise column sizes or percentages or straight CSS
new Ext.form.DateField({
fieldLabel: 'Start Date',
name: 'startDate',
}),

new Ext.form.TextField({
fieldLabel: 'Search',
name: 'search',
width: 600
})
);

top.column(
{style:'margin-left:10px', clear:true},

// apply custom css, clear:true means it is the last column
new Ext.form.DateField({
fieldLabel: 'End Date',
name: 'endDate'
})
);

top.end();

top.addButton('Search');

top.render('searchForm');


and get:

http://dev.merazzo.com/extjs_form1.png

I really want something like this:

http://dev.merazzo.com/extjs_form2.png

Do I still use Ext...Form to do this? OR is there there another way?

rqmedes
15 May 2007, 7:08 PM
HI,

I got this to work by wrapping them in a table.
It is a bit of a hack as i couldn't work out how to apply the correct css to get this to work
but it does the job.


Html Code

<div class="x-form-item">
<label>Action Due Date:</label>
<div class="x-form-element">
<table><tr>
<td><input type="text" size="22" name="actionFrom" id="actionFrom" /></td>
<td width="30px" align="center">to</td>
<td><input type="text" size="22" name="actionTo" id="actionTo" /></td>
</tr>
</table>
</div>
</div>



the code for the javascript.



var actionFrom = new Ext.form.DateField({
allowBlank:true
});
actionFrom.applyTo('actionFrom');

var actionTo = new Ext.form.DateField({
allowBlank:true
});
actionTo.applyTo('actionTo');




anywayz hope this can be of help

Animal
15 May 2007, 11:52 PM
Have a play with



Ext.onReady(function() {
var myForm = new Ext.form.Form({
labelAlign: 'top'
});

var top = myForm.fieldset( {
style:'margin-left:10px',
legend:'Date Range'
});
var topLeft = new Ext.form.Column();
myForm.start(topLeft);
myForm.add(new Ext.form.DateField({
fieldLabel: 'Start Date',
name: 'startDate',
}));
myForm.end(topLeft);

var topRight = new Ext.form.Column();
myForm.start(topRight);
myForm.add(new Ext.form.DateField({
fieldLabel: 'End Date',
name: 'endDate'
}));
myForm.end(topRight);
myForm.end(top);

var bottom = myForm.fieldset({
style:'margin-left:10px',
clear:true,
legend:'Search Text'
},
new Ext.form.TextField({
fieldLabel: 'Search',
name: 'search',
width: 600
}
));

myForm.addButton('Search');
myForm.render('searchForm');
});

sturdypine
3 Jun 2007, 10:33 PM
How to put both 'Start Date' label and it's input in the same line???

tryanDLS
4 Jun 2007, 7:00 AM
Please read the form doc - labelAlign can take values 'left', 'right', 'top'.