EXTJS系列笔记(4.X)————Ext.data.proxy.Ajax 的CRUD操作及sync()的作用

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

[javascript] view plain copy  print?

1. var grid = Ext.create('Ext.tree.Panel', {  
2.            store:Ext.create('Ext.data.TreeStore', {  
3.                autoLoad:true,  
4.                model: 'home.menu',  
5.                root:{  
6.                    menu_id:0,  
7.                    menu_name:'ROOT'  
8.                },  
9.                proxy:{  
10.                    type:'ajax',  
11.                    api:{  
12.                        create:'create.action',  
13.                        update:'update.action',  
14.                        read:'read.action',  
15.                        destroy:'destroy.action'  
16.                    },  
17.                    reader:{  
18.                        root:'result',  
19.                        totalProperty:'totalCount'  
20.                    }  
21.                }  
22.            }),  

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

[javascript] view plain copy  print?

1. api : Object  
2.   
3. 指定的urls中所调用的CRUD，即"create"，"read"，"update"和"destroy"操作方法。默认为:  
4.   
5. api: {  
6.     create  : undefined,  
7.     read    : undefined,  
8.     update  : undefined,  
9.     destroy : undefined  
10. }  
11.   
12. 该url的生成基于使用对应的api属性中所执行[create|read|update|destroy]的动作action， 或者如果为undefined则默认为已配置的 Ext.data.Store.url。  
13.   
14. 示例:  
15.   
16. api: {  
17.     create  : '/controller/new',  
18.     read    : '/controller/load',  
19.     update  : '/controller/update',  
20.     destroy : '/controller/destroy_action'  
21. }  
22.   
23. 如果指定的URL对于所给定CRUD动作为undefined， 那么CRUD的action请求将指向已配置的url。  

下面是使用的DEMO、

 

修改（update   U）：

 

[javascript] view plain copy  print?

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

删除（destory  D）

 

 

[javascript] view plain copy  print?

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

加载（Read   R ）

 

 

[javascript] view plain copy  print?

1. grid.getStore().load();  

增加(Create  C)

 

 

[javascript] view plain copy  print?

1. grid.getStore().add(form.getForm().getValues());  
2. grid.getStore().sync();  

[javascript] view plain copy  print?

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

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

所以后台如果用java的servlet接收的话用service方法，代码如下：

 

		String line = null;
		StringBuffer sb = new StringBuffer();
		BufferedReader reader = request.getReader();
		while((line=reader.readLine())!=null){
			sb.append(line);   
		}
		System.out.println(sb.toString());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传送的数据的代码：

 

 

[php] view plain copy  print?

1. public function getPut()  
2.     {  
3.         $raw = '';  
4.         $fp = fopen('php://input', 'r');  
5.         while ($kb = fread($fp, 1024)) {  
6.             $raw .= $kb;  
7.         }  
8.         $params = json_decode($raw, true);  
9.         if (count($params) && !isset($params[0])) {  
10.             $params = array($params);  
11.         }  
12.         $_POST['php_input'] = $raw;  
13.         return $params;  
14.     }  

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