Base ExtJS fiddle

by chrisramakers

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/dev/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/dev/adapter/ext/ext-base.js"></script>
<script src="http://dev.sencha.com/deploy/dev/ext-all.js"></script>
<link rel="stylesheet" href="http://dev.sencha.com/deploy/dev/examples/shared/examples.css">

CSS

body { padding: 20px }

JavaScript

Ext.onReady(function(){
    
    var items1 = [{
        xtype: 'textfield',
        fieldLabel: 'test',
        name: 'test1'
    },{
        xtype: 'textfield',
        fieldLabel: 'test',
        name: 'test2'
    },{
        xtype: 'textfield',
        fieldLabel: 'test',
        name: 'test3'
    },{
        xtype: 'textfield',
        fieldLabel: 'test',
        name: 'test4'
    },{
        xtype: 'fieldset',
        title: 'Nested Fieldset',
        items: [{
            xtype: 'textarea',
            name: 'test5',
            fieldLabel: 'Area'
        },{
            xtype: 'textarea',
            name: 'test6',
            fieldLabel: 'Area'
        },{
            xtype: 'textarea',
            name: 'test7',
            fieldLabel: 'Area'
        },{
            xtype: 'fieldset',
            title: 'Nested deeper',
            items:[{
                xtype: 'htmleditor',
                name: 'test8',
                fieldLabel: 'Editor'
            }]
        }]
    }];
   
    var items = [{
        xtype: 'fieldset',
        title: 'Fieldset1',
        items: items1
    }];
    
    var form = new Ext.form.FormPanel({
        renderTo: Ext.getBody(),
        border: false,
        title: 'test',
        frame: true,
        items: items
    });
    
});