您的位置:首页 > 产品设计 > UI/UE

extjs4.1 动态加载 checkboxgroup 后checked 为true老是失效的问题+combobo自动选择特定记录

2013-07-22 10:42 489 查看
刚刚遇到这个问题,官方网上也有这个,不过好像没有解决。
http://www.sencha.com/forum/showthread.php?228669
{
xtype: 'checkboxgroup',
fieldLabel: '城市',
vertical: true,
allowBlank :true,
items: [],
listeners:{
render:function(view, opt){
var cbg=this;
var cityCheckBoxs=new Array();//生成一个空数组用来装所有的城市对象
console.debug(view);
var t=this;
Ext.Ajax.request({
async:false,  //设置同步
url:'../api/city/param/list.json?id='+self.bid,//请求路径,需要手动输入指定
method:'get',
success: function(response){
var citys=eval('('+response.responseText+')');
/*for(var j=0;j<citys.length;j++){
cityCheckBoxs.push(
new Ext.form.Checkbox({
checked:citys[j].checked,
boxLabel: '广州',
inputValue: citys[j].id,
name: 'city' ,//这个是后台接收的表单域,这里的checkboxgroup都使用同一个name
id:citys[j].id
})
);
}*/
for(var j=0;j<citys.length;j++){
cbg.items.add(
new Ext.form.Checkbox({
checked:citys[j].checked,
boxLabel: citys[j].value,
inputValue: citys[j].id,
name: 'city' ,//这个是后台接收的表单域,这里的checkboxgroup都使用同一个name
id:citys[j].id
}));
}
cbg.doLayout();
// console.debug(checkbox);
}
})

/*  view.add(cityCheckBoxs);
//view.cancelLayout();
view.doLayout();*/
}
}
}


iconCls : 'icon-edit',
tooltip: '编辑',
handler: function(grid, rowIndex, colIndex, item) {
var rec = grid.getStore().getAt(rowIndex);
var formWin = Ext.create("Sharera.view.web.Document.FormEdit",{bid:rec.data.id});
var formObj=formWin.down('form').getForm();
var opt={errorReader : Ext.create('Sharera.system.FormErrorReader')};
Ext.apply(formObj,opt);
var fstore = Ext.create("Sharera.store.web.Documentform");
fstore.setUrlforForm(rec.data.id);
fstore.load(
{
scope: this,
callback: function(records, operation, success) {
formObj.loadRecord(records[0]);
}
}
);
formWin.show();
var b=formWin.down("button[ref='save'] ");
var store = grid.getStore();
b.on("click", function(){
if (formObj.isValid()) {
formObj.submit({
waitTitle : '发送数据',
waitMsg : '正在保存...',
timeout : 1000,
success : function(form, action) {
Ext.Sharera.msg("提示",'修改成功');
formWin.close();
store.reload();
},
failure : function(form, action) {
Ext.Sharera.error("错误",'修改失败');
formWin.close();
}
});

}
}, this);
}


Ext.define('Sharera.view.web.Document.FormEdit', {
extend : 'Ext.window.Window',
alias : 'widget.Documentformedit',
title : '修改',
width : 850,
height : 700,
autoShow : false, // 自动打开

后台给的数据

[{"id":1,"key":"gz","value":"广州","areaCode":"020","checked":true},{"id":2,"key":"sz","value":"深圳","areaCode":"0755","checked":false},{"id":3,"key":"dg","value":"东莞","areaCode":"0769","checked":false},{"id":4,"key":"fs","value":"佛山","areaCode":"0757","checked":false}]




===============================================================================================================================

combobox的城市是后台提供的,里面有一个是被选中的。

因为后台的city实体类没有checked这个属性,所以我后台给他。

cityApi中的代码:

/**
* 可接收不同参数返回相应的数据
* @return
*/
@GET
@Path("/param/list")
@GZIP
@Produces({MediaType.APPLICATION_JSON})
public List getParamList(@QueryParam("id") String id,@QueryParam("type") String type) {
System.out.println("---"+id);
if(id==null){
return this.getService().getCityList();
}
if("combobox4product".equals(type)){
return this.getService().getCityList4combobox(id);
}
return this.getService().getCityListByParam(id,null);
}


cityService中的代码:

//获取城市列表信息,经过封装的格式,返回的数据给前台的combobox
public  List<CitySupport> getCityList4combobox(String id){
List<City> cityList = this.getDao().findAll();
List<CitySupport> citySupport=new ArrayList<CitySupport>();
Product p=this.productService.getDao().findOne(Long.parseLong(id));
for(City city : cityList){
CitySupport cs=new CitySupport(city);
if(city.getId()==p.getCity().getId()){
cs.setChecked(true);
}
citySupport.add(cs);
}
return citySupport;
}

//获取城市列表信息,经过封装的格式,返回的数据给前台的checkboxgroup

public static class CitySupport extends City{
private static final long serialVersionUID = 7051497115371661530L;
private boolean checked;//为了前台需要添加的,前台可以有多选的功能。
CitySupport(City city){
this.areaCode=city.getAreaCode();
this.checked=false;
this.id=city.getId();
this.key=city.getKey();
this.value=city.getValue();

}
public boolean isChecked() {
return checked;
}
public void setChecked(boolean checked) {
this.checked = checked;
}
public static long getSerialversionuid() {
return serialVersionUID;
}

}


返回的数据:

[{"id":1,"key":"gz","value":"骞垮窞","areaCode":"020","checked":false},{"id":2,"key":"sz","value":"深圳","areaCode":"0755","checked":true},{"id":3,"key":"dg","value":"广州","areaCode":"0769","checked":false},{"id":4,"key":"fs","value":"浣涘北","areaCode":"0757","checked":false}]


深圳==true

model中:

{name:'checked',type:'boolean'}//这个是前台需要才加上去的,后台没有。


view中:

{
fieldLabel:'城市',
queryMode:'local',
name:'city',
xtype:'combobox',
displayField:'value',
store:'web.City',
listeners:{
afterrender:function(cb,eOpts){
var store=cb.getStore();
store.setUrlforCombo('combobox4product',self.bid);
store.load({
scope: this,
callback: function(records, operation, success) {
for(var i=0;i<records.length;i++){
if(records[i].data.checked==true){
cb.setValue(records[i]);
}
}
}
});
}
}
}


效果:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: