可编辑表格：Ext.grid.EditorGridPanel

1、Ext.grid.EditorGridPanel
主要配置项：

            clicksToEdit：设置点击单元格进入编辑模式的点击次数，默认为2
autoEncode：是否自动编码/解码HTML内容，默认为false
selModel：默认为Ext.grid.CellSelectionModel

主要方法：
startEditing( Number rowIndex, Number colIndex )：开始编辑指定单元格
stopEditing( [Boolean cancel] )：结束编辑操作

 

 

2、范例源码

1. var datas = [[1,"张三",24,"男",new Date(1986,06,09)], [2,"李四",30,"女",new Date(1980,09,13)], [3,"王五",28,"男",new Date(1982,01,10)]];  
2.               
3. var person = Ext.data.Record.create([  
4.     {name: "personId", mapping: 0},  
5.     {name: "personName", mapping: 1},  
6.     {name: "personAge", mapping: 2},  
7.     {name: "personGender", mapping: 3},  
8.     {name: "personBirth", mapping: 4}  
9. ]);  
10.   
11. //复选框选择模式  
12. var checkboxSM = new Ext.grid.CheckboxSelectionModel({  
13.     checkOnly: false,  
14.     singleSelect: false  
15. });  
16.   
17. var cellSM = new Ext.grid.CellSelectionModel();  
18.   
19. var grid = new Ext.grid.EditorGridPanel({  
20.     title: "EditorGridPanel实例",  
21.     renderTo: "div1",  
22.     width: 500,  
23.     height: 300,  
24.     frame: true,  
25.     tbar: [  
26.         {  
27.             text: "保存",  
28.             iconCls: "save",  
29.             handler: function(){  
30.                   
31.             }  
32.         },  
33.         {  
34.             text: "刷新",  
35.             iconCls: "refresh",  
36.             handler: function(){  
37.                   
38.             }  
39.         }  
40.     ],  
41.     store: new Ext.data.Store({  
42.         reader: new Ext.data.ArrayReader({id:0}, person),  
43.         data: datas  
44.     }),  
45.     columns: [  
46.         checkboxSM,  
47.         {  
48.             id:"personId",   
49.             header:"编号",   
50.             width:50,   
51.             dataIndex:"personId"  
52.         },  
53.         {  
54.             id:"personName",   
55.             header:"姓名",   
56.             width:70,   
57.             dataIndex:"personName",   
58.             editor:new Ext.form.TextField({  
59.                 allowBlank:false  
60.             })  
61.         },  
62.         {  
63.             id:"personAge",   
64.             header:"年龄",   
65.             width:45,   
66.             dataIndex:"personAge",   
67.             editor:new Ext.form.NumberField()  
68.         },  
69.         {  
70.             id:"personGender",   
71.             header:"性别",   
72.             width:45,   
73.             dataIndex:"personGender",   
74.             editor: new Ext.form.ComboBox({  
75.                 editable: false,  
76.                 displayField: "sex",  
77.                 mode: "local",  
78.                 triggerAction: "all",  
79.                 store: new Ext.data.SimpleStore({  
80.                     fields: ["sex"],  
81.                     data: [["男"], ["女"]]  
82.                 })  
83.             })  
84.         },  
85.         {  
86.             id:"personBirth",   
87.             header:"出生日期",   
88.             width:120,   
89.             dataIndex:"personBirth",   
90.             renderer:Ext.util.Format.dateRenderer("Y年m月d日"),   
91.             editor:new Ext.form.DateField({  
92.                 format: "Y-m-d"  
93.             })  
94.         }  
95.     ],  
96.     autoExpandColumn: "personBirth",  
97.     stripeRows: true,  
98.     sm: checkboxSM  
99. });