1、Ext.grid.EditorGridPanel
主要配置項:
clicksToEdit:設定點選單元格進入編輯模式的點選次數,預設為2
autoEncode:是否自動編碼/解碼HTML内容,預設為false
selModel:預設為Ext.grid.CellSelectionModel
主要方法:
startEditing( Number rowIndex, Number colIndex ):開始編輯指定單元格
stopEditing( [Boolean cancel] ):結束編輯操作
2、範例源碼
var datas = [[1,"張三",24,"男",new Date(1986,06,09)], [2,"李四",30,"女",new Date(1980,09,13)], [3,"王五",28,"男",new Date(1982,01,10)]];
var person = Ext.data.Record.create([
{name: "personId", mapping: 0},
{name: "personName", mapping: 1},
{name: "personAge", mapping: 2},
{name: "personGender", mapping: 3},
{name: "personBirth", mapping: 4}
]);
//複選框選擇模式
var checkboxSM = new Ext.grid.CheckboxSelectionModel({
checkOnly: false,
singleSelect: false
});
var cellSM = new Ext.grid.CellSelectionModel();
var grid = new Ext.grid.EditorGridPanel({
title: "EditorGridPanel執行個體",
renderTo: "div1",
width: 500,
height: 300,
frame: true,
tbar: [
{
text: "儲存",
iconCls: "save",
handler: function(){
}
},
{
text: "重新整理",
iconCls: "refresh",
handler: function(){
}
}
],
store: new Ext.data.Store({
reader: new Ext.data.ArrayReader({id:0}, person),
data: datas
}),
columns: [
checkboxSM,
{
id:"personId",
header:"編号",
width:50,
dataIndex:"personId"
},
{
id:"personName",
header:"姓名",
width:70,
dataIndex:"personName",
editor:new Ext.form.TextField({
allowBlank:false
})
},
{
id:"personAge",
header:"年齡",
width:45,
dataIndex:"personAge",
editor:new Ext.form.NumberField()
},
{
id:"personGender",
header:"性别",
width:45,
dataIndex:"personGender",
editor: new Ext.form.ComboBox({
editable: false,
displayField: "sex",
mode: "local",
triggerAction: "all",
store: new Ext.data.SimpleStore({
fields: ["sex"],
data: [["男"], ["女"]]
})
})
},
{
id:"personBirth",
header:"出生日期",
width:120,
dataIndex:"personBirth",
renderer:Ext.util.Format.dateRenderer("Y年m月d日"),
editor:new Ext.form.DateField({
format: "Y-m-d"
})
}
],
autoExpandColumn: "personBirth",
stripeRows: true,
sm: checkboxSM
});
