Extjs学习总结之23EditGridPanel可编辑表格

 

Ext.onReady(function(){
    /*
     * EditorGridPanel的工作过程
     * 1、用户点击单元格
     * 2、单元格按照预设的组件显示单元格的内容并处于编辑状态
     * 3、离开单元格的编辑状态
     * 4、更新编辑后的内容，出现三角号表示已经被修改过
     * 5、程序内部变化：将记录设置为脏读数据状态，并将修改后的记录存放在Record类型的数组modified中。
     */


    //准备数据
    var data = [
        {id:1,date:new Date(),name:"吕鹏",address:"中华人民共和国",bank:"中国光大银行",isFast:true},
        {id:2,date:new Date(),name:"张三",address:"中华人民共和国",bank:"中国农业银行",isFast:false},
        {id:3,date:new Date(),name:"李四",address:"中华人民共和国",bank:"中国商业银行",isFast:false},
        {id:4,date:new Date(),name:"王五",address:"中华人民共和国",bank:"中国招商银行",isFast:false}
    ];
    //Proxy
    var proxy = new Ext.data.MemoryProxy(data);
    //描述数据结构
    var Order = Ext.data.Record.create(
        [
            {name:"ID",type:"int",mapping:"id"},//编号
            {name:"DATE",type:"date",mapping:"date"},//日期
            {name:"NAME",type:"string",mapping:"name"},//姓名
            {name:"ADDRESS",type:"string",mapping:"address"},//地址
            {name:"BANK",type:"string",mapping:"bank"},//银行
            {name:"ISFAST",type:"boolean",mapping:"isFast"}//银行
        ]
    );
    //Reader
    var reader = new Ext.data.JsonReader({},Order);
    //Store  列模型中的dataIndex必须和Human结构中的name属性保持一致
    var store = new Ext.data.Store({
        proxy:proxy,
        reader:reader,
        autoLoad:true,
        pruneModifiedRecords:true
    });

    //交易银行
    var banks = [
        ["中国光大银行","中国光大银行"],
        ["中国农业银行","中国农业银行"],
        ["中国商业银行","中国商业银行"],
        ["中国招商银行","中国招商银行"]
    ]

    //列模型
    var cm = new Ext.grid.ColumnModel([
        {header:"订单编号",dataIndex:"ID",width:60,editor:new Ext.grid.GridEditor(new Ext.form.NumberField({allowBlank:false}))},
        {header:"下单日期",dataIndex:"DATE",width:140,renderer:new Ext.util.Format.dateRenderer("Y-m-d"),editor:new Ext.grid.GridEditor(new Ext.form.DateField({
            format:"Y-m-d"
        }))},
        {header:"收货人姓名",dataIndex:"NAME",width:120,editor:new Ext.grid.GridEditor(new Ext.form.TextField())},
        {header:"收货人地址",dataIndex:"ADDRESS",editor:new Ext.grid.GridEditor(new Ext.form.TextField())},
        {header:"交易银行",dataIndex:"BANK",width:120,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({
            store:new Ext.data.SimpleStore({
                fields:["value","text"],
                data:banks
            }),
            displayField:"text",
            valueField:"value",
            mode:"local",
            triggerAction:"all",
            readOnly:true,
            emptyText:"请选择银行"

        }))},
        {header:"快递",dataIndex:"ISFAST",width:70,renderer:function(v){return v?"快递":"非快递"},editor:new Ext.grid.GridEditor(new Ext.form.Checkbox())}
    ]);
    //EditorGridPanel定义
    var grid = new Ext.grid.EditorGridPanel({
        store:store,
        cm:cm,
        autoExpandColumn:"ADDRESS",
        width:800,
        autoHeight:true,
        renderTo:"a",
        autoEncode:true, //提交时是否自动转码
        tbar:[{
            text:"添加一行",
            cls:"x-btn-text-icon",
            handler:function(){
                var initValue = {
                        ID:"",
                        DATE:new Date(),
                        NAME:"",
                        ADDRESS:"",
                        BANK:"",
                        ISFAST:false
                    };

                var order = new Order(initValue);
                grid.stopEditing();
                grid.getStore().add(order);

                //设置脏数据
                order.dirty = true;
                //只要一个字段值被修改了，该行的所有值都设置为脏读标记
                order.modified = initValue;
                if(grid.getStore().modified.indexOf(order) == -1){
                    grid.getStore().modified.push(order);
                }
            }

        },{
            text:"删除一行",
            cls:"x-btn-text-icon",
            handler:function(){
                var sm = grid.getSelectionModel();
                if(sm.hasSelection()){
                    Ext.Msg.confirm("提示","真的要删除选中的行吗？",function(btn){
                        if(btn == "yes"){
                            var cellIndex = sm.getSelectedCell();//获取被选择的单元格的行和列索引
                            var record = grid.getStore().getAt(cellIndex[0]);
                            grid.getStore().remove(record);
                        }
                    });
                }else{
                    Ext.Msg.alert("错误","请先选择删除的行，谢谢");
                }
            }
        },"-",{
            text:"保存",
//          icon:"",
            cls:"x-btn-text-icon",
            handler:function(){
                var store = grid.getStore();
                //得到修改过的Recored的集合
                var modified = store.modified.slice(0);
                //将数据放到另外一个数组中
                var jsonArray = [];
                Ext.each(modified,function(m){
                    //alert(m.data.ADDRESS);//读取当前被修改的记录的地址
                    //m.data中保存的是当前Recored的所有字段的值json，不包含结构信息
                    jsonArray.push(m.data);
                });

                var r = checkBlank(modified);
                if(!r){
                    return;
                }else{
                    //通过ajax请求将修改的记录发送到服务器最终影响数据库
                    Ext.Ajax.request({
                        method:"post",//最好不要用get请求
                        url:"../../../editGridServlet",
                        success:function(response,config){
                            var json = Ext.util.JSON.decode(response.responseText);
                            //grid.getStore().reload();
                            Ext.Msg.alert("提交成功",json.msg);
                        },
                        params:{data:Ext.util.JSON.encode(jsonArray)}

                    });
                }
            }
        }]
    });
    //删除一行时，同步数据库
    grid.getStore().on("remove",function(s,record,index){
        var jsonArray = [record,data];//因为servlet只处理数组，所以先变成数组
        if(record.data.ID != ""){
            Ext.Ajax.request({
                method:"post",
                url:"../../../editGridServlet",
                params:{data:Ext.util.JSON.encode(jsonArray),action:"delete"},
                success:function(response,config){
                    var msg = Ext.util.JSON.decode(response.responseText);
                    //grid.getStore().reload();
                    Ext.Msg.alert("",msg.msg);
                }
            });
        }
    });

    //验证是否输入的数据是有效的
    var checkBlank = function(modified/*所有编辑过的和新增加的Record*/){
        var result = true;
        Ext.each(modified,function(record){
            var keys = record.fields.keys;//获取Record的所有名称
            Ext.each(keys,function(name){
                //根据名称获取相应的值
                var value = record.data[name];
                //找出指定名称所在的列索引
                var colIndex = cm.findColumnIndex(name);
                //var rowIndex = grid.getStore().indexOfId(record.id);

                //根据行列索引找出组件编辑器
                var editor = cm.getCellEditor(colIndex).field;
                //验证是否合法
                var r = editor.validateValue(value);
                if(!r){
                    Ext.MessageBox.alert("验证","对不起，您输入的数据非法");
                    result = false;
                    return;
                }

            });
        });
        return result;
    }
});