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();  
  
    //建立表格  
    var grid = new Ext.grid.GridPanel({  
        width:550,  
        autoHeight:true,  
        store:store,  
        columns:columns, //顯示列  
        stripeRows:true, //斑馬線效果  
        selType: 'cellmodel',  
        plugins:[  
                 Ext.create('Ext.grid.plugin.CellEditing',{  
                     clicksToEdit:1 //設定單擊單元格編輯  
                 })  
        ],  
        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().slice(0);  
                var jsonArray = [];  
                Ext.each(m,function(item){  
                    jsonArray.push(item.data);  
                });  
                Ext.Ajax.request({  
                    method:'POST',  
                    url:'/ExtJs4.2Pro/EditGridServlet',  
                    success:function(response){  
                        Ext.Msg.alert('系統提示',response.responseText,function(){  
                            store.load();  
                        });  
                    },  
                    failure:function(){  
                        Ext.Msg.alert("錯誤","與後臺聯絡的時候出了問題。");  
                    },  
                    params:'data='+encodeURIComponent(Ext.encode(jsonArray))  
                });  
            }  
        }]  
    });  
    Ext.create('Ext.container.Viewport', {
        layout : 'fit',
        padding : 1,
        items : [grid]
    });
});