`
literary_fly
  • 浏览: 92624 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

Extjs EditorGrid 可编辑表格控件

EXT 
阅读更多
定义Ext.grid.ColumnModel时,列的信息项editor设置为new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}));就指定单元格编辑采用文本域。


默认情况下,需要双击单元格才能激活编辑器,从而进行修改。当给Grid配置上clicksToEdit:1时,就可以通过单击单元格激活编辑器,从而进行修改。


------------------------------

添加一行数据。


定义记录类:var MyRecord = Ext.data.Record.create([...]);


创建记录实例:var record = new MyRecord({...});


MyRecord.getField(name)得到记录中name列的字段信息。


record.get(name)和p.data.name可以得到字段的值。


record.set(name,value)可以设置记录中某指定字段的值。


record.dirty可以判断当前记录是否有字段的值被更新过。


新建MyRecord的一个实例insRec,每个字段赋值空;关闭表格的编辑状态;将insRec插入到store的第一行;激活第1行第1列的编辑状态。


------------------------------

删除一行数据。


将选择的record从store移除掉。store.remove(record);


-----------------------------

保存修改结果。


var m = store.modified.slice(0);返回从0行开始的所有编辑过的记录组成的数组。


var jsonArray = [];

Ext.each(m,function(item){jsonArray.push(item.data);});

将每条记录的数据存放在jsonArray数组中。


store的参数pruneModifiedRecords设置为true时,每次进行remove或load操作时store会自动清除modified标记。


-----------------------------

验证EditorGrid中的数据。


if(!editor.validatue(value)){...}


----------------------------

限制输入数据。


new Ext.grid.GridEditor(new Ext.form.NumberField({

allowBlank:false,

allowNegative:false,

maxValue:10

}))


----------------------------

EditorGrid里的ComboBox总是无法正常显示数据的情况。因为少了renderer方法。


renderer: function(value){

return comboData[value][1];

}


日期控件。


renderer: function(value){

return value.format("Y-m-d");

}


复选框,是/否。


renderer: function(value){

return value ? "是" : "否"

}



嘿嘿,留着,有用的~~

分享到:
评论

相关推荐

    extjs 可编辑的表格树 Ext.tree.ColumnTree Ext.tree.ColumnTreeEditor

    extjs 可编辑的表格树,每个单元格自定义编辑组件,可以自适应列宽,只有源码与例子,运行实例要修改路径,不然图片不能显示,注意etree.jsp的js引入路径 支持Ext2.x以上版本 如运行不了EmailTo : codeme9@gmail....

    Extjs中可编辑表格,树,触发按钮和复选框的结合使用

    NULL 博文链接:https://zyjustin9.iteye.com/blog/2121799

    extjs5.1多文件上传控件

    标题中的“ExtJS5.1多文件上传控件”指的是在Web应用中使用ExtJS框架的一个功能组件,它允许用户一次选择并上传多个文件。ExtJS是一个强大的JavaScript库,专门用于构建富客户端的桌面级Web应用程序。在版本5.1中,...

    extjs3.2、3.3 时间控件 日期控件扩展

    在3.2和3.3版本中,ExtJS的时间控件(DateTimeField)和日期控件(DateField)是开发者常用的功能组件,用于处理用户输入的日期和时间数据。这些控件具有高度可定制性,可以满足各种界面和功能需求。 1. **时间控件...

    EXTJS5 日期时分秒控件

    EXTJS5 日期时分秒控件,直接引用到程序中使用。网上有很多extjs4版本的和EXTJS5不兼容。调用实例代码: {labelWidth:60,width: 220,name:'mydate',fieldLabel: '日期',allowBlank: false,xtype: 'datetimefield',...

    ExtJs:收集基于ExtJs扩展的一些控件

    本压缩包文件中收集了基于ExtJs扩展的一些控件,这些控件能够进一步增强应用程序的功能和用户体验。 首先,我们来看看“ExtJs:收集基于ExtJs扩展的一些控件”。这个文件可能是对一些自定义或第三方开发的ExtJs控件...

    Extjs6 日期时间控件

    在EXTJS6中,日期时间控件是一种强大的用户界面组件,它将传统的日期选择器与时间选择器结合在一起,提供了一种便捷的方式来输入和编辑日期和时间数据。这个控件在许多应用程序中都非常实用,特别是在那些需要精确...

    EXTJS时间控件年月日时分秒

    在EXTJS中,时间控件是常见的交互元素,允许用户选择特定的时间,包括年、月、日、时、分和秒。这篇文档将深入探讨EXTJS中的时间控件及其使用方法。 首先,EXTJS时间控件的设计理念是为了提供用户友好的时间选择...

    Extjs 5 日期时间控件

    总之,ExtJS 5 的日期时间控件提供了一种方便、直观的方式来处理日期和时间输入,具有高度可配置性和可扩展性。它通过结合日期和时间选择器,满足了开发者对日期时间组件的需求,并且通过丰富的配置选项和事件处理...

    ExtJS_可编辑Grid进度条

    Grid在ExtJS中是一个表格视图,用于展示结构化数据,并支持多种交互操作,如排序、分页、过滤和编辑。在这个特定的应用场景中,我们关注的是“可编辑”和“进度条”这两个特性。 1. 可编辑性:在ExtJS的Grid中,可...

    ExtJs3.4 扩展的Tags控件

    在本主题中,我们关注的是ExtJs3.4版本中的一个扩展——Tags控件。这个控件允许用户在界面上以标签的形式输入和展示数据,常见于关键词选择或者多值输入的场景。 `Tags控件`是基于`DataView`组件进行扩展的。`...

    EXTjs4.0以下合并表格

    在EXTjs 4.0以下的版本中,开发人员可能会遇到合并表格单元格的需求,这在展示复杂数据或者组织信息时非常有用。EXTjs提供了强大的表格网格组件(GridPanel),允许自定义布局和样式,包括单元格的合并。 在EXTjs中...

    extjs日期+时间控件

    在ExtJS中,日期和时间控件是非常常用的功能,尤其在处理数据输入和展示时。本文将深入探讨基于ExtJS 4.1版本的日期时间控件及其相关知识点。 1. **ExtJS 4.1**:这是ExtJS的一个主要版本,发布于2012年,提供了...

    extjs时间控件精确秒

    在EXTJS这个强大的JavaScript框架中,时间控件是开发者经常使用的组件之一,尤其在构建复杂的Web应用程序时。EXTJS的时间控件允许用户选择或输入时间,通常以小时、分钟和秒为单位,提供了用户友好的界面和丰富的...

    extjs 年份控件和年月控件(使用看软件说明)

    修改extjs控件,支持只选择年月,或者只选择年。 只要设置format:“Y-m”,"Y"即可。 xtype:'monthfield' 因为extjs的bug(3月30如果选择2月将自动变成3月)。所以需要修改monthField中safeParse方法: else if ("Y-m...

    extjs3.0 日期时间控件

    标题中的"extjs3.0 日期时间控件"指的是ExtJS 3.0框架中的DateTimeField组件,这是一个组合了日期选择器和时间选择器的控件,允许用户以交互的方式选择精确的日期和时间。这个控件通常用于表单中,提供了一种直观且...

    extjs扩展年度控件,EXTJS里的时间控件的年度重写

    EXTJS是一种广泛应用于Web...通过这样的定制,我们可以为用户提供更符合业务需求的时间选择体验,同时也展示了EXTJS强大的可扩展性和灵活性。在实践中,开发者需要具备EXTJS的基本知识,以及一定的前端开发和设计能力。

    extjs6 日期时间控件

    extjs 6 的日期时间控件,不能用我铲脸

Global site tag (gtag.js) - Google Analytics