[RC2] css glitch in form

[olouvignes]

There is a css glitch since beta-2 :

Capture d’écran 2012-02-17 à 18.41.18.jpgCapture d’écran 2012-03-02 à 21.52.22.jpg

Test Case class :

Ext.define(app.ns + '.element.phoneNumber', {


	alias: 'widget.phonenumber',
	extend: 'Ext.Container', // broken too !
	//extend: 'Ext.form.FieldSet',


	config: {
		cls: 'x-form-fieldset-inner',
		layout: 'hbox'
	},


	initialize: function() {


		var fieldOptions = [{text: 'mobile', value: 'mobile'}, {text: 'home', value: 'home'}, {text: 'home fax', value: 'home fax'}, {text: 'other', value: 'other'}];


		this.add([
		{
			xtype: 'selectfield',
			name: 'type',
			options: fieldOptions,
			flex: 1
		},
		{
			xtype: 'textfield',
			name: 'value',
			input: {type: 'tel'},
			value: '+33 6 12 34 56 78',
			placeHolder: 'Phone',
			clearIcon: true,
			listeners: {},
			flex: 3
		}
		]);
	}


});




Ext.define(app.ns + '.view.BasicFieldsetTest', {


	id: 'basicfieldset-test',
	alias: 'widget.basicfieldset-test',
	extend: 'Ext.form.FormPanel',
	requires: [],


	config: {},


	initialize: function() {
		this.callParent();
		var self = this;


		// Add titlebar
		this.add([{
			xtype: 'titlebar',
			title: this.getId() + ' - ' + Ext.version.version
		}]);


		// Configure component
		this.add([
			{ xtype: 'spacer', height: '20px' },
			{ xtype: 'fieldset', items: [
				{ xtype:'phonenumber' },
				{ xtype:'phonenumber' }
			]}
		]);


	}


});

Bootstrap :

window.d = true;
window.app = {
	ns: 'MyApp'
};




//http://jsfiddle.net/rUP86/1/
Ext.application({


	name: app.ns,
	controllers: [],
	stores: ['ContactList'],
	//views: ['Viewport'],


	launch: function() {
		d&&console.log(app.ns + '.application#launch', [this, arguments]);


		// Create Viewport
		this.viewport = Ext.create(app.ns + '.view.Viewport');
	},


	getViewport: function() {
		return this.viewport;
	}


});


Ext.define(app.ns + '.view.Viewport', {


	id: 'viewport',
	extend: 'Ext.Container',


	config: {
		layout: {
			type: 'card',
			animation: {type: 'slide'}
		},
		fullscreen: true
	},


	initialize: function() {
		this.callParent();
		d&&console.log(Ext.getDisplayName(arguments.callee), [this, arguments]);


		this.addCls('test');
		console.warn(this.getCls());
		this.removeCls('test');
		console.warn(this.getCls());


		this.add([
			//{xtype: 'segmentedbutton-test'},
			//{xtype: 'complexfieldset-test'},
			{xtype: 'basicfieldset-test'}
		]);


	}


});

[Jamie Avins]

Thank you for the report.

[rdougan]

Fieldset has not been made to work this way. You will need to add custom CSS to make it work with items that are not fields. Something like this will make it work:

.x-form-fieldset .x-field:last-child { border-bottom: 1px solid #ddd !important; }

You will also need to target the first and child children of .x-form-fieldset-inner and insure the border is removed correctly. There will also be issues with rounded corners (as we target the fields).