PDA

View Full Version : [SOLVED] Custom form layout, help needed



Roger BORDEAUX
2 Jan 2008, 3:01 AM
Hi everyone and happy new year.

I would like to convert a desktop database application to a php/mysql one. I would like that the two applications have exactly the same form layout. I already wrote a script to automatically build the forms using html and css. I would like to use Ext to manage the form, field validation and Ajax requests.

It is very simple to place textfields on a form if you are using the default Ext behavior.

But it is not very clear for me how the place a textfield (or other widgets) on a form to a given place with a given heigth and width (outside the way ext does it by default).

I would like to know the best way to place items on the form using extjs objects.

I thank you in advance for any suggestions.

Best regards

Roger

Roger BORDEAUX
3 Jan 2008, 12:57 AM
What do you think the best way is ?

Use BasicForm on an existing form where the fields and labels are positionned and sized using HTML +CSS

Or use FormPanel : Here I don't see any solution. How to place just a label or a textfield where I want on the form ?

Any help will be appreciate.

Best regards,

Roger

Roger BORDEAUX
6 Jan 2008, 2:54 AM
Answering to myself to solve the problem.

The problem is dubble :

- absolute positionning of elements on a page using Ext
- inserting simple text not attached to an editable field

For the first point : I was unable to find some example on the web site, I finally discovered the Ext GUI Builder (http://tof2k.com/ext/formbuilder/) that helped me to setup a structure that worked for this. The solution is using an AbsoluteLayout within a FormPanel, you can then position fields using x and y options. This is not bug free, for checkboxes x and y positions does not have any effect, I had to place and extra css class to achieve it.

For the second point : It is surprising that to insert a simple text on a form there is no Ext core component to do it directly such as for text or date fields. You have to find an existing Ext extension or write it by yourself, and then hope this extension will be compatible with future versions.

I found MiscField extension to place text on a form, but it is not compatible to Ext 2.0. I found elsewhere a patch to apply. Here under you can find a working example.

First of all my html and js code :



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=windows-1250" http-equiv="content-type">
<title>Test</title>

<!-- EXT JS LIBS -->
<link rel="stylesheet" type="text/css" href="../js/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all-debug.js"></script>
<!-- EXT JS ENDLIBS -->

<!-- EXT JS EXTENSION LIBS -->
<script type="text/javascript" src="../js/ext-extension/MiscField.js"></script>
<link rel="stylesheet" type="text/css" href="../js/ext-extension/MiscField.css"/>
<!-- EXT JS EXTENSION ENDLIBS -->

<script type="text/javascript">
Ext.onReady(function() {

var myForm = new Ext.FormPanel({
title:"Form",
width : 500,
items:[{
layout:"absolute",
height:200,
items:[
{
xtype:"miscfield",
value:"Text",
x:50,
y:100
},{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue",
x:100,
y:100
}
]
}]
});

myForm.render(document.body);
})

</script>

</head>
<body>
</body>
</html>



The MiscField extension found here : http://extjs.com/forum/showthread.php?t=6930&highlight=miscfield

and modified for Ext 2.0 and to register the new xtype (applyTo commented and last line to register :

MiscField.js


/**
* @class Ext.form.MiscField
* @extends Ext.BoxComponent
* Base class to easily display simple text in the form layout.
* @constructor
* Creates a new MiscField Field
* @param {Object} config Configuration options
*/
Ext.form.MiscField = function(config){
Ext.form.MiscField.superclass.constructor.call(this, config);
};

Ext.extend(Ext.form.MiscField, Ext.BoxComponent, {
/**
* @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
* {tag: "div"})
*/
defaultAutoCreate : {tag: "div"},

/**
* @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field")
*/
fieldClass : "x-form-field",

// private
isFormField : true,

/**
* @cfg {Mixed} value A value to initialize this field with.
*/
value : undefined,

/**
* @cfg {Boolean} disableReset True to prevent this field from being reset when calling Ext.form.Form.reset()
*/
disableReset: false,

/**
* @cfg {String} name The field's HTML name attribute.
*/
/**
* @cfg {String} cls A CSS class to apply to the field's underlying element.
*/

// private ??
initComponent : function(){
Ext.form.MiscField.superclass.initComponent.call(this);
},

/**
* Returns the name attribute of the field if available
* @return {String} name The field name
*/
getName: function(){
return this.rendered && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
},

// private
onRender : function(ct, position){
Ext.form.MiscField.superclass.onRender.call(this, ct, position);
if(!this.el){
var cfg = this.getAutoCreate();
if(!cfg.name){
cfg.name = this.name || this.id;
}
this.el = ct.createChild(cfg, position);
}

this.el.addClass([this.fieldClass, this.cls]);
this.initValue();
},

/**
* Apply the behaviors of this component to an existing element. <b>This is used instead of render().</b>
* @param {String/HTMLElement/Element} el The id of the node, a DOM node or an existing Element
* @return {Ext.form.MiscField} this
applyTo : function(target){
this.allowDomMove = false;
this.el = Ext.get(target);
this.render(this.el.dom.parentNode);
return this;
},
*/

// private
initValue : function(){
if(this.value !== undefined){
this.setRawValue(this.value);
}else if(this.el.dom.innerHTML.length > 0){
this.setRawValue(this.el.dom.innerHTML);
}
},

/**
* Returns true if this field has been changed since it was originally loaded.
*/
isDirty : function() {
return String(this.getRawValue()) !== String(this.originalValue);
},

// private
afterRender : function(){
Ext.form.MiscField.superclass.afterRender.call(this);
this.initEvents();
},

/**
* Resets the current field value to the originally-loaded value
* @param {Boolean} force Force a reset even if the option disableReset is true
*/
reset : function(force){
if(!this.disableReset || force === true){
this.setRawValue(this.originalValue);
}
},

// private
initEvents : function(){
// reference to original value for reset
this.originalValue = this.getRawValue();
},

/**
* Returns whether or not the field value is currently valid
* Always returns true, not used in MiscField.
* @return {Boolean} True
*/
isValid : function(){
return true;
},

/**
* Validates the field value
* Always returns true, not used in MiscField. Required for Ext.form.Form.isValid()
* @return {Boolean} True
*/
validate : function(){
return true;
},

processValue : function(value){
return value;
},

// private
// Subclasses should provide the validation implementation by overriding this
validateValue : function(value){
return true;
},

/**
* Mark this field as invalid
* Not used in MiscField. Required for Ext.form.Form.markInvalid()
*/
markInvalid : function(){
return;
},

/**
* Clear any invalid styles/messages for this field
* Not used in MiscField. Required for Ext.form.Form.clearInvalid()
*/
clearInvalid : function(){
return;
},

/**
* Returns the raw field value.
* @return {Mixed} value The field value
*/
getRawValue : function(){
return this.el.dom.innerHTML;
},

/**
* Returns the clean field value - plain text only, strips out HTML tags.
* @return {Mixed} value The field value
*/
getValue : function(){
var f = Ext.util.Format;
var v = f.trim(f.stripTags(this.getRawValue()));
return v;
},

/**
* Sets the raw field value.
* @param {Mixed} value The value to set
*/
setRawValue : function(v){
this.value = v;
if(this.rendered){
this.el.dom.innerHTML = v;
}
},

/**
* Sets the clean field value - plain text only, strips out HTML tags.
* @param {Mixed} value The value to set
*/
setValue : function(v){
var f = Ext.util.Format;
this.setRawValue(f.trim(f.stripTags(v)));
}
});

Ext.ComponentMgr.registerType('miscfield', Ext.form.MiscField);


MiscField.css


.x-form-miscfield {
height: 22px;
line-height: 18px;
vertical-align: middle;
overflow: hidden;
}
.ext-ie .x-form-miscfield {
height: 22px; /* ie quirks */
line-height: 18px;
}
.ext-strict .x-form-miscfield {
height: 18px;
}
.ext-safari .x-form-miscfield {
height: 20px; /* safari always same size */
}
.ext-gecko .x-form-miscfield {
padding-top: 2px; /* FF won't center the text vertically */
padding-bottom: 0;
}


Hope this can help.

Best regards

Roger