Ext.onReady(function(){
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'name', 'email', 'phone' ]
});
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
//groupField:'name',
data: [
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
],
autoLoad:true,
proxy: {
type: 'memory',
reader: {
type: 'json'
// root: 'users'
}
}
});
var combox = Ext.create('Ext.form.ComboBox',{
fieldLable:'test',
store: userStore,
triggerAction : 'all',
queryModel:'local',
forceSelection: true,
selectOnFocus:false,
allowBlank:true,
displayField:'name',
renderTo:Ext.getBody(),
listeners:{
scope:this,
'select':function(combo,record, index){
var value = combo.getValue();
var rec = combo.findRecord(combo.valueField || combo.displayField, value);
var ind = combo.store.indexOf(rec);
alert('selected index = ' + ind + ' and record.value=' + value);
}
}
});
var panel = Ext.create('Ext.form.Panel', {
title : 'Order Form',
width : 300,
bodyPadding: 10,
renderTo : Ext.getBody(),
items: [
{
xtype:'fieldcontainer',
fieldLabel:'Size',
defaultType:'radiofield',
defaults:{
flex:1
},
layout:'hbox',
items:[
{
boxLabel:'M',
name:'size',
inputVlue:'m',
id:'radio1'
},
{
boxLabel:'L',
name:'size',
inputVlue:'l',
id:'radio2'
},
{
boxLabel:'XL',
name:'size',
inputVlue:'xl',
id:'radio3'
}
]
},
{
xtype : 'fieldcontainer',
fieldLabel : 'Color',
defaultType: 'radiofield',
defaults: {
flex: 1
},
layout: 'hbox',
items: [
{
boxLabel : 'Blue',
name : 'color',
inputValue: 'blue',
id : 'radio4'
}, {
boxLabel : 'Grey',
name : 'color',
inputValue: 'grey',
id : 'radio5'
}, {
boxLabel : 'Black',
name : 'color',
inputValue: 'black',
id : 'radio6'
}
]
},
{
xtype:'radiogroup',
columns:2,
vertical:true,
items: [
{ boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
{ boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true},
{ boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
{ boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
{ boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
{ boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
],
id:'radiogroup1'
},
{
xtype:'displayfield',
name:'displayfield1',
fieldLabel:'only a lable',
value:'Display field <span style="color:green;">value</span>'
},
{
xtype:'numberfield',
name:'number1',
fieldLabel:'number field',
value:5,
id:'number1',
minValue:0,
maxValue:50
},
{
xtype:'checkboxfield',
name:'checkbox1',
fieldLabel:'checkBox',
boxLabel:'box label1',
id:'checkbox1'
},
{
xtype:'datefield',
name:'data1',
fieldLabel:'data field'
}
],
bbar: [
{
text: 'Smaller Size',
handler: function() {
var radio1 = Ext.getCmp('radio1'),
radio2 = Ext.getCmp('radio2'),
radio3 = Ext.getCmp('radio3');
//if L is selected, change to M
if (radio2.getValue()) {
radio1.setValue(true);
return;
}
//if XL is selected, change to L
if (radio3.getValue()) {
radio2.setValue(true);
return;
}
//if nothing is set, set size to S
radio1.setValue(true);
//alert(Ext.getCmp('checkbox1').getValue());
//alert(Ext.getCmp('number1').getValue());
//The method below is used to fetch the selected value of radio group
alert(Ext.getCmp("radiogroup1").items.get(0).getGroupValue());
}
},
{
text: 'Larger Size',
handler: function() {
var radio1 = Ext.getCmp('radio1'),
radio2 = Ext.getCmp('radio2'),
radio3 = Ext.getCmp('radio3');
//if M is selected, change to L
if (radio1.getValue()) {
radio2.setValue(true);
return;
}
//if L is selected, change to XL
if (radio2.getValue()) {
radio3.setValue(true);
return;
}
//if nothing is set, set size to XL
radio3.setValue(true);
}
},
'-',
{
text: 'Select color',
menu: {
indent: false,
items: [
{
text: 'Blue',
handler: function() {
var radio = Ext.getCmp('radio4');
radio.setValue(true);
}
},
{
text: 'Grey',
handler: function() {
var radio = Ext.getCmp('radio5');
radio.setValue(true);
}
},
{
text: 'Black',
handler: function() {
var radio = Ext.getCmp('radio6');
radio.setValue(true);
}
}
]
}
}
]
});
});