Extjs4学习笔记(四)------可编辑表格

来源：互联网发布：python有哪些图形库编辑：程序博客网时间：2024/06/06 23:14

Extjs4可编辑表格

1.第一种样式
这里写图片描述

这种样式用到的插件是CellEditing.

 var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {            clicksToEdit: 1        });

默认双击单元格进行编辑, 可以使用clickToEdit此属性更改点击数进行编辑.

在grid中定义插件

plugins: [cellEditing],

此页面的完整代码

     Ext.onReady(function(){        Ext.define('yxrz', {            extend: 'Ext.data.Model',            fields:['content','point', 'type']        });     //表格行进行编辑         var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {            clicksToEdit: 1        });        var YxrzAddStore=Ext.create('Ext.data.Store',{            storeId:'YxrzAddStore',            model: 'yxrz',            data:[],            autoLoad: true        });        var YxrzAddGrid=Ext.create('Ext.grid.Panel',{            id:'YxrzAddGrid',            columnLines:true,            height:200,            store: Ext.data.StoreManager.lookup('YxrzAddStore'),            /*plugins: [rowEditing],*/            plugins: [cellEditing],            tbar:[{                    xtype : "button",                    text : "添加",                    iconCls : "Add",                    handler : function() {                            var r = Ext.create('yxrz', {                                content: '',                                point: '',                                type: '',                                active: true                    });                    YxrzAddStore.insert(YxrzAddGrid.getStore().getCount(), r);                    YxrzAddGrid.getView().focusRow(YxrzAddGrid.getStore().getCount()-1);    //               rowEditing.startEdit(0, 0);                        }                    },{                        xtype:"button",                        text:'删除',                        iconCls:'Delete',                        handler:function(){                            var sm = YxrzAddGrid.getSelectionModel();    //                      rowEditing.cancelEdit();                            YxrzAddStore.remove(sm.getSelection());                            if (YxrzAddStore.getCount() > 0) {                            sm.select(0);                    }                        }                    }],            columns : [{                        text : '内容',                        flex:1,                        dataIndex : 'content',                        editor: {                                }                    }, {                        text : '<div style="text-align:center">测点</div>',                        width:90,                        dataIndex : 'point',                        editor: {                                }                    }, {                        text : '<div style="text-align:center">输入类型</div>',                        width : 90,                        align : 'center',                        titleAlign : "center",                        dataIndex : 'type',                        editor: {                            xtype:'combobox'                                }                    }]        })        Ext.create('Ext.Button',{            text: '点击弹窗',            renderTo: Ext.getBody(),            handler: function() {            Ext.getCmp("addYxrzWin").show();        }        });        //弹出        Ext.create('widget.window',{            title : '新建运行日志',            closable:false,            id:'addYxrzWin',            width : 500,            height : 350,            bodyPadding :10,            bodyStyle : "background:#ffffff",            modal : true,            resizable:false,            bbar:['->',{            xtype:'button',            text:'保存',            iconCls:'Disk',            handler:function(){                submitForm();            }            },{            xtype:'button',            text:'取消',            iconCls:'Cancel',            handler:function(){                Ext.getCmp("addYxrzWin").close();            }}],            items:[{                xtype : "form",                id : "addYxrzForm",                border:0,                items:[{                xtype: 'container',                anchor: '100%',                layout: 'hbox',                items:[{                    xtype: 'container',                    flex: 1,                    layout: 'anchor',                    items: [{                        xtype:'combobox',                        fieldLabel: '日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;志',                        labelWidth: 60,                        allowBlank: false,                        name: 'journal',                        anchor:'95%'                        }, {                        xtype:'datefield',                        fieldLabel: '开始时间',                        labelWidth: 60,                        name: 'bdate',                        format:'Y-m-d',                        anchor:'95%'                        }]                    },{                    xtype: 'container',                    flex: 1,                    layout: 'anchor',                    items: [{                        xtype:'textfield',                        fieldLabel: '记事类型',                        labelWidth: 60,                        allowBlank: false,                        name: 'logType',                        anchor:'100%'                    },{                        xtype:'datefield',                        fieldLabel: '结束日期',                        labelWidth: 60,                        allowBlank: false,                        format:'Y-m-d',                        name: 'edate',                        anchor:'100%'                         }]                     }]                 },YxrzAddGrid]            }]        })     });     function submitForm(){        Ext.getCmp("addYxrzForm").getForm().submit({                url : '../edit/createNew1.action',  //提交地址                waitMsg : '数据在处理中,请稍后......',  //提交时的提示信息                waitTitle : '提示',                  params : {                                  //携带的参数                    "store":YxrzAddStore                },                   method : 'POST',                  success : function(form, options) {//成功后要做的事情              console.log(options);                      Ext.Msg.alert("success","表单提交成功！");                       Ext.getCmp("createWin").close();                                                  },                                                                                                                                 failure : function(form, options) {                }//失败要做的事情          })     }

2.还有一种实现表格编辑的方法 ,样式如下

这里写图片描述

使用的是RowEditing插件

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing',{            pluginId:'rowEditing',            saveBtnText: '保存',             cancelBtnText: "取消",             autoCancel: false,             clicksToEdit:2   });

在grid中定义插件同上.
完整代码就不贴了,基本同上

0 0