本文目录一览：
- 1、extjs CheckboxGroup默认选中问题
- 2、在ext中如何动态设置checkbox的checked属性!
- 3、Extjs怎么实现下拉框多选
- 4、extjs 根据fieldset的checkBox情况,来全选checkBoxGroup
- 5、extjs combobox样式下拉框中如何添加复选框？？？
extjs CheckboxGroup默认选中问题
Ext.onReady(function() {
var port = new Ext.Viewport({
layout: 'border',
items: [chkEditDomain],
cls: "inner-viewport",
listeners: {
render: function() {
// Ext.getCmp("itemsid0").setValue("211", true);
// Ext.getCmp("itemsid0").setValue("212", true);
// Ext.getCmp("itemsid0").setValue("213", true);
// Ext.getCmp("itemsid0").setValue("214", true);
}
}
});
});
var chkEditDomain = new Ext.form.CheckboxGroup({
xtype: 'checkboxgroup',
fieldLabel: '测试',
name: 'chkEditDomain',
allowBlank: false,
id: 'itemsid0',
width: 200,
columns: 4,
items: [
{ boxLabel: 'IND', name: 'IND', id: '211', inputValue: '5', checked:true },
{ boxLabel: 'CE', name: 'CE', id: '212', inputValue: '6' ,checked:true},
{ boxLabel: 'SC', name: 'SC', id: '213', inputValue: '8' ,checked:true},
{ boxLabel: 'FA', name: 'FA', id: '214', inputValue: '7' ,checked:true}
]
});
这样行吗？
在ext中如何动态设置checkbox的checked属性!
首先你要请确保每一个checkbox都有一个唯一的id，例如：
boxLabel : '新增',
id:"add",
anchor:"50%",
name : '新增'
Ext.getCmp.setValue(true);设置为选中状态
Ext.getCmp.setValue(false);设置为未选中状态
Extjs怎么实现下拉框多选
1、扩展js类库，在项目中建立一个 js文件，命名为:xxx.js 其代码为
if ('function' !== typeof RegExp.escape)
{
RegExp.escape = function (s)
{
if ('string' !== typeof s)
{
return s;
}
return s.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1');
};
}
Ext.ns('Ext.form');
Ext.form.MultiSelect = Ext.extend(Ext.form.ComboBox,
{
checkField: 'checked',
multi: true,
separator: ',',
initComponent: function ()
{
if (!this.tpl)
{
this.tpl = 'tpl for="."' + 'div class="x-combo-list-item"'
+ 'img src="' + Ext.BLANK_IMAGE_URL + '" '
+ 'class="ux-MultiSelect-icon ux-MultiSelect-icon-'
+ '{[values.' + this.checkField + '?"checked":"unchecked"'
+ ']}"'
+ '{[values.' + this.displayField + ']}'
+ '/div'
+ '/tpl';
}
Ext.form.MultiSelect.superclass.initComponent.apply(this, arguments);
this.on(
{
scope: this,
beforequery: this.onBeforeQuery,
blur: this.onRealBlur
});
this.onLoad = this.onLoad.createSequence(function ()
{
if (this.el)
{
var v = this.el.dom.value;
this.el.dom.value = '';
this.el.dom.value = v;
}
});
},
initEvents: function ()
{
Ext.form.MultiSelect.superclass.initEvents.apply(this, arguments);
this.keyNav.tab = false;
},
beforeBlur: function ()
{
},
postBlur: function ()
{
},
clearValue: function ()
{
this.value = '';
this.setRawValue(this.value);
this.store.clearFilter();
this.store.each(function (r)
{
r.set(this.checkField, false);
}, this);
if (this.hiddenField)
{
this.hiddenField.value = '';
}
this.applyEmptyText();
},
getCheckedDisplay: function ()
{
var re = new RegExp(this.separator, "g");
return this.getCheckedValue(this.displayField).replace(re, this.separator + ' ');
},
getCheckedValue: function (field)
{
field = field || this.valueField;
var c = [];
var snapshot = this.store.snapshot || this.store.data;
snapshot.each(function (r)
{
if (r.get(this.checkField))
{
c.push(r.get(field));
}
}, this);
return c.join(this.separator);
},
onBeforeQuery: function (qe)
{
qe.query = qe.query.replace(new RegExp(RegExp.escape(this.getCheckedDisplay()) + '[ ' + this.separator + ']*'), '');
},
onRealBlur: function ()
{
this.list.hide();
var rv = this.getRawValue();
var rva = rv.split(new RegExp(RegExp.escape(this.separator) + ' *'));
var va = [];
var snapshot = this.store.snapshot || this.store.data;
Ext.each(rva, function (v)
{
snapshot.each(function (r)
{
if (v === r.get(this.displayField))
{
va.push(r.get(this.valueField));
}
}, this);
}, this);
this.setValue(va.join(this.separator));
this.store.clearFilter();
},
onSelect: function (record, index)
{
if (this.fireEvent('beforeselect', this, record, index) !== false)
{
record.set(this.checkField, !record.get(this.checkField));
if (this.store.isFiltered())
{
this.doQuery(this.allQuery);
}
if (this.multi)
{
if (record.get("key") == "---" record.get(this.checkField))
{
this.setValue("---");
}
else
{
this.setValue(this.getCheckedValue());
}
}
else
{
this.clearValue();
this.value = record.get(this.valueField);
this.setRawValue(record.get(this.displayField));
this.list.hide();
}
this.fireEvent('select', this, record, index);
}
},
setValue: function (v)
{
if (v)
{
v = '' + v;
if (this.valueField)
{
this.store.clearFilter();
this.store.each(function (r)
{
var checked = !(!v.match('(^|' + this.separator + ')'
+ RegExp.escape(r.get(this.valueField))
+ '(' + this.separator + '|$)'));
r.set(this.checkField, checked);
}, this);
this.value = this.getCheckedValue();
this.setRawValue(this.getCheckedDisplay());
if (this.hiddenField)
{
this.hiddenField.value = this.value;
}
}
else
{
this.value = v;
this.setRawValue(v);
if (this.hiddenField)
{
this.hiddenField.value = v;
}
}
if (this.el)
{
this.el.removeClass(this.emptyClass);
}
}
else
{
this.clearValue();
}
},
selectAll: function ()
{
this.store.each(function (record)
{
record.set(this.checkField, true);
}, this);
this.doQuery(this.allQuery);
this.setValue(this.getCheckedValue());
},
deselectAll: function ()
{
this.clearValue();
}
});
Ext.reg('multiSelect', Ext.form.MultiSelect);
2、在ext-all.css文件最后，加入css样式
.ux-MultiSelect-icon { width:16px; height:16px; float:left; background-position: -1px -1px ! important; background-repeat:no-repeat ! important; }
.ux-MultiSelect-icon-checked { background: transparent url(../images/default/menu/checked.gif); }
.ux-MultiSelect-icon-unchecked { background: transparent url(../images/default/menu/unchecked.gif); }
3、使用
var DepartUserStore=new Ext.data.Store(
{
proxy: new Ext.data.HttpProxy(
{
url:'/Web/Manage/DeskTop/JSON/ScheduleManager/GetSimpleDepartUserInfo.aspx'
}),
//读取Json
reader: new Ext.data.JsonReader(
{ totalProperty: "totalCount", root: "root" },
[
{name:'UserId',type:'int'},
{name:'UserName',type:'string'}
])
});
var DepartUserCbox = new Ext.form.MultiSelect(
{
fieldLabel: ' 姓名',
labelStyle: 'width:80px',
width: 150,
editable: false,
id: 'DepartUserDS',
hiddenName:'DepartUserIdDS',
store: DepartUserStore,
emptyText: '--请选择--',
allowBlank: false,
blankText: '请选择',
mode:'remote',
displayField: 'UserName',
valueField: 'UserId',
triggerAction: 'all',
selectOnFocus: true,
listWidth: 200
});
DepartUserStore.on('load', function ()
{
DepartUserCbox.selectAll(); //全选
});
DepartUserStore.load();
extjs 根据fieldset的checkBox情况,来全选checkBoxGroup
!doctype html
html lang="en"
head
meta charset="UTF-8"
titleExtjs 4.2 demo/title
link rel="stylesheet" href="../resources/css/ext-all.css"
script src="../bootstrap.js"/script
script
Ext.onReady(function(){
Ext.create('Ext.Panel',{
width:450,
items:[{
xtype: 'checkboxgroup',
listeners:{
change:function(gp,nv,ov,eOpts){
// 全选
if(nv.all !ov.all)
return gp.eachBox(function(box,idx){
box.setRawValue(true);
});
// 反选
if(ov.all !nv.all)
return gp.eachBox(function(box,idx){
box.setRawValue(false);
});
}
},
width:'100%',
fieldLabel: 'Auto Layout',
cls: 'x-check-group-alt',
items: [
{boxLabel: '全选', name: 'all'},
{boxLabel: 'Item 1', name: 'cb-auto-1', checked: true},
{boxLabel: 'Item 2', name: 'cb-auto-2'},
{boxLabel: 'Item 3', name: 'cb-auto-3'},
{boxLabel: 'Item 4', name: 'cb-auto-4'}
]
},{
xtype:'button',
text:'GetChecked',
handler:function(){
Ext.Msg.alert('选中数量',String(this.up('panel').items.items[0].getChecked().length));
}
}],
renderTo:Ext.getBody()
});
});
/script
/head
body
/body
/html
extjs combobox样式下拉框中如何添加复选框？？？
{ xtype: 'combo',
name: 'status',
id: 'statusId',
multiSelect: true,
editable: false,
emptyText: ' 策略执行状态',
queryMode: 'local',
store: status,
valueField: 'id',
displayField: 'name',
listConfig: {
itemTpl: ‘tpl for="."div class="x-combo-list-item" onClick="onClick(this)"spaninput type="checkbox" value="{[values.id]}" / {name}/span/div/tpl’,
},
queryMode: 'local',
triggerAction: 'all',
}
这样写不是更方便和直接么，而且获取参数也比较简单，得到的是个array
