Extjs—checkbox的取值以及修改时已选项的回显问题

时间:2024-04-02 20:12:12

Extjs—checkbox的取值以及修改时已选项的回显问题

注:我也是第一次在CSDN写文章,格式什么的各位就不要在意了,解决问题才是关键啊

 

最近在公司做项目的时候,在前段页面中用到了extjs,以前都是使用其它的前端框架,这次也是第一次接触extjs,

在实现代码的过程中遇到了各种各样的问题,其中就包括了extjs中多选框的取值以及修改时已选择项的回显问题

1.怎样取值?

2.怎样在修改时回显?

 

现在看来这个问题很简单但当时困扰了我很久,也是百度各种网站找到的都是怎样取值,至于怎样回显找了各个网站没有一个答案………………

 

下面给出我在实际项目中的解决方法,希望对遇到同样问题的同学有所帮助

Extjs—checkbox的取值以及修改时已选项的回显问题

 

 

以上代码就是一个checkbox,具体代码请各位根据自己实际情况修改

注:本实例中多选框为四个 若想让其两两一行 需要采用table布局

Extjs—checkbox的取值以及修改时已选项的回显问题

Extjs—checkbox的取值以及修改时已选项的回显问题

此处有一个问题,不知道什么原因使用F12查看checkbox元素发现extjs.css默认用了圆形图标,而不是方形。由于公司extjs.css没在项目中引入。最后测试组让修改但涉及到源文件最后协商不做修改。

 

1.checkbox的取值:

Extjs—checkbox的取值以及修改时已选项的回显问题

 

此处 ‘smlx’就是图1中定义的checkbox id,根据id获取选中项,定义一个smlx(名字随便起)变量用于取值

通过遍历取得选中项,例如选择了第一,第二个    那么 smlx=1,2

 

取到了选中的值就是向数据库保存了,下图中:

ordernumberScanType是实体类中的字段  smlx 就是上图中我们定义的变量,用于取值:

 

Extjs—checkbox的取值以及修改时已选项的回显问题

相当于: id : Ext.getCmp("id_input").getValue(),

 

 

 

2.修改时回显问题

 

 

下面就是我遇到的当时让我困扰的问题 ,修改时回显问题

 

1.在点击修改的时候,首先将默认选中的checkbox也恢复到未选中状态,这样就可以根据从数据库查到的数据进行准确的回显

2.record.data.ordernumberScanType:在我这边是表示从数据库获取到的ordernumberScanType数据,具体情况请根据自己业务修改

 

坑:此处的id是后来才加的,当时写checkbox是我想的是已经有一个id=‘smlx’里面应该不能在定义id了要不然等取值的时候万一根据id=‘smlx’取不到值怎么办,所以就没试,可把我坑惨了

 

id:'lx1_id' 是必须的,不然在修改时是无法准确回显的

Extjs—checkbox的取值以及修改时已选项的回显问题

Extjs—checkbox的取值以及修改时已选项的回显问题

record.data.ordernumberScanType.indexOf("1,")>-1 :是说根据索引判断1,是否在record.data.ordernumberScanType中,如果在就将1选中,以此类推。

 

以上就是我第一次用extjs遇到的问题,希望对遇到同样问题的你有所帮助。