extjs Ext.data.Store store学习

extjs Ext.data.Store store学习

⭐️来自很多年前的extjs笔记，只是一个归档，不做更新！⭐️

1. 常用方法

• add() :添加纪录
• removeAt() ：移除记录
• count() ：store中记录个数
• removeAt() : 删除模型实例在给定的索引
• getAt(): 获取记录根据制定的索引
• getData(): 获取记录集，记录数组
• each(): 调用一个指定的方法对于每一个Ext.data.Model模型对象在store中的； 就是遍历store中的record。当store是过滤的，只便利过滤后的记录
• loadData(): 使用这个方法很赞，如果数据已经是正确格式，（它不需要通过reader的处理）；如果你需要解析数据结构使用Ext.data.proxy.Memory or loadRawData。loadData是载入对象;loadRawdata是直接载入服务返回的json；
• loadRawData() 如下可以直接加载服务器返回json；格式就是你自己配的store的格式

//loadRawData实践
	$.post('/JF/PolicyConfig_AttackDefendRule/getAttackDefendRule', {
    
     'param': param, 'currentRuleSet': currentRuleSet}, function(resp){
    
    
		var result = Ext.decode(resp);
		store.loadRawData(result);

	});	

//自己配的store
proxy:
{
    
    
    type:'ajax',
    url:'/JF/PolicyConfig_AttackDefendRule/getList',
    reader: 
	{
    
    
		type : 'json',
		rootProperty : 'list',
		totalProperty : 'allRow'
	}
},		

总结:这个东西有些场景可能不太适用，比如我grid条件查询，根据条件我把查询到的数据loadRawData了，但是我点grid下面的下一页的时候它又触发这个grid的store从服务端请求数据( 点击下一页都会触发什么?? 好像它会触发这个grid的store 上一次的配置请求- -)。 所以这种grid条件查询，还是不要使用这种方法。
因此，采用覆写store的ajax请求配置，这样点击下一页就不会出现问题。

loadLogByCondition: function(filter)
{
    
    
	var store = this.getStore('AuditLogs');
	store.setProxy({
    
    
		type: 'ajax',							
		url : '/JF/LogQuery_AuditLog/getAuditLogs',
		timeout:90000,
		reader: 
		{
    
    
			type : 'json',
			rootProperty : 'list',
			totalProperty : 'allRow'
		},
		extraParams: {
    
     'param': Ext.encode(filter) }							
	});					
	store.loadPage(1);			
},

• extraParams：{} store ajax时提交参数配置

Ext.data.Store
view source
add ( record ) : Ext.data.Model[]
Adds Model instance to the Store. This method accepts either:
An array of Model instances or Model configuration objects.
Any number of Model instance or Model configuration object arguments.
The new Model instances will be added at the end of the existing collection.
Sample usage:
myStore.add({some: ‘data’}, {some: ‘other data’});
Note that if this Store is sorted, the new Model instances will be inserted at the correct point in the Store to maintain the sort order.
PARAMETERS
record : Ext.data.Model[] / Ext.data.Model… / Object[] / Object…
An array of records or configuration objects, or variable number of record or config arguments.
RETURNS :Ext.data.Model[]
The record instances that were added.

Ext.data.Store
view source
getData : Ext.util.Collection
Returns the store’s records.
Note: If your store has been filtered, getData() will return a filtered collection. Use `getData().getSource() to fetch all unfiltered records.

loadData ( data , [append] )
Loads an array of data straight into the Store.
Using this method is great if the data is in the correct format already (e.g. it doesn’t need to be processed by a reader). If your data requires processing to decode the data structure, use a Ext.data.proxy.Memory or loadRawData.
PARAMETERS
data : Ext.data.Model[] / Object[]
Array of data to load. Any non-model instances will be cast into model instances first.
append : Boolean (optional)
true to add the records to the existing records in the store, false to remove the old ones first.
Defaults to: false

2. 从grid中的store使用 getData()返回的记录集,查看返回记录集类型是 Ext.util.Collection

getData : Ext.util.Collection
Returns the store’s records.
Note: If your store has been filtered, getData() will return a filtered collection. Use `getData().getSource() to fetch all unfiltered records.
RETURNS :Ext.util.Collection
An Ext.util.Collection of records (an empty Collection if no records are held by the store).

var gridFormStore = Ext.getCmp('riskFunc').getStore();
var records = gridFormStore.getData();

3. 查看学习Ext.util.Collection的方法，也就是 记录及records的方法：

1)getCount : Number
Returns the number of items in the collection.

grid中记录的个数（行数）

2）get ( key ) : Object
Returns the item associated with the passed key.
Available since: 5.0.0 PARAMETERS
key : String / Number
The key of the item.
RETURNS :Object
The item associated with the passed key.

通过记录record的get方法 就可以获取 列具体存储的值

//实践
gridFormStore.each(function(record){
    
    
	var currentRecord = record.get('master');
	console.log(currentRecord);
});

4. 如何配置store的ajax传递post参数，不是get参数？

actionMethods配置项

扫描二维码关注公众号，回复： 15332994 查看本文章

//
loadLogByCondition: function(filter)
{
    
    
	var store = this.getStore('AuditLogs');
	store.setProxy({
    
    
		type: 'ajax',	
		/*使用该配置项解决
		actionMethods:{
			read:'POST'		
		},
		*/						
		url : '/JF/LogQuery_AuditLog/getAuditLogs',
		timeout:90000,
		reader: 
		{
    
    
			type : 'json',
			rootProperty : 'list',
			totalProperty : 'allRow'
		},
		extraParams: {
    
     'param': Ext.encode(filter) }	
		//也可加多个参数
		//extraParams: { 'param': jsonData,'currentRuleSet': currentRuleSet}							
				
	});					
	store.loadPage(1);			
},

问题， 我这里param是一个js对象，发现有问题（extraParams: { ‘param’: 纯粹js对象 }不行）。
所以用Ext.encode（同Ext.JSON.encode）传给服务器一个json
提交样子如下:

param:{
    
    "attack_type":"\u547d\u4ee4\u6267\u884c","enable":"2","level":"0","name":"sd","cve_no":""}

//服务器端处理，如果是标准的json格式直接json_decode即可
//json中如果包含引号或双引号，会破坏JSON格式，一般在引号前面加上 反斜线backslash(\) 即可
//测试，发现Ext.JSON.encode js对象后的JSON已经加了，服务器直接json_decode也没有问题
//so 下面例子可忽略
private function addSlash($obj) {
    
    
	if( is_array($obj) ) {
    
    
		return array_map(__METHOD__, $obj);
	}else {
    
    
		return addslashes($obj);
	} 
}

$getData = $this->_getPost('param');
//$getData = str_replace('"','"',$getData); //这个一般不需要

if( $getData != '{}' ) {
    
    
	$getData=stripslashes($getData);  //一般也不需要
	$getData = json_decode($getData,true);
	$getData = $this->addSlash($getData);
}
//print_r($getData);die;

$ruleset_id = $this->_getPost('currentRuleSet');

总结: extraParams: { ‘param’: xxxx } 默认get提交（可修改为POST），一个参数一个值 param=xxxx；
因此你想提交一个js对象的话，就json话这个js对象，然后传。