ext proerptyGrid-属性表格

淩亂°似流年 2022-07-24 03:25 160阅读 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 条评论，160人围观）

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

相关阅读

相关 (Ext基础篇) Ext表格控件

xt中的表格功能非常强大，包括排序、缓存、拖动、隐藏某一行、自动显示行号、列汇总、单元格编辑等实用功能。表格由类Ext.grid.GridPanel定义，继承自Pan...

朴灿烈づ我的快乐病毒、/ 2024年04月17日 23:42/ 0 赞/ 85 阅读

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

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

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

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

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

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

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

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

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

相关关于java，word表格，通过将模板表格的属性附加到自定义表格上，也就是修改表格的属性（通过模板表格的属性）。

需求：有一个可修改属性样式的模板表格，然后生成的word文档中所有的表格的属性都使用该模板表格的属性样式。本质就是获取二个参数，一个模板表格的html和自定义表格的html

缺乏、安全感/ 2023年10月10日 15:02/ 0 赞/ 9 阅读

相关 CSS - 表格标签属性和样式属性

table标签属性 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4

Dear 丶/ 2023年10月03日 10:42/ 0 赞/ 25 阅读

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

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

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

相关 ext proerptyGrid-属性表格

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

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

相关 QTableWidget表格属性

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

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

相关 Ext.grid.GridPanel的属性

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

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