ext proerptyGrid-属性表格

淩亂°似流年 2022-07-24 03:25 147阅读 0赞

# [用ext proerptyGrid 做的属性表格，可以切换source和customEditors，并监听textFiled弹出窗口][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();  
\}

[  
][Link 1]

[ext proerptyGrid _source_customEditors_textFiled]: http://blog.csdn.net/z08050211/article/details/8676164
[Link 1]: http://blog.csdn.net/z08050211/article/details/8676164#

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关 [Ext JS] Grid表格批量编辑的实现

Grid使用表格的形式显示数据，在实际的场景中，除了查看数据之外，往往还有在表格中直接编辑数据的需求。编辑的方式有：单行编辑批量编辑单行编辑可以通过

- 日理万妓/ 2024年04月07日 16:05/ 0 赞/ 73 阅读

相关 [Ext JS]3.6 Ext JS 表格(Grid)概览

Grid, 翻译过来是网格，也就是表格。 Grid 的基本构成面板：`Ext.grid.Panel` 表格视图：`Ext.view.Table`。

落日映苍穹つ/ 2024年03月23日 14:20/ 0 赞/ 95 阅读

相关 Ext JS嵌套分组表格的实现

这里的嵌套分组表格指的是这样一种表格表格的每一行可以展开下一层的Grid 展开的嵌套表格是一个分组的表格显示的效果如下图： ![在这里插入图片描述][5

分手后的思念是犯贱/ 2024年03月16日 11:16/ 0 赞/ 78 阅读

相关 HTML笔记：表格属性介绍

> 摘要：微信搜索【[三桥君][Link 1]】 > 说明：这是关于HTML5的代码笔记一、理论知识表格标签 caption：表格标题 table：表格

蔚落/ 2023年03月04日 10:27/ 0 赞/ 4 阅读

相关谨用java.ext.dirs系统属性!

众所周知，java中系统属性java.ext.dirs指定的目录由ExtClassLoader加载器加载，如果您的程序没有指定该系统属性（-Djava.ext.dirs=sss

雨点打透心脏的1/2处/ 2022年09月30日 13:46/ 0 赞/ 214 阅读

相关 ext proerptyGrid-属性表格

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

淩亂°似流年/ 2022年07月24日 03:25/ 0 赞/ 148 阅读

相关 datagrid属性表格自定义表格样式,表格内自定义标签

1.自定义表格样式 columns:[[ {field:'permission',title:'编辑权限',width:100,

￡神魔★判官ぃ/ 2022年05月17日 07:34/ 0 赞/ 265 阅读

相关 QTableWidget表格属性

ui->tableWidget->setEditTriggers(QAbstractItemView::NoEditTriggers); //设置不可编辑 ui

矫情吗；*/ 2022年05月15日 00:25/ 0 赞/ 372 阅读

相关 Ext.grid.GridPanel的属性

1、Ext.grid.GridPanel 主要配置项： store：表格的数据集 columns：表格列模式的配置数组，可自动创建ColumnModel列模式

古城微笑少年丶/ 2021年12月18日 07:11/ 0 赞/ 239 阅读

相关 sql 增加修改表格属性字段

1、修改字段默认值 alter table 表名 drop constraint 约束名字 ------注解：删除表的字段的原有约束 alter table 表名 add

小鱼儿/ 2021年12月12日 05:13/ 1 赞/ 335 阅读