ext proerptyGrid-属性表格

用ext proerptyGrid 做的属性表格，可以切换source和customEditors，并监听textFiled弹出窗口

用ext proerptyGrid 做的属性表格，可以切换source和customEditors，并监听textFiled弹出窗口。

var propsGrid = null;
Ext.onReady(function(){
    propsGrid = new Ext.grid.PropertyGrid({
        el:'props-grid',
        //nameText: 'Properties Grid',
        width:300,
        autoHeight:true,
        viewConfig : {
            forceFit:true,
            scrollOffset:2 // the grid will never have scrollbars
        },
        clicksToEdit : 1,
        source:{
            "id": "111111",
            "类型": "流程",
            "流程类别": "请假",
            "名称": "请假流程",
            "描述": "sss",
            "版本号": 1,
            "执行监听": "{'totalProperty':1,'items':[{'comboBox':'start','name':'赵丽蓉'}]}"
         },
         customEditors:{
            "id":new Ext.grid.GridEditor(new Ext.form.TextField({disabled:true})),//disabled:true设置编辑器不可编辑
            "类型":new Ext.grid.GridEditor(new Ext.form.TextField({disabled:true})),
            "版本号":new Ext.grid.GridEditor(new Ext.form.TextField({disabled:true})),
            "流程类别": new Ext.grid.GridEditor(new Ext.form.ComboBox({
                //editable:false,
                displayField:"name",
                mode:'local',
                triggerAction:'all',
                store:new Ext.data.SimpleStore({
                    fields:['name'],
                    data:[["请假"],["报销"],["财务"]]
                })
            })),
            "描述":new Ext.grid.GridEditor(new Ext.form.TextField({
                listeners:{
                    focus:function(){
                        getDesc();                                                                                         
                    }
                }
            })),
            "执行监听": new Ext.grid.GridEditor(new Ext.form.TextField({
                listeners:{
                    focus:function(){
                        getListenerWin();
                    }
                }
            }))
         }
    });

    propsGrid.render();  

});
function modifyGridSource(){
    alert("modifyGridSource");
    propsGrid.setSource({
        "id":"2222222",
        "类型":"开始事件",
        "版本号":1,
        "描述":"xxx",
        "结束时间":new Date(Date.parse('03/13/2013')),
        "名称":"开始事件",
        "执行监听": "{'totalProperty':1,'items':[{'comboBox':'start','name':'张三'}]}"
    });
    propsGrid.customEditors = {
        "id":new Ext.grid.GridEditor(new Ext.form.TextField({disabled:true})) , //disabled:true设置编辑器不可编辑
        "类型":new Ext.grid.GridEditor(new Ext.form.TextField({disabled:true})),
        "版本号":new Ext.grid.GridEditor(new Ext.form.TextField({disabled:true})),
        "描述":new Ext.grid.GridEditor(new Ext.form.TextField({
            listeners:{
                focus:function(){
                    getDesc();                                                                                         
                }
            }
        })),
        "执行监听": new Ext.grid.GridEditor(new Ext.form.TextField({
            listeners:{
                focus:function(){
                    getListenerWin();
                }
            }
        })) 
    }
}

function getListenerWin(){
     //监听窗口
    var data=[];
    //选择列
    var comboData=[
        ['start','开始'],
        ['take','认领'],
        ['end','结束']
    ];
    var comboStore=new Ext.data.SimpleStore({
        data:comboData,
        fields:['value','text']
    });
    var comboBox=new Ext.form.ComboBox({
        id:'cb',
        store:comboStore,
        triggerAction:'all',
        displayField:'text',
        valueField:'value',
        mode:'local',
        //readOnly:true,
        emptyText:'请选择'
    });
    var cm=new Ext.grid.ColumnModel([{
        header:'选择列',
        dataIndex:'comboBox',
        editor:new Ext.grid.GridEditor(comboBox)
    },{
        header:'姓名',
        dataIndex:'name',
        editor:new Ext.grid.GridEditor(new Ext.form.TextField()) 
    }]);    
    var store=new Ext.data.Store({
        proxy:new Ext.data.MemoryProxy(data),
        reader:new Ext.data.ArrayReader({},[
            {name:'comboBox'},
            {name:'name'}
        ]),
        pruneModifiedRecords:true//如果为true,每次进行remove和load操作时,store会自动清除modified标记.可以避免出现下次提交时还会把上次那些modified信息都带上的现象
    });
    store.load();
    //这里定义一个MyRecord类
    var MyRecord=new Ext.data.Record.create([
        {name:'comboBox',type:'string'},
        {name:'name',type:'string'}
    ]);
    btn_add=function(){
    //单击添加按钮,添加一个空行(首先新建一个MyRecord,记得给里面的属性赋值,否则EditorGrid最后显示的内容会混乱)
        var p=new MyRecord({
            comboBox:'',
            name:''
        }); 
        grid.stopEditing();//关闭表格的编辑状态
        store.insert(0,p);//把我们刚才创建的MyRecord放到表格的第一行
        grid.startEditing(0,0);//激活第一行第一列的编辑状态
    }
    btn_delete=function(){
        var sm=grid.getSelectionModel();//获取表格的选择模型
        var cell=sm.getSelectedCell();//从选择模型中获取选中的单元格,这个单元格有两个属性,一个是行号,一个是列号
        if(cell != null && cell != undefined){
            Ext.Msg.confirm('提示','确定要删除?',function(btn){
                if(btn=='yes'){
                    var record=store.getAt(cell[0]);//通过行号得到store这一行对应的Record,然后移除即可
                    store.remove(record);                         
                }    
            });           
        }else{
            Ext.Msg.alert("警告","请选中要删除的行！");
        }
         
    }
    //这里不是GridPanel,而是EditorGridPanel
    var grid=new Ext.grid.EditorGridPanel({
        id:'grid',
        cm:cm,
        store:store,
        clicksToEdit:1,
        width:430,
        height:270,
        scrollbars:true,
        //renderTo:'editor-grid',
        tbar:new Ext.Toolbar({
            height:25,
            items:[
            {
                text:'添加一行',
                handler:btn_add
            },"-",{
                text:'删除一行',
                handler:btn_delete
            }]
        })
    });

    return  new Ext.Window({
        id:'listenerWin',
        layout : 'fit',
        width : 450,
        height : 300,
        resizable:false,
        closeAction : 'hide',
        plain : true,
        title : '执行监听',
        modal:true, 
        items : [grid],
        listeners:{
           beforerender:function(){   //将值渲染到文本框上
              var listenVal = propsGrid.getStore().getById("执行监听").get("value");
              var items = Ext.decode(listenVal).items;
              Ext.each(items,function(item,i){
                var comboBox1 = items[i].comboBox;
                var name1 = items[i].name;
                var dataArr = [];
                dataArr.push(comboBox1);
                dataArr.push(name1);
                data.push(dataArr);
              });
              store.load();
           } 
        },
        buttonAlign:'center', 
        buttons : [{
            text : '保存',
            disabled : false,
            handler : function() {
                var m=store.modified.slice(0);//获取store中修改过的数据,放到jsonArra数组中
                //把这些数据组装成简单的数组.两种方发:第一种.因为数组m里保存的是Record,而不是简单的对象,只需要去除Record的data属性即可,
                //然后使用循环将data添加到数组中 第二种.使用each()函数.each()的作用是遍历array,并对每项分别调用fn函数,如果array不是数组,
                //则只执行一次.如果某项调用fn后结果返回false,那么遍历将结束并退出.
                               
                var jsonDatas = Ext.decode(propsGrid.getStore().getById("执行监听").get("value"));
                var jsonArray = jsonDatas.items;
                Ext.each(m,function(item,i){
                    var jsonData = {comboBox:item.data['comboBox'],name:item.data["name"]};
                    jsonArray.push(item.data);  
                });
                var json = {totalProperty:m.length+jsonDatas.totalProperty,items:jsonArray};                
                var record = propsGrid.getStore().getById("执行监听");
                record.set("value", JSON.stringify(json));//写入映射后的值
                record.commit();//执行修改
                alert(propsGrid.getStore().getById("执行监听").get("value"));
                Ext.getCmp('listenerWin').destroy();
           }
        }, {
            text : '关闭',
            handler : function() {
                Ext.getCmp('listenerWin').destroy();
            }
        }]
    }).show();
}

function getDesc(){
    //描述窗口
    return new Ext.Window({
        id:'descWin',
        layout : 'fit',
        width : 350,
        height : 200,
        resizable:false,
        closeAction : 'hide',
        plain : true,
        title : '描述',
        modal:true, 
        items : [new Ext.form.TextArea({
                id:'desc',
                hideLabel:true
            })],
        buttonAlign:'center', 
        listeners:{
            beforeshow:function(){
                var descVal = propsGrid.getStore().getById("描述").get("value");
                alert(descVal);
                alert(Ext.getCmp("desc").id);
                if(descVal != null && descVal != ""){
                    Ext.getCmp("desc").setValue(descVal);
                }                      
            }
        },
        buttons : [ {
            text : '保存',
            disabled : false,
            handler : function() {
                var desc = Ext.getCmp("desc").getValue();
                //将弹出框上的内容回显在textFiled
                var record = propsGrid.getStore().getById("描述");
                record.set("value", desc);//写入映射后的值
                record.commit();//执行修改
                Ext.getCmp('descWin').destroy();
           }
        }, {
            text : '关闭',
            handler : function() {
                Ext.getCmp('descWin').destroy();
            }
        }]
    }).show();
}