您现在的位置:首页 >> 前端 >> 内容

Ext.data.proxy.Ajax的CRUD操作及sync()的作用

时间:2017/8/4 16:44:09 点击:

  核心提示:CRUD操作指的是create , update,read , destroy四个操作。指的是对ExtJs的前台数据Store的增加,修改,加载(load,也可以说是查询),删除四个操作。下面先看使用...

CRUD操作指的是create , update,read , destroy四个操作。指的是对ExtJs的前台数据Store的增加,修改,加载(load,也可以说是查询),删除四个操作。下面先看使用实例,首先要现在store里面定义api。

var grid = Ext.create('Ext.tree.Panel', {  
           store:Ext.create('Ext.data.TreeStore', {  
               autoLoad:true,  
               model: 'home.menu',  
               root:{  
                   menu_id:0,  
                   menu_name:'ROOT'  
               },  
               proxy:{  
                   type:'ajax',  
                   api:{  
                       create:'create.action',  
                       update:'update.action',  
                       read:'read.action',  
                       destroy:'destroy.action'  
                   },  
                   reader:{  
                       root:'result',  
                       totalProperty:'totalCount'  
                   }  
               }  
           }),  

上面代码的意思是在store中定义当我们对store进行add(),updaterecord(),load(),remove()四个操作时相对应的操作URL。下面是extjsAPI里面的定义

api : Object  
  
指定的urls中所调用的CRUD,即"create","read","update"和"destroy"操作方法。默认为:  
  
api: {  
    create  : undefined,  
    read    : undefined,  
    update  : undefined,  
    destroy : undefined  
}  
  
该url的生成基于使用对应的api属性中所执行[create|read|update|destroy]的动作action, 或者如果为undefined则默认为已配置的 Ext.data.Store.url。  
  
示例:  
  
api: {  
    create  : '/controller/new',  
    read    : '/controller/load',  
    update  : '/controller/update',  
    destroy : '/controller/destroy_action'  
}  
  
如果指定的URL对于所给定CRUD动作为undefined, 那么CRUD的action请求将指向已配置的url。  

下面是使用的DEMO、

修改(update U):

form.getForm().updateRecord(form.getForm().getRecord());  
grid.getStore().sync();  

删除(destory D)

var r = form.getForm().getRecord();  
r.remove();  
grid.getStore().sync();  

加载(Read R )

grid.getStore().load();  

增加(Create C)

grid.getStore().add(form.getForm().getValues());  
grid.getStore().sync();  
不懂大家注意到了没有 在CUD操作后,都有一个sync()操作。如果在store中设置了autoSync:true的话。就可以省略sync()操作。下面是autoSync的API解释:  
<a target="_blank" href="https://extjs.org.cn/extjs/4.1/doc/#%21/api/Ext.data.AbstractStore-cfg-autoSync" class="name expandable">autoSync</a><span> : <a target="_blank" href="https://extjs.org.cn/extjs/4.1/doc/#%21/api/Boolean" rel="Boolean" class="docClass">Boolean</a></span><p class="description"><p class="long"><p>'true'表示每当对一条Record记录完成修改后, 都将对Store与Proxy进行同步. 默认为'false'.</p><p>Defaults to: <code>false</code></p></p></p>  

最后还有一点需注意的是:除了R是get请求外,CUD操作传到后台的数据都是以字符流的形式传输的。不是以post/get的方式传输的。

所以后台如果用Java的servlet接收的话用service方法,代码如下:

<span style="white-space:pre">      </span>String line = null;  
        StringBuffer sb = new StringBuffer();  
        BufferedReader reader = request.getReader();  
        while((line=reader.readLine())!=null){  
            sb.append(line);     
        }  
        System.out.println(sb.toString()); 

PHP接收CUD传送的数据的代码:

public function getPut()  
    {  
        $raw = '';  
        $fp = fopen('php://input', 'r');  
        while ($kb = fread($fp, 1024)) {  
            $raw .= $kb;  
        }  
        $params = json_decode($raw, true);  
        if (count($params) && !isset($params[0])) {  
            $params = array($params);  
        }  
        $_POST['php_input'] = $raw;  
        return $params;  
    }  

基本上CRUD的操作的注意点都在这里了。不足的我会慢慢补充,求指正

Tags:EX XT TD DA 
作者:网络 来源:java_dotar