-
2020-12-18 23:49:27
开发中需求是统计选择的行数,所以要监控checkbox的选择事件包括表头的全选事件
遇到的问题就不赘述了
方案是监控grid的复选框和行加载时绑定事件
baseView: DBEN.controls.IGrid;
init() {
super.init();
let obj = this;
this.baseView.on("selectionchange",
function (rowModel, record, rowIndex, eOpts) {
var selections = obj.invoiceGrid.getSelectionModel().getSelection();
var selectionLength = selections.length;
obj.disSelectedIndex.setRawValue(selectionLength);
});
//行点击事件
this.control(this.view, {
gridInvoiceDetail: { rowclick: this.egpUpGridRowClick }
})
}
egpUpGridRowClick(grid, row) {
var selections = this.invoiceGrid.getSelectionModel().getSelection();
var selectionLength = selections.length;
this.disSelectedIndex.setRawValue(selectionLength);
}
更多相关内容 -
extjs 复选框处理
2020-12-24 05:27:50CheckboxGroup如果在formPanel中使用了checkBox,radioBox时,在提交表单时使用formPanel.getForm().submit()来提交数据时,如果单选框和复选框未选中时,则extjs是不会提交这些控件的。在postdata中根本就不存在这些...复选框checkBox,单选框radioBox。CheckboxGroup
如果在formPanel中使用了checkBox,radioBox时,在提交表单时使用formPanel.getForm().submit()来提交数据时,如果单选框和复选框未选中时,则extjs是不会提交这些控件的。在postdata中根本就不存在这些控件的任何影子。可以通过firebug来查看提交的数据。
var checkboxgroup_temp = new Ext.form.CheckboxGroup({
id:'myGroup',
xtype: 'checkboxgroup',
fieldLabel: '多选',
itemCls: 'x-check-group-alt',
// Put all controls in a single column with width 100%
columns: 1,
items : [{
layout : 'column',
items: [
{boxLabel: 'Item 1', name: 'cb-col-1'},
{boxLabel: 'Item 2', name: 'cb-col-2', checked: true},
{boxLabel: 'Item 3', name: 'cb-col-3'}
]
},{
layout : 'column',
items: [
{boxLabel: 'Item 1', name: 'cb-col-1'},
{boxLabel: 'Item 2', name: 'cb-col-2', checked: true},
{boxLabel: 'Item 3', name: 'cb-col-3'}
]
}]
});
myCheckboxGoup是一个Checkbox组件的集合,对每一个Checkbox项的访问,可能过
myCheckboxGroup.items.get(i) 定位到Checkbox 然后查看属性值 例如 myCheckboxGroup.items.get(i).inputValue
如果这种方法没有效果
可以尝试用这样的方法
myCheckboxGroup.setValue('cb-col-1', true);//设置 name为cb-col-1 的checked为true 即表选中
var field_newspwap_3 = new Ext.form.FieldSet({
title : '用户角色分配',
autoHeight : true,
collapsible : true,
id : 'field_newspwap_3',
items : [{
layout : 'column',
defaults : {
hideLabels : true,
layout : 'form'
},
items : [{
columnWidth : .01
}, {
columnWidth : .33,
items : [new Ext.form.Checkbox({
boxLabel : '计费系统',
name : 'userRole.roleIdStr',
inputValue :10,
checked : true
})]
}, {
columnWidth : .33,
items : [new Ext.form.Checkbox({
boxLabel : '演示系统',
name : 'userRole.roleIdStr',
inputValue :11,
checked : true
//disabled : true
})]
}, {
columnWidth : .33,
items : [new Ext.form.Checkbox({
boxLabel : '风格',
name : 'userRole.roleIdStr',
inputValue :12,
checked : true
// disabled : true
})]
}]
}]
});
'userRole.roleIdStr'
是映射你后台的数据类和属性。
后台得到的值是: 11, 12, 13
提交上一数据JS
var frm_newspwap = new Ext.FormPanel({
margins : '5 5 5 5',
id : 'frm_newspwap',
frame : true,
title : '新增用户',
labelAlign : 'left',
labelWidth : 160,
region : 'center',
autoScroll : true,
//bodyStyle:'overflow-x:auto;',
items : [field_newspwap_3],
buttonAlign : 'center',
buttons: [{
text:'保存',
xtype : 'easyButton',
handler:function(){// 保存操作
if (frm_newspwap.form.isValid() == false){
return;
}
frm_newspwap.form.submit({
url:'test/UserRole/save.do',
success:function(form,action){
Ext.MessageBox.alert('提示',action.result.msg);
grid_pag.doLoad(0);
},
scope:this,
failure:function(form,action){
Ext.MessageBox.alert('错误',action.result.msg);
}
})
}
}]
});
-
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2020-10-20 09:37:14主要介绍了Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法,需要的朋友可以参考下 -
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2020-12-09 12:32:38今天系统中有处地方需要一个功能点击一个按钮后将树节点前的复选框去掉,变成没有选择的状态。网上搜索了半天,然后自己查查API,终于找到解决办法了,下面把方法贴出来。 在Extjs3.x和4.x版本中的处理方法是不一样... -
Extjs 点击复选框在表格中增加相关信息行
2020-10-21 23:02:54主要介绍了Extjs 点击复选框在表格中增加相关信息行 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 -
ExtJS4 grid复选框只有点击复选框才能选中
2016-08-26 14:43:00selModel : Ext.create('Ext.selection.CheckboxModel', { mode : "SIMPLE", checkOnly:true, width : 100 }),
selModel : Ext.create('Ext.selection.CheckboxModel', {
mode : "SIMPLE",
checkOnly:true,
width : 100
}), -
extjs 动态生成复选框
2021-12-23 09:40:52', // border: '1 red solid ', items:[] } ] }, controller: showAddWin: function (button) { //点击列表上新增按钮是触发 var addwin = Ext.widget("appointmentAddView"); const store = this.getStore('...{ xtype:'container', layout:'column', // name:'packingRequireList', // width:780, margin: '5 5 5 5', // padding: '10 5 5 0', items:[ { xtype:'label', text: '包装要求:', // layout: 'column', // bodyPadding: '10 5 5 5', style:{ 'text-align':'right' }, defaultAlign:'right', // fieldDefaults: { // labelAlign: 'right', // labelWidth: 170 // }, width:170, layout: { type: 'hbox', align: 'middle' }, dock: 'right', }, { xtype:'container', name:'ckbContainer', layout:'column', // width:780, padding: '0 15 0 70', style: 'border: 1px #c7c7c7 solid;', // border: '1 red solid ', items:[] } ] },
controller:
showAddWin: function (button) { //点击列表上新增按钮是触发 var addwin = Ext.widget("appointmentAddView"); const store = this.getStore('pickingRequireStore'); store.proxy.extraParams = { paraType:'包装要求' }; // var checkboxesArr = []; store.load({ scope : this, callback: function(records, operation, success) { debugger var cont= addwin.down('[name=ckbContainer]') // var cont= addwin.down('[name=ckbContainer2]') for(var i=0;i<records.length;i++){ cont.add( Ext.create({ xtype:'checkbox', margin: '5 10 5 5', name:'packingRequireList', // boxLabel:'test', boxLabel:records[i].data.paraName, inputValue:records[i].data.paraCode })); } } }); addwin.getViewModel().set('title','新建入库预约单'); addwin.show();
-
ExtJs之treePanel checkbox 复选框
2021-05-14 10:08:11目录树需要实现多级复选的时的应用 1 效果图 代码 1.实现关键—–子节点和父节点的联动 /** 递归遍历父节点 **/ var travelParentChecked = function(node, checkStatus, opts){ //父节点 var upNode =... -
Extjs6.5.1中如何获取被选中的复选框的值
2017-09-05 10:39:20我想点击移除按钮,然后删除被复选框选中的数据,用的这两个 var gird = o.ownerCt.ownerCt; var data = gird.getSelectionModel().getSelection(); 但是它会报错说ownerCt未定义,图片有详细的标注,我这个复选框... -
[Ext JS] Grid 的复选框行选择之——某些行不能选取
2021-10-29 07:18:28使用复选框(Checkbox) 对Grid进行选择。 某些行根据改行的数据的条件进行是否可以选取。 需要有全选和全部反选的功能。 实现后的效果如下: 实现方案 Grid的第一列定义成 checkcolumn 类型 { xtype:'... -
JavaScript_jquery实现勾选复选框触发事件给input赋值,代码如下: http://www.w3.org/1999/ - phpStudy
2021-04-19 04:26:37jquery实现勾选复选框触发事件给input赋值代码...jquery点击复选框触发事件给input赋值-柯乐义* {margin: 0;padding: 0;list-style-type: none;}a, img {border: 0;text-decoration: none;}body {font: 12px/180% ... -
extjs4 treepanel checkbox 复选框
2018-12-26 14:48:42原博客地址:... Extjs4 treePanel checkBox 多选框全选问题,从网上找了几个,发现都或多或少有点问题,于是乎就自己写了, 结果发现 fireEvent('checkchange'...) 函数不起作用,于是直接用递归代替。 ... -
ExtJs实现复选框组Checkboxgroup单勾选及复选框组对多个复选框组跨控件全选
2015-01-20 15:22:39ExtJs实现复选框组Checkboxgroup单勾选及复选框组对多个复选框组跨控件全选 -
Ext --Grid复选框列
2018-07-18 22:31:23今天我们主要介绍一下grid的单选、多选功能,并告诉小伙伴们如何显示一个选择框列 extjs grid默认支持单选 在前面几节的例子中,我们已经见识了extjs grid的强大。今天说到单选和多选,我们不妨打开前面的例子,... -
ext grid 复选框 js 勾选
2018-04-12 17:04:47record.set('chcekname',true);//改变checkbox属性,设置选中 // grid.getSelectionModel().select(record); //设置复选框选中 -
ExtJS带复选框的下拉树对复选框中半选状态的实现
2016-10-28 14:17:00需要注意的一点就是,由于点击半选的复选框时,复选框需要处于不选状态中,所以当复选框处于半选状态时,checked此时应该等于true。 ok,从上面的原理可以看出我们实现半选的几个难点: 随着checkbox... -
Extjs中可编辑表格,树,触发按钮和复选框的结合使用
2014-09-25 20:23:16Extjs中可编辑表格,树,触发按钮和复选框的结合使用 1.数据源Store: /*1.创建Record*/ var costRecord = new Ext.data.Record.create([ {name:"id",type:"int"}, {name:"xmid... -
jsp页面设置复选框checkbox的只读效果
2020-12-23 17:02:10提到只读,很容易想到readonly属性,但是对于复选框来说,这个属性和期望得到的效果是有差别的。原因在于readonly属性关联的是页面元素的value属性(例如text,设置了readonly就不能修改输入框的文本内容),而复选框... -
Extjs 复选框下拉列表
2014-12-05 16:48:35Extjs 复选框下拉列表 代码量很少很实用 -
给单选和复选按钮添加事件
2021-07-06 10:31:36{ var win = new Ext.Window ({ id:"win", width:300, height:200, title:"给单选和复选按钮添加事件", tbar: [ { xtype : 'radio', id:"check", boxLabel : '选中', name : 'flag', inputValue : '0', handler:... -
解决Extjs当中复选框全选后,取消选中某一项,全选框仍是选中状态的问题
2014-12-11 11:53:26解决Extjs当中复选框全选后,取消选中某一项,全选框仍是选中状态的问题 方法: 写一个js文件,在js文件中重写复选框的显示代码,在其他地方引入该js文件 js文件重写代码如下: //清除 checkbox 表头... -
ExtJS表格——行号、复选框、选择模型
2013-05-19 14:05:49可以通过如下设置取消单击即选中,而需要通过单击复选框来选中: var sm = Ext.grid.CheckboxSelectionModel({ handleMouseDown: Ext.emptyFn }); 复选框设置代码: Ext.onReady(function() { ... -
ExtJs 控制复选框disabled
2012-04-13 14:12:18//将复选框变 disabled的style }else{ return " </div> "; //将复选框变 正常的 styele } }, header:'',singleSelect:true //允许 单选,不能多选 默认为false //不允许使用点击表格形式修改选择 // ... -
Extjs3.4中TreePanel含复选框树选中状态级联处理详解(含半选)
2018-09-10 19:03:25这里讨论TreePanel树含复选框且允许半选状态存在方式,当选中某节点时时,向上和向下的选中情况处理。在允许含半选的情况下,在异步动态获取节点数据时,通常都会在返回节点JSON数组数据中包含indeterminate属性。... -
zTree点击文字勾选复选框
2016-09-08 19:25:101、问题背景 系统利用zTree插件生成下拉复选树,点击文字勾选复选框2、实现源码 zTree点击文字勾选复选框 $(document).ready(function(){ //初始化树 zTree = $.fn.zTree.init($("#... -
ExtJs—Grid多选框中勾选与单击事件的冲突
2015-09-11 14:37:01因为使用了grid多选功能,在用户单击或者点击勾选框时将数据选中,但发现有一个问题:grid列表(多选)的单击动作与勾选动作冲突,单击时可以选中或者取消选中的数据,而通过点击勾选框来打钩选择或者取消选择失败...