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
}
}
]
});
});
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
}
}
]
});
});