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

yfcaone

于 2017-03-19 20:09:03 发布

阅读量892

点赞数

CC 4.0 BY-SA版权

分类专栏： extjs

本文链接：https://blog.youkuaiyun.com/yfcaone/article/details/63688376

extjs 专栏收录该内容

6 篇文章

订阅专栏

本文是ExtJS4学习笔记的第四部分，主要探讨两种可编辑表格的实现方式。首先介绍了使用CellEditing插件的编辑表格，该插件默认在单元格双击时启动编辑，可通过设置clickToEdit属性改为单击编辑。然后，文章提到了RowEditing插件，同样用于表格编辑，其完整代码与CellEditing类似。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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中定义插件同上.
完整代码就不贴了,基本同上