Wednesday 19 March 2014

Display a form containing check boxes,combo boxes on button click

Just Copy and Paste this Code..Works like Charm..!

Ext.require([
    'Ext.form.*',
    'Ext.window.Window'
]);

Ext.onReady(function() {
    // The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"}
    ]
});

    Ext.create('Ext.Button', {
        text: 'Click',
        handler: function () {        
            Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        bodyStyle: 'padding: 5px 5px 0 5px;',
        defaults: {
            xtype: 'textfield',
            anchor: '15%',
         },
        items: [
{
                                xtype: 'checkbox',
                                boxLabel: 'Cricket',
                                name: 'sport',
                                checked: true,
                                inputValue: 'cricket'
                            },
                            {
xtype: 'checkbox',
                                boxLabel: 'TableTennis',
                                name: 'sport',
                                inputValue: 'tt'
                            },
                            {
xtype: 'checkbox',
                                boxLabel: 'Football',
                                name: 'sport',
                                inputValue: 'football'
                            },
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false  // requires a non-empty value
                            },
                            {
xtype: 'combo',
fieldLabel:'Division',
name:'division',
queryMode:'local',
store:['A','B','C'],
displayField:'division',
autoSelect:true,
forceSelection:true,
     
                            },
{
xtype: 'combo',
                                fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr'
                            },
{
xtype: 'button',
                                text: 'Click Me',
handler: function() {
alert('Clicked!!');
this.up('form').getForm().submit();
}
                            }
   ]  
    });
        },
        renderTo: Ext.getBody()
    });
 
 
});

No comments:

Post a Comment