Adding separator in between formpanel fields

[Maharshi]

Hi,
I want to add a horizontal line between fields in a formpanel.something similar to a menu separator.
I dont want a fieldset which makes a border around the field.i tried using a '-' in the items config.its giving errors.

for ex:

Company Name : <Ext TextField>
---------------------------------------------- line separator
Company Address : <TextField>
----------------------------------------------

Hope u got the point.please help
thanks.

[zig999]

This is an idea.
1pxLine.gif is a 1x1 pixel image.

Ext.BLANK_IMAGE_URL = '/js/ext/resources/images/default/s.gif';
Ext.onReady(function () {

	var lineconfig = {
		xtype: 'box',
		autoEl:{
			tag: 'div',
			style:'line-height:1px; font-size: 1px;margin-bottom:4px',
			children: [{
				tag: 'img',
				src: '1pxLine.gif',
				height: '2px',
				width: '100%'
			}]
		}
	};
	
	var formp = new Ext.FormPanel({
		title: 'Example form',
		renderTo: Ext.getBody(),
		width: 500,
		defaults: {
			xtype: 'textfield'
		},
		items: [{
			fieldLabel: 'Label 1'	
		},lineconfig,{
			fieldLabel: 'Label 2'	
		},lineconfig,{
			fieldLabel: 'Label 2'	
		}]
	});

});

[Maharshi]

Thanks,
Do u have the gif ? can u please provide it?

[shibubh]

check this. Untested

Ext.ns("Hulas.ux");
Hulas.ux.line = Ext.extend(Ext.Component, {
  autoEl: 'hr'
});

Ext.reg('line', Hulas.ux.line);

var formp = new Ext.FormPanel({
  title: 'Example form',
  renderTo: Ext.getBody(),
  width: 500,
  defaults: {
    xtype: 'textfield'
  },
  items: [{
    fieldLabel: 'Label 1'
  },{
    xtype: 'line'
  },{
    fieldLabel: 'Label 2'
  },{
    xtype: 'line'
  },{
    fieldLabel: 'Label 2'
  }]
});

[zig999]

Thanks,
Do u have the gif ? can u please provide it?

Is just a 1x1 pixel. Use any image generator, create a 1x1 pixel image, paint with any color, save as gif. You're done.

[mjlecomte]

Why don't you just use css?