PDA

View Full Version : Problem with css of Textfield and DateField


King
5 Jun 2007, 11:04 PM
I've met a problem.

code:


<div class="x-form-element">
<ul>
<li>TextField：<input type="text" size="24" name="required1" id="required1" /></li>
<li>TextField：<input type="text" size="24" name="required2" id="required2" /></li>
<li>DateField：<input type="text" size="24" name="required" id="date-1" /></li>
<li>ComboBox：<select id="cb-1"><option value="sunny">sunuy</option></select></li>
<ul>
</div>


But I find there is something wrong like this:

http://116.img.pp.sohu.com/images/2007/6/6/14/29/113984619b5.gif

Why the Datefield's textfield and the ComboBox's textfield appear in a new line just like the "TextField" above?

How can I make them stay with the text in a same line?

Where can I edit in css?
King
6 Jun 2007, 2:04 AM
help me, please.
:s
jsakalos
6 Jun 2007, 2:41 AM
Form has labelAlign config property, check that. Or, what's width of the container? Do you override some Ext styles in your css file?

If it doesn't help post also code in php tags.
King
6 Jun 2007, 5:47 PM
THX......

But it still doesn't work......

Please help me check this:




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-type" content="text/html" />
<title>Tutorial: Ext1.1 of CSS of Form</title>
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="tutorials.css" />
<script language="javascript" type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

var re1 = new Ext.form.TextField({
allowBlank:false
});
re1.applyTo('required1');

var re2 = new Ext.form.TextField({
});
re2.applyTo('required2');

var dt1 = new Ext.form.DateField({
format:'Y-m-d'
});
dt1.applyTo('date-1');

var cb1 = new Ext.form.ComboBox({
transform:'cb-1'
});

});
</script>
</head>
<body>
<form id="form1">
<div class="x-form-element" style="width:80%; margin-left:auto; margin-right:auto">
<ul>
<li style="padding-bottom:15px">TextField：<input type="text" size="24" name="required" id="required1" /></li>
<li style="padding-bottom:15px">TextField：<input type="text" size="24" name="required" id="required2" /></li>
<li style="padding-bottom:15px">DateField：<input type="text" size="24" name="required" id="date-1" /></li>
<li style="padding-bottom:15px">ComboBox：<select id="cb-1"><option value="sunny">sunuy</option></select></li>
</ul>
</div>
</form>
</body>
</html>
jsakalos
6 Jun 2007, 6:13 PM
Hmm,

you're converting only part of your html markup to Ext fields and you do not handle labels at all. This concept is not likely to work.

The best would be to take an example from http://extjs.com/deploy/ext/examples/form/dynamic.html make it working on your system w/o any change and then to adjust it to your needs (deleting unnecessary parts, renaming fields, adding new ones, etc.)
Animal
6 Jun 2007, 11:23 PM
I send HTML forms which are then enhanced by Ext.

I create an Ext.form.BasicForm from existing markup.

But I made my input field tag handlers create identical markup to what Ext creates when it renders Fields. So I end up with eg:



<form class="x-form " name="AspicioForm1181200814312"
id="AspicioForm1181200814312" action="/aspicio/MaintainEntity.do" method="POST" >
<fieldset class=" x-form-label-left" >
<legend>Primary data</legend>
<div class="x-form-item">
<label style="width:100px" for="AspicioForm1181200814312FilterField0">Code</label>
<div class="x-form-element asp-form-element">
<input name="code" id="AspicioForm1181200814312FilterField0"
class="x-form-text" style="text-transform:uppercase;" size="3" maxlength="3">
</div>
</div>

<div class="x-form-item">
<label style="width:100px" for="AspicioForm1181200814312TextField1">Name</label>
<div class="x-form-element asp-form-element">
<input name="name" id="AspicioForm1181200814312TextField1" class="x-form-text"
size="50" maxlength="50" >
</div>
</div>
</fieldset>
</form>
valc
18 Oct 2007, 3:47 AM
Animal,

What does your class "asp-form-element" do ?


V.