ExtJS——继承CheckboxGroup,添加远程获取item的功能_a-checkbox-group v3 远程获取元素

作者：weixin_40725706 | 2024-03-27 05:43:56

踩

a-checkbox-group v3 远程获取元素

remote.php


<?php
echo json_encode(array(array('id'=>1,'name'=>'类别一','inputValue'=>'1'),array('id'=>2,'name'=>'类别二','inputValue'=>'2'),array('id'=>3,'name'=>'类别三','inputValue'=>'3')));
?>



index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
 
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script type="text/javascript" src="ext-all-debug.js"></script>
    <script type="text/javascript" src="ext-all.js"></script>
    <script type="text/javascript" src="bootstrap.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
    Ext.namespace("Ext.ux");
    Ext.ux.RemoteCheckboxGroup = Ext.extend(Ext.form.CheckboxGroup,{
        url:'',
        boxLabel:'',
        inputValue:'',
        setValue:function(val){
            if(val.split){  //split() 方法用于把一个字符串分割成字符串数组
              val = val.split(',');
            }
            this.reset();
            for(var i=0;i<val.length;i++){
                this.items.each(function(c){
                    if(c.inputValue==val[i]){
                        c.setValue(true);
                    }
                });
            }
        },
        reset:function(){
            this.items.each(function(c){
                c.setValue(false);
            });
        },
        getValue:function(){
            var val=[];
            this.items.each(function(c){
                if(c.getValue()==true)
                    val.push(c.inputValue);
            });
            return val.join(',');
        },
        initComponent:function(ct,position){
            var items=[];
            if(!this.items){//如果没有指定items就从url远程获取数据
              Ext.Ajax.request({
                url:this.url,
                scope:this,
                async:false,
                success:function(response){
                    var data=Ext.JSON.decode(response.responseText);
                    var Items2 = this.items;
                    if(this.panel){
                        var columns = this.panel.items;
                        if(columns){
                            for(var i=0;i<columns.items.length;i++){
                                column=columns.items[i];
                                column.removeAll();
                            }
                            Items2.clear();
                        }
                    }
                    for(var i=0;i<data.length;i++){
                        var d= data[i];
                        var chk = {boxLabel:d[this.boxLabel],name:this.name,inputValue:d[this.inputValue]};
                        items.push(chk);
                    }
                }
 
              });
              this.items=items;//关键一步
            }
            Ext.ux.RemoteCheckboxGroup.superclass.initComponent.call(this,arguments);
        }
    });
  //  Ext.reg('remotecheckboxgroup',Ext.ux.RemoteCheckboxGroup);类似于别名
 
   var checksource = new Ext.ux.RemoteCheckboxGroup({
        name:'checksource',//名称，当客户端提交的时候，服务端会根据该名称接收值，当值为多选时post 结果如下[1,2,3]，用'，'分隔。
        boxLabel:'name',
        inputValue:'id',
        url:'php/remote.php',//数据源的地址
        fieldLabel:'招聘来源',
        width:1000,//非常重要，不设置根本显示不出来
        style:'padding-top:3px;height:17px;'
    });   
     //创建panel
    var panel = new Ext.Panel({
        title: '动态复选框',
        width: 1000,
        height: 200,
        frame: true,
        items: [checksource]
    });
 
    //创建窗体
    var win = new Ext.Window({
        title: '窗口',
        id: 'window',
        width: 1100,
        height: 374,
        resizable: true,
        modal: true,
        closable: true,
        maximizable: true,
        minimizable: true,
        items: [panel]
    });
    win.show();
});
</script>
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/322140