fancy textfield

by Johan Vandeplas

HTML

<script src="https://cdn.sencha.com/ext/gpl/4.2.1/ext-all-dev.js"></script>
<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.2.1/resources/css/ext-all.css">

SCSS

.x-form-item-body {
    div {
      top: -11px;
      position: absolute;
      left: 8px;
      background-color: white;

      .x-form-item-label {
        color: grey;
      }
    }
    .x-form-text {
      padding: 14px 6px 10px 6px;
    }
}

JavaScript

Ext.create('Ext.panel.Panel',{
	width:600,
  height:800,
  title: 'fancy',
  bodyPadding: '10px',
  items: [
  	{
    	xtype: 'textfield',
      name: 'testfield',
      labelAlign: 'top',
      emptyText: 'test field',
      value: 'test',
      listeners: {
      	afterrender: function(f){
        	f.setFieldLabel(Ext.isEmpty(f.getValue())?'':f.emptyText);
        },
      	change: function(f,v){
        	f.setFieldLabel(Ext.isEmpty(v)?'':f.emptyText);
        }
      }
    }
  ],
  
  renderTo: Ext.getBody()

})