`

extjs cellediting

阅读更多
1.项目使用extjs cellediting,使用后grid中的数据就是无法被修改,调了一上午加下午半小时终于知道问题所在:store中的api一定要有update项,且update指到的文件不能是数据原有文件。
store:
Ext.define('×××.store.×××',{
    extend:'Ext.data.Store',
    model:'×××.model.×××',
    autoLoad: true,
    autoSync: true,
    storeId: '×××',
    proxy:{
    	type:'ajax',
    	url:'data/×××.json',
    	api:{
    		read:'data/×××.json',
    		update:'data/×××Update.json',

    	},
    	reader:{
    		type:'json',
    		root:'×××',
    		successProperty:'success',
    		messageProperty:'message'
    	}
}

grid:
this.editing = Ext.create('Ext.grid.plugin.CellEditing', {
    		ptype:'cellediting',
        	clicksToEdit: 1,
        	autoCancel:false,
        	listeners:{
        		validateedit:{        			fn:this.000000000,
        			scope:this
        		}
        	}
    	});
Ext.apply(this,{
plugins:[this.editing],
……
});

000000000: function(editor, e, options) {
    	console.debug(" cell edit listener ");
        console.log(editor);
        console.log(e);
        console.log("e.value:"+e.value);
        console.log("options:"+options);
    }


2.extjs中和 Date相关的小问题
如果想要只允许用户选择今天之后的日期,只需设置:
minValue: new Date(),

设置在grid中显示的日期格式:
renderer: Ext.util.Format.dateRenderer('Y-m-d'),

示例代码如下:
{
    header: 'Deadline',
    dataIndex: 'deadline',
    flex:1,
    minWidth:100,
    renderer: Ext.util.Format.dateRenderer('Y-m-d'),
    field: {
         xtype: 'datefield',
         allowBlank: false,
         format: 'Y-m-d', //选择日期时显示的日期格式
         renderer: this.formatDate,
         minValue: new Date(),
         value:this.formatDate(value)
    }
分享到:
评论

相关推荐

    extjs模拟excel表格

    3. **可编辑性**:通过使用CellEditing或RowEditing插件,我们可以实现单元格级别的编辑功能。用户点击单元格时,会弹出一个输入框,编辑完成后自动保存更改。 4. **公式支持**:虽然ExtJS本身不直接支持Excel公式...

    Extjs4 grid使用例子

    ExtJS4提供了多种编辑模式,如CellEditing、RowEditing等。增删改操作通常通过Controller来处理,Controller监听编辑事件,调用Store的方法进行数据的添加、删除或修改,并同步到服务器。 6. **MVCTest**: "MVC...

    extjs模仿excel效果

    综上所述,通过利用ExtJS的GridPanel、Store、CellEditing插件以及自定义的JavaScript逻辑,我们可以构建出一个类似于Excel的交互式表格。尽管它无法完全替代Excel的强大功能,但对于Web应用程序来说,这样的实现...

    Extjs动态GRID

    通过设置`editable`属性或者使用`cellEditing`插件,可以在Grid的单元格内直接编辑数据。同时,Grid也可以和FormPanel结合,用于数据的输入和验证。 4. 自适应布局: EXTJS Grid的列宽度可以设置为自动或固定,也...

    Extjs2.02 Gridpanel

    - **可编辑性**:通过`cellEditing`插件,我们可以实现单元格级别的编辑。 - **分页**:配合`pagingToolbar`,GridPanel支持本地或远程分页。 - **过滤和搜索**:通过`filter`配置,用户可以对数据进行过滤。 - **列...

    ExtJS ToolTip功能

    ### ExtJS ToolTip功能 #### 知识点详解 在ExtJS中,`ToolTip`功能是一种非常实用且灵活的功能,它允许用户在鼠标悬停在某个元素上时显示额外的信息。这种特性对于提高用户界面的可用性和用户体验尤其有用。本文将...

    ExtJS4 2学习 21 动态菜单与表格数据展示操作总结篇

    - 表格编辑:通过`Ext.grid.plugin.CellEditing`插件启用单元格编辑,用户可以直接在表格中修改数据。 - 分页:使用`Ext.toolbar.Paging`工具栏实现数据分页,提高数据加载效率。 - 表格排序:配置`sortInfo`属性或...

    Extjs4.2 Grid单元格编辑

    在EXTJS 4.2中,Grid组件是一个强大的数据展示工具,它允许用户与数据进行交互,例如排序、筛选和编辑。"Grid单元格编辑"是EXTJS 4.2中的一个重要特性,允许用户直接在表格的单元格内进行数据修改,提升了数据输入的...

    extjs 动态表格完整版

    `Ext.grid.plugin.RowEditing`和`Ext.grid.plugin.CellEditing`插件可以轻松启用这些功能。 6. **排序和过滤**:通过设置`sortable`属性,用户可以点击表头进行排序。使用`filters`配置可以为列添加过滤器,方便...

    ExtJS_可编辑Grid进度条

    1. 可编辑性:在ExtJS的Grid中,可编辑性是通过使用CellEditing或RowEditing插件来实现的。用户可以点击单元格直接修改数据,这些更改会实时反映到数据源中。为了创建一个可编辑的进度条列,我们需要自定义一个编辑...

    extjs grid示例代码

    - **编辑**:`Ext.grid.plugin.CellEditing`插件可以实现单元格级别的编辑。 - **行选择**:支持单选和多选,通过`selModel`配置。 - **自定义列渲染**:使用`renderer`函数对数据显示进行格式化。 - **工具栏**...

    extjs 列表基本操作

    EXTJS的列表提供了CellEditing插件,使得用户可以直接在单元格内进行编辑。通过创建一个GridPanel,并配置CellEditing插件,可以实现单元格的点击编辑。首先,需要在Grid的columns配置中定义可编辑的字段,然后在...

    Extjs 表格

    这通常通过使用`Ext.grid.plugin.CellEditing`插件实现,该插件允许在单击单元格时激活编辑模式。 9. **MHT文件** `extJs 常用到的增,删,改,查操作代码_extjs_脚本之家.mht`是一个单一网页档案(MHT)文件,...

    这是有关extjs的例子,里面有各种表单的定义,grid的实现

    此外,Grid还可以通过添加插件(如`Ext.grid.plugin.CellEditing`)来实现单元格级别的编辑,或者通过`Ext.grid.plugin.DragDrop`实现拖放功能,以增强用户体验。 在给定的"aspx_examples"压缩包中,可能包含了使用...

    ExtJS 使用grid显示数据

    7. **编辑功能**:如果需要在Grid中编辑数据,可以使用CellEditing或RowEditing插件,实现单击单元格或整行编辑。 8. **分页**:通过配置store的proxy和paging属性,可以实现数据的分页加载,`Ext.toolbar.Paging`...

    ExtJs5学生列表前台

    ExtJs5是一款强大的JavaScript前端框架,用于构建交互式的、数据驱动的Web应用程序。在这个"ExtJs5学生列表前台"项目中,我们主要关注的是如何利用ExtJs5来创建一个能够实时联动显示学生名称和详细信息的用户界面。...

    Extjs4---grid的修改、删除功能---结合struts2、hibernate

    ExtJS 4 Grid支持行编辑,通过添加CellEditing插件,我们可以对选中的单元格进行编辑。 ```javascript // 添加CellEditing插件 grid.addDocked({ xtype: 'toolbar', dock: 'top', items: [{ text: 'Edit', ...

    ExtJs实现EditGrid中的增删改查操作(2)

    在本文中,我们将深入探讨如何使用ExtJS框架实现EditGrid中的增删改查操作。ExtJS是一个强大的JavaScript库,主要用于构建富客户端Web应用程序。EditGrid是ExtJS中用于展示和编辑表格数据的一种组件,它提供了丰富的...

    EXTJS_.7z文件上传

    5. **可编辑的Grid**:EXTJS的Grid组件可以实现数据的展示和编辑,其中的“可编辑的grid”可能涉及使用`Ext.grid.plugin.CellEditing`插件,允许用户直接在单元格内编辑数据。 6. **EXTJS4文件上传**:EXTJS4版本的...

    extjs4.0 grid

    同时,可以使用`CellEditing`插件来提供更友好的用户界面。当用户在某个单元格上双击时,会触发编辑模式,编辑完成后保存更改。 3. **删除数据**: 删除数据通常是通过选择特定行,然后调用`store.remove()`方法来...

Global site tag (gtag.js) - Google Analytics