var companies = [
  ['Apple Inc.'],
  ['Cisco Systems, Inc.'],
  ['Google Inc.'],
  ['Intel Corporation'],
  ['Level 3 Communications, Inc.']
];

Ext.onReady(function(){

    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var bd = Ext.getBody();

    /*
     * ================  Simple form  =======================
     */
    var simple = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        url:'save-form.php',
        frame:true,
        title: 'Simple Form',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        defaults: {width: 230},
        defaultType: 'textfield',

        items: [{
                fieldLabel: 'Name',
                name: 'name',
                minLength: 5,
                allowBlank:false
            },{
                fieldLabel: 'Email',
                name: 'email'
            },
                new Ext.form.ComboBox({
                        fieldLabel: 'Company',
                        name: 'company',
                        store: new Ext.data.SimpleStore({
                            fields: ['name'],
                            data :companies
                        }),
                        tpl: '<tpl for="."><div class=x-combo-list-item id={name}>{name}</div></tpl>',
                        displayField:'name',
                        typeAhead: true,
                        mode: 'local',
                        triggerAction: 'all',
                        selectOnFocus:true,
            
                })

            , new Ext.form.DateField({
              fieldLabel: 'Birthday',
              name: 'birthday'
            
            })
            , new Ext.form.TimeField({
                fieldLabel: 'Time',
                name: 'time'
            }),{
                xtype: 'checkboxgroup',
                fieldLabel: 'Music',
                items: [
                    {boxLabel: 'Classical', name: 'music', inputValue: 'classical'},
                    {boxLabel: 'Rock', name: 'music', inputValue: 'rock'},
                    {boxLabel: 'Blues', name: 'music', inputValue: 'blues'}
                ]
            },{
                xtype: 'radiogroup',
                fieldLabel: 'Favorite Color',
                items: [
                    {boxLabel: 'Red', name: 'colors', inputValue: 'red', checked: true},
                    {boxLabel: 'Blue', name: 'colors', inputValue: 'blue'}
                ]
            
            },{
               xtype: 'textarea',
               fieldLabel: 'Description'
            }
   
        ],

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });

    simple.render(document.body);




});