Extjs 4.1 grid 动态添加行

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/yuan826650811/article/details/46360001
//设置数据源
var store = Ext.create('Ext.data.Store', {
   storeId:'store',
   fields:['name', 'value'],
   data: [
       {name:'Lisa', value:'lisa@simpsons.com'},
       {name:'Marge', value:'marge@simpsons.com'}
   ]

});

//自定义数据model

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name', type: 'string'},
        {name: 'value',  type: 'string'}
    ]
});
//创建grid
var grid = Ext.create('Ext.grid.Panel', {
   id:'grid',
   store: store,
   columns: [
       {header: '属性名称',  dataIndex: 'name', editor: 'textfield'},
       {header: '属性值', dataIndex: 'value', flex:1,
           editor: {
               xtype: 'textfield'
           }
       }
   ],
   selType: 'rowmodel',
   plugins: [
       Ext.create('Ext.grid.plugin.RowEditing', {
        pluginId:'rowEditing',  
           saveBtnText: '保存',  
           cancelBtnText: "取消",  
           autoCancel: false,  
           clicksToEdit: 2
       })
   ],
   tbar:[{
       text: '添加属性',
       iconCls: 'icon-add',
       handler : function(){
           //得到store，并添加一个新的空行  
                   var store = Ext.getStore('store');  
                   var model = Ext.create('User',{});  
                   store.insert(0,model);
           //得到rowEditing添加事件  
                    var rowEditing = Ext.getCmp('grid').editingPlugin; 
                    rowEditing.cancelEdit();
           rowEditing.startEdit(0, 0);
       }
   }],
   height: 150,
   width: 600,
   renderTo: Ext.getBody()
});