java checkbox ext_Ext Js4 CheckBox学习与实例 | 学步园

1：程序代码

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

CheckBox

Ext.onReady(function() {

Ext.create('Ext.form.Panel', {

bodyPadding: 10,

width : 300,

title : '社会调查',

items: [

{

xtype : 'fieldcontainer',

fieldLabel : '您的爱好',

defaultType: 'checkboxfield',

items: [

{

boxLabel : '唱歌',

name : 'hobby',

inputValue: '1',

id : 'sing'

}, {

boxLabel : '跳舞',

name : 'hobby',

inputValue: '2',

checked : true,

id : 'dance'

}, {

boxLabel : '看书',

name : 'hobby',

inputValue: '3',

id : 'read'

}

]

}

],

bbar: [

{

text: '选择唱歌',

handler: function() {

var checkbox = Ext.getCmp('sing');

checkbox.setValue(true);

}

},

'-',

{

text: '全选',

handler: function() {

var checkbox1 = Ext.getCmp('sing'),

checkbox2 = Ext.getCmp('dance'),

checkbox3 = Ext.getCmp('read');

checkbox1.setValue(true);

checkbox2.setValue(true);

checkbox3.setValue(true);

}

},

{

text: '全不选',

handler: function() {

var checkbox1 = Ext.getCmp('sing'),

checkbox2 = Ext.getCmp('dance'),

checkbox3 = Ext.getCmp('read');

checkbox1.setValue(false);

checkbox2.setValue(false);

checkbox3.setValue(false);

}

},

{

text: '反选',

handler: function() {

var checkbox1 = Ext.getCmp('sing'),

checkbox2 = Ext.getCmp('dance'),

checkbox3 = Ext.getCmp('read');

if(checkbox1.getValue()) {

checkbox1.setValue(false);

} else {

checkbox1.setValue(true);

}

if(checkbox2.getValue()) {

checkbox2.setValue(false);

} else {

checkbox2.setValue(true);

}

if(checkbox3.getValue()) {

checkbox3.setValue(false);

} else {

checkbox3.setValue(true);

}

}

}

],

renderTo: Ext.getBody()

});

});

2：程序效果图