Ext.data.DirectStore中DirectAction的回调函数问题

Ext.data.DirectStore回调函数解决方案

最新推荐文章于 2025-07-31 15:23:34 发布

原创最新推荐文章于 2025-07-31 15:23:34 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#callback #autoload #function #服务器 #api #ext

ExtJS 专栏收录该内容

7 篇文章

订阅专栏

在Ext.data.DirectStore中，遇到无法指定回调函数的问题，导致在EXT4中服务器响应后无法自动执行默认回调，去除dirty标志。经过研究源码和多次测试，找到了通过定义自定义函数并传参的方式来解决这个问题。尽管EXT没有提供记录（record）实例，但可以通过ID搜索进行操作。代码实现已验证成功。

一个小问题，但是困扰了我很久……

要完成这样一个功能，在grid里面编辑数据，自动sync后根据服务器端返回的信息进行操作：去掉dirty标志、恢复原值、弹出提示框==

store这样设置：

  
   
   Ext.create(
   '
   Ext.data.DirectStore
   '
   , {
    model: 
   '
   File
   '
   ,
    storeId: 
   '
   filesStore
   '
   ,
    autoLoad: 
   true
   ,
    autoSync: 
   true
   ,
    remoteSort: 
   true
   ,
    api: {
    create: MyApp.FileAction.Create,
    read: MyApp.FileAction.Load,
    update: MyApp.FileAction.Update,
    destroy: MyApp.FileAction.Destroy
        },
        writer: 
   new
    Ext.data.JsonWriter({
    encode: 
   false
   ,
    writeAllFields: 
   true
   
        }),
        idProperty: 
   '
   id
   '
   ,
        totalProperty: 
   '
   total
   '
   ,
        root: 
   '
   data
   '
   ,
    sorters: [{
        property: 
   '
   datetimeCreated
   '
   ,
        direction: 
   '
   DESC
   '
   
    }]
});

如果使用手工调用方法，可以指定参数、回调函数==，但是Ext.data.DirectStore中通过api或者directFn指定的服务器端函数只能写函数名称，不能指定回调函数，例如update api里面指定MyApp.FileAction.Update，ext会自动把需要的参数传进去，可以指定参数顺序，但是不能指定callback function。

在ext3中grid编辑行，服务器端返回后会自动执行默认的callback，去掉dirty标志==，但是在ext4中不会自动执行，还不能指定callback，郁闷啊郁闷……看了下ext的源码，试着使用参数例如{operation:XXX,callback:xxx}指定则会报directCfg错误……继续郁闷……

找了些国内国外的例子，都没有类似的例子，文档里面也木有啊！连传的神马参数都木有！！只好自己一次一次的跟踪测试……

过程巨痛苦，最后找到的解决方法如下：

api或者directFn指定的名称不一定要服务器端方法，也可以是自己定义的function，所以自己定义个带回调的function把参数传进去就o了，不过最后还是不爽的是ext居然没有把record的示例传进去，进行操作的时候还要用id搜索！是我没找对地方吗？谁来教教我！烂文档啊就没写有木有！！

不咆哮了，上代码：

服务器端：

  
   
   public
    JObject Update(JObject o)
{
    FileInfo c 
   =
    JsonConvert.DeserializeObject
   <
   FileInfo
   >
   (o.ToString());
    JProperty success 
   =
    
   new
    JProperty(
   "
   success
   "
   ,
   "
   false
   "
   );
    
   try
   
    {
        c.Save();
        success 
   =
    
   new
    JProperty(
   "
   success
   "
   , 
   "
   true
   "
   );
    }
    
   catch
   
    {
    }
    
   return
    
   new
    JObject(
            success,
            
   new
    JProperty(
   "
   id
   "
   ,c.Id),
            
   new
    JProperty(
   "
   title
   "
   ,c.Title)
        );
}

js：

  
   
   //
   创建filesStore的callback function
   

   var
    callback 
   =
    
   function
   (response, e) {
    
   if
   (response.success
   ==
   '
   true
   '
   ){
        Ext.getStore(
   '
   filesStore
   '
   ).getById(response.id).commit()
        Ext.MessageBox.alert(
   '
   callback
   '
   ,response.title
   +
   '
   已经更新
   '
   )
        }
    
   else
   {
        Ext.getStore(
   '
   filesStore
   '
   ).getById(response.id).reject()
        Ext.MessageBox.alert(
   '
   callback
   '
   ,response.title
   +
   '
   更新失败
   '
   )
        }};

   //
   创建filesStore
   

   Ext.create(
   '
   Ext.data.DirectStore
   '
   , {
    model: 
   '
   File
   '
   ,
    storeId: 
   '
   filesStore
   '
   ,
    autoLoad: 
   true
   ,
    autoSync: 
   true
   ,
    remoteSort: 
   true
   ,
    api: {
    create: MyApp.FileAction.Create,
    read: MyApp.FileAction.Load,
    update: 
   function
   (rec){MyApp.FileAction.Update(rec,callback);},
    destroy: MyApp.FileAction.Destroy
        },
        writer: 
   new
    Ext.data.JsonWriter({
    encode: 
   false
   ,
    writeAllFields: 
   true
   
        }),
        idProperty: 
   '
   id
   '
   ,
        totalProperty: 
   '
   total
   '
   ,
        root: 
   '
   data
   '
   ,
    sorters: [{
        property: 
   '
   datetimeCreated
   '
   ,
        direction: 
   '
   DESC
   '
   
    }]
});

测试成功，上图：