Extjs—checkbox的取值以及修改时已选项的回显问题
注:我也是第一次在CSDN写文章,格式什么的各位就不要在意了,解决问题才是关键啊
最近在公司做项目的时候,在前段页面中用到了extjs,以前都是使用其它的前端框架,这次也是第一次接触extjs,
在实现代码的过程中遇到了各种各样的问题,其中就包括了extjs中多选框的取值以及修改时已选择项的回显问题
1.怎样取值?
2.怎样在修改时回显?
现在看来这个问题很简单但当时困扰了我很久,也是百度各种网站找到的都是怎样取值,至于怎样回显找了各个网站没有一个答案………………
下面给出我在实际项目中的解决方法,希望对遇到同样问题的同学有所帮助
以上代码就是一个checkbox,具体代码请各位根据自己实际情况修改
注:本实例中多选框为四个 若想让其两两一行 需要采用table布局
此处有一个问题,不知道什么原因使用F12查看checkbox元素发现extjs.css默认用了圆形图标,而不是方形。由于公司extjs.css没在项目中引入。最后测试组让修改但涉及到源文件最后协商不做修改。
1.checkbox的取值:
此处 ‘smlx’就是图1中定义的checkbox id,根据id获取选中项,定义一个smlx(名字随便起)变量用于取值
通过遍历取得选中项,例如选择了第一,第二个 那么 smlx=1,2
取到了选中的值就是向数据库保存了,下图中:
ordernumberScanType是实体类中的字段 smlx 就是上图中我们定义的变量,用于取值:
相当于: id : Ext.getCmp("id_input").getValue(),
2.修改时回显问题
下面就是我遇到的当时让我困扰的问题 ,修改时回显问题
1.在点击修改的时候,首先将默认选中的checkbox也恢复到未选中状态,这样就可以根据从数据库查到的数据进行准确的回显
2.record.data.ordernumberScanType:在我这边是表示从数据库获取到的ordernumberScanType数据,具体情况请根据自己业务修改
坑:此处的id是后来才加的,当时写checkbox是我想的是已经有一个id=‘smlx’里面应该不能在定义id了要不然等取值的时候万一根据id=‘smlx’取不到值怎么办,所以就没试,可把我坑惨了
id:'lx1_id' 是必须的,不然在修改时是无法准确回显的
record.data.ordernumberScanType.indexOf("1,")>-1 :是说根据索引判断1,是否在record.data.ordernumberScanType中,如果在就将1选中,以此类推。
以上就是我第一次用extjs遇到的问题,希望对遇到同样问题的你有所帮助。