Grid行编辑插件
//操作列不显示应该就是autoLoad的问题。
Ext.onReady(function () {
Ext.BLANK_IMAGE_URL = "Extjs/resources/themes/images/access/tree/s.gif";
var datas = [
[100, '刘一', 1000, new Date(1990, 05, 07)],
[200, '黄小珠', 2089, new Date(1994, 10, 07)],
[300, '王五', 2900, new Date(1990, 11, 17)]
];
Ext.create('Ext.grid.Panel', {
title: '行编辑插件',
renderTo: Ext.getBody(),
width: 500,
height: 400,
// frame: true,
layout: 'fit',
viewConfig: {
forceFit: true,
//stripRows: true
},
store: {
fields: ['id', 'name', 'salary', 'birthday'],
proxy: {
type: 'memory',
data: datas,
reader: 'array'
},
autoLoad: true
},
plugins: [Ext.create(Ext.grid.plugin.RowEditing, { clicksToEdit: 1 })],//clicksToEdit设置单击鼠标一次开始编辑
columns: [
{ xtype: 'rownumberer', text: '行号', width: 30 },
{ header: 'id', width: 30, dataIndex: 'id', sortable: true },
{
header: '姓名', width: 80, dataIndex: 'name', sortable: true,//默认的就是文本列把,没什么特殊性,就是输入文本
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
header: '薪水', width: 80, dataIndex: 'salary', sortable: true, format: '0,000',//数字列才有的格式化输出配置
xtype: 'numbercolumn',
editor: {
xtype: 'numberfield',
allowBlank: false
}
},
{
header: '生日', width: 80, dataIndex: 'birthday', sortable: true, xtype: 'datecolumn',
format: 'Y年m月d日',//日期列才有的格式化输出配置
editor: {
xtype: 'datefield',
allowBlank: false
}
}
]
});
});
Grid行编辑插件的更多相关文章
- ligerui grid行编辑示例
<%@ page contentType="text/html; charset=UTF-8" %> <% String path = request.getCo ...
- EXTJS 4.2 资料 控件之Grid 行编辑绑定下拉框,并点一次触发一次事件
主要代码: { header: '属性值', dataIndex: 'PropertyValueName', width: 130, editor: new Ext.form.field.ComboB ...
- EXTJS4.0 grid 可编辑模式 配置
首先配置这个参数 plugins:[//插件 Ext.create("Ext.grid.plugin.CellEditing",{ clicksToEdit:1//单元格 点一下就 ...
- 关于EasyUI DataGrid行编辑时嵌入时间控件
本人做一个名为“安徽中控”项目时,为快速开发基础数据增删改模块,遂采用EasyUIDatagrid将所有增删改查的操作都集中于表格中,并且所有增删改查操作都集中于泛型对象,从而不必为每个表写具体的增删 ...
- JS框架avalon简单例子 行编辑 添加 修改 删除 验证
为什么要写这个例子:做表单的时候,表单包含主子表,对于子表的编辑,使用的是easyui datagrid的行编辑功能,由于业务比较复杂,实现起来比较麻烦,代码写的也很多,因为插件的封装,无法操作原始的 ...
- jqgrid 使用自带的行编辑
上篇jqgrid 单击行启用行编辑,切换行保存原编辑行 本篇,说说使用jqgrid自带的行编辑 1)设置需要编辑的列 editable: true colModel: [ { label: '字段编 ...
- jquery编辑插件tinyMCE的使用方法
jquery编辑插件tinyMCE是一个非常容易集成到您系统的一个html编辑插件,它不像FckEditor那样需要针对专门的后台语言集成,tinyMCE既能做到轻松集成asp.net,php,jav ...
- jqGrid行编辑配置,方法,事件
行编辑可以在行修改后更新数据,如下图所示 用户用鼠标点击选择一行,jqGrid将可编辑的字段转换为数据输入单元,如上面图所示.不可编辑的列,如id,不会转为可输入单元,而是保持不变.可以通过配置col ...
- Kendo UI Grid 批量编辑使用总结
项目中使用Kendo UI Grid控件实现批量编辑,现在将用到的功能总结一下. 批量编辑基本设置 Kendo Grid的设置方法如下: $("#grid").kendoGrid( ...
随机推荐
- 十天学会单片机Day4串行口通信
并行与串行基本通信方式 1.并行通信方式 通常是将数据字节的各位用多条数据线同时进行传送. 并行通信控制简单.传输速度快:由于传输线较多,长距离传送时成本高且接收方的各位同时接收存在困难. 2.串行通 ...
- throw和throws
uncheckException的处理 class User{ private int age; public void setAge(int age){ if(age < 0){ //生成异常 ...
- C 封装一个简单二叉树基库
引文 今天分享一个喜欢佩服的伟人,应该算人类文明极大突破者.收藏过一张纸币类型如下 那我们继续科普一段关于他的简介 '高斯有些孤傲,但令人惊奇的是,他春风得意地度过了中产阶级的一生,而 没有遭受到冷 ...
- 动态切换采用 CSplitterWnd 静态划分的视图布局(MFC)
标题读起来有些拗口,具体是什么情况,我们来看: 一.问题的提出 一个采用MFC开发的软件,其窗体视图采用CSplitterWnd三分,效果如下图所示: 图1 软件的默认视图布局 该MFC开发的软件功能 ...
- hdu 1047 Integer Inquiry
题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1047 Integer Inquiry Description One of the first use ...
- golang的{}初始化
之前说到Golang中某些类型可以赋值nil, 某些类型不能赋值nil. 不能赋值nil都是initialized value不为nil的类型, 例如: bool int, intN uint, ui ...
- CocoaPods 教程 转载
CocoaPods安装和使用教程 Code4App 原创文章.转载请注明出处:http://code4app.com/article/cocoapods-install-usage 目录 CocoaP ...
- ExtJS 提示
要使ExtJS支持提示,需要在onReady的function中添加如下语句: Ext.QuickTips.init();//支持tips提示 Ext.form.Field.prototype.msg ...
- ALTERA MAX10官方评估板,新鲜出炉!
刚刚拿到骏龙提供的ALTERA MAX10官方评估板,还热乎呢,呵呵!赶紧跟大家分享一下 板子很简单,把IO口都扩展出来了,其他功能基本上没有. FPGA型号是10M08SAE144C8GES,144 ...
- 谈谈C#中的 Dispose 和 Finalize
主要有一下几点需要知道: 1. Dispose需要实现IDisposable接口. Finalize就是c#中的析构方法,方法名以~开始. 2. Dispose由开发人员代码调用,而Finalize由 ...