extgridpanel编辑保存数据

点击“添加”时通过ajax提交保存至数据库,然后gird.store.load一下就可以了,我这给你一个鼠标点击1次grid的一行就进入编辑状态,光标离开就可以保存的实例。

var grid_panel = Ext.create("Ext.grid.Panel",{
  id:"treeGrid", 
     autoWidth:true,      
  height:317,
  border:0,
  autoScroll:true, 
   store:treeGridStore,       
      columns: [
           
            {
             text: "节点id",
             width: 60,
              dataIndex: 'id'           
             },
            {
             text: "节点名称",
             flex:1,
             dataIndex: 'name',
             editor: {//文本字段  
              xtype:'textfield',  
              allowBlank:false             
    
             
          }
         
         
         
            }
           
        ],
        selModel: {
            selType: 'cellmodel'
        },
        frame: true,
        plugins:[  
      Ext.create('Ext.grid.plugin.CellEditing', {  
         clicksToEdit: 1//设置鼠标单击1次进入编辑状态 
        
      })  
  ],
  listeners:{
      "edit":function(editor,e){
       //alert(e.record.data.id);
       //alert(e.record.data.name);
       var id=e.record.data.id;
       var name=e.record.data.name;
       Ext.Ajax.request({
     url:"gotoSaveNode.action",
     params:{
      id:id,
      name:name
           
     },
     success:function(){
          Ext.getCmp("left_Navigationtree").store.load();
     }
    });
      }
      
     },
 
  loadMask:"加载中...",
        bbar: Ext.create('Ext.PagingToolbar', {
            store: treeGridStore,
            displayInfo: true,
            displayMsg: '显示 {0} - {1} 条   共 {2} 条',
            emptyMsg: "没有节点"
        })
  
});

你可能感兴趣的:(extgridpanel编辑保存数据)