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()
});
});
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