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

yfcaone

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

阅读量827

点赞数

分类专栏： extjs

本文链接：https://blog.csdn.net/yfcaone/article/details/63688376

版权

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

摘要由CSDN通过智能技术生成

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"