ExtJS4.2學習(七)EditorGrid可編輯表格(轉)

鳴謝地址：http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-14/176.html

----------------------------------------------------------------------------------------------

以上實現的效果就是本節所要做的效果，現在看代碼：

/**
 * Grid
 * 此js演示了如何設置可編輯表格
 */ 
//表格數據最起碼有列、數據、轉換原始數據這3項
Ext.onReady(function(){
    //定義列
    var columns = [
        {header:'編號',dataIndex:'id',width:50,
            editor:{
                allowBlank:true
            }}, //sortable:true 可設置是否為該列進行排序
        {header:'名稱',dataIndex:'name',width:80,
                editor:{
                    allowBlank:true
                }},
        {header:'描述',dataIndex:'descn',width:112,
                    editor:{
                        allowBlank:true
                    }}
      ];
    //定義數據
    var data =[
        ['1','小王','描述01'],
        ['2','李四','描述02'],
        ['3','張三','描述03'],
        ['4','束洋洋','思考者日記網'],
        ['5','高飛','描述05']
    ];
    //轉換原始數據為EXT可以顯示的數據
    var store = new Ext.data.ArrayStore({
        data:data,
        fields:[
           {name:'id'}, //mapping:0 這樣的可以指定列顯示的位置，0代表第1列，可以隨意設置列顯示的位置
           {name:'name'},
           {name:'descn'}
        ]
    });
    //加載數據
    store.load();

    //創建表格
    //原：Ext.grid.GridPanel，但在Extjs4.1（4.2）中都沒找到，只有new Ext.grid.Panel，不過效果一致。
    var grid = new Ext.grid.Panel({
        renderTo:'grid', //渲染位置
        width:550,
        autoHeight:true,
        store:store,
        columns:columns, //顯示列
        stripeRows:true, //斑馬線效果
        selType: 'cellmodel',
        plugins:[
                 Ext.create('Ext.grid.plugin.CellEditing',{
                     clicksToEdit:1 //設置單擊單元格編輯(設置為2是雙擊進行修改)
                 })
        ],
        tbar:['-',{
            text:'添加一行',
            handler:function(){
                var p ={
                        id:'',
                        name:'',
                        descn:''
                        };
                    store.insert(0,p);
                }
            },'-',{
                text:'刪除一行',
                handler:function(){
                    Ext.Msg.confirm('系統提示','確定要刪除？',function(btn){
                        if(btn=='yes'){
                            var sm = grid.getSelectionModel();
                            var record = sm.getSelection()[0];
                            store.remove(record);
                        }
                    });
                }
        },'-',{
            text:'保存',
            handler:function(){
                var m = store.getModifiedRecords();//原：store.getModifiedRecords().slice(0);都可以
                var jsonArray = [];
                Ext.each(m,function(item){
                    jsonArray.push(item.data);
                });
                Ext.Ajax.request({
                    method:'POST',
                    url:'/extjsTest1/EditGridServlet',
                    success:function(response){
                        Ext.Msg.alert('系統提示',response.responseText,function(){
                            store.load();
                        });
                    },
                    failure:function(){
                        Ext.Msg.alert("錯誤","與后台聯系的時候出了問題。");
                    },
                    params:'data='+Ext.encode(jsonArray)//原：encodeURIComponent(Ext.encode(jsonArray))都可以
                });
            }
        }]
    });
});

一、上面js代碼說明

1.Ext.grid.plugin.CellEditing

plugins:[
                 Ext.create('Ext.grid.plugin.CellEditing',{
                     clicksToEdit:1 //設置單擊單元格編輯(設置為2是雙擊進行修改)
                 })
        ],

這里我們啟用了CellEditing插件，其他的部分並沒有什么變化。可是看到的結果是，現在可以用TextField的方式隨意修改單元格。記得不能讓單元格為空，否則無法修改。

默認情況下，需要雙擊單元格才能激活編輯器，從而進行修改。不過，也可以給表格配置上clicksToEdit:1，這樣就可以通過單擊單元格激活編輯器，從而進行修改。

TextField不允許輸入空值，因為在創建columns時對應的editor設置了allowBlank:false屬性。allowBlank:false表示不運行在TextField中輸入空值。

2.tbar

tbar:['-',{
            text:'添加一行',
            handler:function(){
                var p ={
                        id:'',
                        name:'',
                        descn:''
                        };
                    store.insert(0,p);
                }
            },

這是Ext.panel.Panel中的配置屬性，在API有這樣的介紹：

因為Ext.grid.Panel繼承了Ext.panel.Panel，所以繼承了它的所有屬性，因此可以用這個tbar。

2.1 handler

這是Ext.panel.Tool中的配置選項（Config options）中的一個屬性，在API中的描述如下：

3.store.insert

這是Ext.data.ArrayStore中的方法，具體參見API。

二、后台代碼

@SuppressWarnings("serial")  
public class EditGridServlet extends HttpServlet {  
    @Override  
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)  
            throws ServletException, IOException {  
        doPost(req,resp);  
    }  
  
    @Override  
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)  
            throws ServletException, IOException {  
        req.setCharacterEncoding("UTF-8");  
  
        String data = req.getParameter("data");  
        System.out.println(data);  
  
        resp.getWriter().print(data);  
    }  
} 

打印結果：

后記：Extjs模擬java的面向對象的思想（當然和java語言不能等同，畢竟它是用javascript編寫的），是一個重量級的前台框架，里面涉及到的類較多，因此查詢API是了解其中的類、屬性、方法等的重要途徑。