`

Extjs Grid列编辑器为日期组件时选定日期后值渲染到grid列时格式错误的问题

 
阅读更多

grid列编辑中,编辑器为datefield,而且datefield中的format属性为'Y-m-d',日期选择后是按照格式化的要求显示,如:

 当焦点脱离这个编辑器,也就是列渲染datefield的值时,它会变成中国标准日期,而不是datefield中所指定的日期格式,如图

 思路:原因可能是因为datefield的格式化只是改变了显示的日期,并没有改变实值,以至于在列渲染datefield的值时,无法按格式显示。

解决方案1:(未实践)

绑定datefield的编辑后事件,在选中后将datefield组件值手动设置为格式化后的数据

解决方案2:(实践成功)

官网实例的一个思路就是在列渲染时拦截参数,然后制定一个渲染器。

具体方法为在grid的列渲染配置项 renderer中定义配置项:Ext.util.Format.dateRenderer('Y-m-d')

 

  • 大小: 18.6 KB
  • 大小: 21.2 KB
分享到:
评论

相关推荐

    ExtJS_可编辑Grid进度条

    2. 定义Grid的列模型(ColumnModel),其中一列使用自定义的进度条编辑器。 3. 实现编辑器组件,可能是一个小的Ext.Panel,包含一个可编辑的输入框和一个嵌入的Ext.ProgressBar。 4. 编写单元格渲染器,根据数据值...

    Extjs4 grid使用例子

    在给定的"Extjs4 grid使用例子"中,我们可以深入理解如何在MVC架构下有效地利用ExtJS4的Grid组件。Grid组件是ExtJS中的核心部分,它提供了一个灵活的、可定制的数据展示网格,通常用于显示和操作大量数据。 1. **...

    Extjs Grid 扩展实例

    对于ExtJS Grid,我们可能要扩展其基础配置,比如自定义列、行渲染器、编辑器,甚至是行为事件处理。 1. **自定义列**:在Grid中,我们可以定义自己的Column模型,添加额外的字段或调整默认的行为。例如,我们可以...

    extjs表格Grid比较全面的功能

    ExtJS Grid提供行编辑器插件,使得用户可以直接在表格中编辑单元格。同时,可以将Grid与表单组件结合,创建复杂的数据输入界面。 7. **选择模式(Selection Models)** Grid有多种选择模式,如单选、多选和行选择...

    ExtJs6.5Grid列表导出(包含样式)

    以上是实现ExtJs 6.5 Grid列表导出的基本流程,需要注意的是,这个过程可能需要根据具体的应用场景进行调整,例如处理复杂的数据格式、自定义渲染器、分页等。在实际开发中,可以封装成一个通用的Grid导出组件,以供...

    ExtJS 使用grid显示数据

    5. **渲染器(Renderer)**:自定义单元格内容的显示方式,通过配置column的renderer函数,可以格式化数据显示,如日期、货币等。 6. **事件监听**:Grid支持多种用户交互事件,如itemclick、celledit等,可以绑定...

    Extjs tree and Grid(Buffer Grid,Progress Grid)

    - 配置Buffer Grid通常涉及到设置`buffered`属性为`true`,并可能需要调整`scrollDelta`属性来控制加载更多数据的触发点。 4. **Progress Grid** - 进度网格(Progress Grid)是在Grid的基础上增加了显示进度条...

    实现extjs4 的树、grid、form、query等大部分组件的功能

    EXTJS4中的网格可以配合各种插件,如行编辑、列拖动、导出Excel等,以满足不同需求。数据与网格通过store进行绑定,可以通过proxy设置数据源,如Ajax或内存数据。 表单(Form)组件是EXTJS用于收集和展示用户输入的...

    Extjs4.0 列隐藏和滚动条动态加载

    列可以设置各种样式、对齐方式、宽度,并可以添加自定义的编辑器和渲染器。 4. **列模型(Column Model)** 列模型定义了Grid Panel的列结构和行为。在ExtJS 4.0中,列模型通过`Ext.grid.header.Container`和`Ext....

    ASP.NET结合EXTJS动态生成Grid列表的例子程序源码

    5. **渲染Grid**:在页面加载完成后,使用EXTJS的`Ext.onReady`函数来初始化Grid,确保所有DOM元素已加载。这通常包括实例化Grid面板并将其添加到页面布局中。 6. **数据绑定和交互**:EXTJS Grid会自动向ASP.NET...

    Extjs复习笔记(二十)-- tree和grid结合

    4. 自定义UX组件:可能需要自定义EXTJS的扩展(Extension或UX组件),以便在Tree节点和Grid之间建立关联,并处理数据的传递和渲染。 5. 数据同步:确保当在Grid中进行操作(如编辑、添加、删除)时,这些变化能同步...

    EXTJS 4 树形表格组件使用示例

    3. **列配置**:树形表格组件允许自定义列,每列可以有自己的渲染器、编辑器和排序功能。你可以根据需要调整列宽、添加头像、显示复选框等。 4. **操作行为**:用户可以对节点进行展开、折叠、选择、拖放等操作。...

    ExtJS之Grid

    其中,`Ext.grid.Panel`是ExtJS中的核心组件之一,用于展示表格数据,并支持排序、分组以及编辑等功能。 #### 二、基本GridPanel 在创建一个简单的`Ext.grid.Panel`时,我们需要关注以下几个关键点: 1. **定义...

    extjs3.0 组件

    EXTJS 3.0 的网格组件提供了强大的功能,如行选择、列重排、自定义列渲染等,使得数据展示和操作变得更加灵活多样。 除了以上组件,EXTJS 3.0 还包含了许多其他组件,如工具栏(Toolbar)、按钮(Button)、提示框...

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

    Grid可以包含多个列,每列都有自定义的头部和数据渲染器。通过数据源(如`Ext.data.Store`)与Grid进行绑定,可以实现数据的动态加载、排序、筛选和编辑。Grid中的行可以通过`Ext.grid.RowModel`进行操作,而列则...

    ExtJS 4.0 改善Ext.grid.plugin.RowEditing (重构,v1.4版本,2011-09-11)

    这可能涉及到对DOM操作的优化,减少了不必要的渲染,从而提高了响应速度,特别是在处理大量数据时。 2. **用户交互**:重构后的插件增强了用户交互体验。例如,现在用户可以通过单击或Tab键轻松地在单元格之间切换...

    grid表格 简单demo

    5. **Renderers**: 渲染器用于将数据转换为适合显示的格式。例如,日期字段可以使用日期渲染器,货币字段可以使用货币格式渲染器。 6. **Sorting and Filtering**: Grid支持对列进行升序和降序排序,也可以通过内置...

    ExtJs GridPanel双击事件获得双击的行

    在ExtJs中,GridPanel是用于展示数据的常用组件,它可以提供丰富的功能,如排序、分页、筛选等。在实际应用中,我们经常需要监听用户的交互行为,比如双击行进行进一步的操作。本篇文章将深入讲解如何在ExtJs ...

Global site tag (gtag.js) - Google Analytics