ExtJs 4 form with <sub> example (m²)

by vero4ka

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css">
<body>
</body>

CSS

body {
    padding: 50px 20px 0 20px;
}
sup { 
    vertical-align: top; 
    font-size: 0.7em; 
}

JavaScript

Ext.require([
    'Ext.form.*',
    'Ext.layout.container.Column',
    'Ext.tab.Panel'
]);

Ext.onReady(function(){

    Ext.QuickTips.init();

    var simple = Ext.create('Ext.form.Panel', {
        frame:true,
        title: 'Simple Form',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        fieldDefaults: {
            msgTarget: 'side',
            labelWidth: 75
        },
        defaultType: 'textfield',
        defaults: {
            anchor: '100%'
        },
        items: [{
            fieldLabel: 'Name',
            name: 'name',
            allowBlank:false
        },{
            fieldLabel: 'Last Name',
            name: 'last'
        },{
            xtype: 'combo',
            fieldLabel: 'Rating',
            hiddenName: 'rating',
            store: new Ext.data.SimpleStore({
                data: [
                    [1, 'm²'],
                    [2, 'cm²']
                ],
                id: 0,
                fields: ['value', 'text']
            }),
            valueField: 'value',
            displayField: 'text',
            triggerAction: 'all',
            editable: false
        }],
        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });

    simple.render(document.body);
});