ext Grid（三）

想让用户体验更高就应该让用户可以在自己刚刚查询出来的数据表格上进行数据编辑，可以进行增删改查。可编辑的表格就在在想要能编辑的列里注册一个TextField组件，这个组件需要使用Ext.grid.GridEditor类来封装。

 

 

第一个可编辑表格

[javascript] view plaincopy

1. cm = new Ext.grid.ColumnModel([  
2. new Ext.grid.RowNumberer(),  
3.  {header:'产品编号',dataIndex:'product_id'},  
4.  {header:'产品名称',dataIndex:'product_name',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},  
5.  {header:'产品价格',dataIndex:'product_price',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))}  
6. ]);  

       使用了可编辑的对象就需要建立一个Ext.grid.EditorGridPanel来代替Ext.grid.GridPanel。

[javascript] view plaincopy

1. gridPanel = new Ext.grid.EditorGridPanel({  
2.   autoHeight: true,  
3.   renderTo: 'grid',      
4.   store: store,  
5.   cm: cm,  
6. });   

      这时默认的是双击编辑，如果想设置成单击编辑的话就需要做如下改动。

[javascript] view plaincopy

1. gridPanel = new Ext.grid.EditorGridPanel({  
2.   autoHeight: true,  
3.   renderTo: 'grid',          
4.   store: store,  
5.   //值为1的时候就是单击，2就是双击。  
6.   clicksToEdit:1,  
7.   cm: cm,  
8.   sm:mm  
9. });   

 

向表格中添加新行和删除一行

       添加新的一行是使用Store类的insert方法插入一个新的Ext.data.Record对象，删除用的是remove方法,为了使插入的新行所有列都能编辑，我们要把所有列都设为可编辑。

[javascript] view plaincopy

1. cm = new Ext.grid.ColumnModel([  
2.   new Ext.grid.RowNumberer(),  
3.   mm,  
4.   {header:'产品编号',dataIndex:'product_id',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},  
5.   {header:'产品名称',dataIndex:'product_name',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},  
6.   {header:'产品价格',dataIndex:'product_price',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))}  
7. ]);  

      将所想要编辑的列添加Ext.grid.GridEditor对象就能是该列可编辑,接着我们要在表格组件的上方添加两个按键，分别是增加和删除。代码如下：

[javascript] view plaincopy

1. var gridPanel = new Ext.grid.EditorGridPanel({    
2.        autoHeight: true,      
3.        renderTo: 'grid',      
4.        store: store,      
5.        cm: cm,    
6.        tbar: new Ext.Toolbar(['-', {      
7.            text: '添加一行',      
8.            handler: function(){   
9.                var record = new Ext.data.Record({     
10.                 product_id:'',  
11.                 product_name:'',  
12.                 product_price:''  
13.                });  
14.                gridPanel.stopEditing();                  
15.                store.insert(store.getCount(),record);  
16.                gridPanel.startEditing(store.getCount()-1,0);  
17.            }  
18.        }, '-', {  
19.            text: '删除一行',  
20.            handler: function(){  
21.                Ext.Msg.confirm('信息', '是否删除当前记录？', function(btn){  
22.                    if (btn == 'yes') {  
23.                        var sm = gridPanel.getSelectionModel();  
24.                        var cell = sm.getSelectedCell();  
25.                        var record = store.getAt(cell[0]);  
26.                        store.remove(record);  
27.                    }  
28.                });    
29.            }      
30.        }, '-'])   
31.    });    

 

保存数据

      无论是添加或是修改了表格中的数据后，一般我们都要将结果提交到服务器，在ExtJS中Slice类就是干这个用的。

[javascript] view plaincopy

1. {  
2.            text: '保存',    
3.            handler: function(){   
4.                var m = store.modified.slice(0);   
5.                var data = [];     
6.                Ext.each(m, function(item) {   
7.                    data.push(item.data);      
8.                });    
9.                alert(Ext.encode(data));   
10.                Ext.lib.Ajax.request(      
11.                    'POST',    
12.                    'SaveData',    
13.                    {success: function(response){      
14.                        Ext.Msg.alert('信息', response.responseText, function(){     
15.                            store.reload();    
16.                        });    
17.                    }},    
18.                    'row=' + encodeURIComponent(Ext.encode(data))      
19.                );     
20.            }      
21. }  

 

对记录进行分组     

      此外ExtJS Grid还可以对数据进行分组，要建立一个按列分组的表格就要使用Ext.data.GroupingStore这个类。

[javascript] view plaincopy

1. var store = new Ext.data.GroupingStore({  
2.     reader: reader,  
3.     data: data,  
4.     groupField: 'sex',  
5.     sortInfo: {field: 'name', direction: "ASC"}  
6. });  
7. var grid = new Ext.grid.GridPanel({  
8.     autoHeight: true,  
9.     store: store,  
10.     columns: columns,  
11.     view: new Ext.grid.GroupingView(),  
12.     renderTo: 'grid'  
13. });  

      ExtJS各种各样的组件和控件有很多，做的都很漂亮，还可以自己定制样式，使用继承来拓展ExtJS的功能，ExtJS的介绍就到这了，更多的功能我今后还会继续研究的。