extjs Ext.data.Store store learning

extjs Ext.data.Store store learning

⭐️Extjs notes from many years ago, just an archive, no update! ⭐️

1. Common methods

• add() : add record
• removeAt() : remove the record
• count() : the number of records in the store
• removeAt() : remove the model instance at the given index
• getAt(): Get the record according to the specified index
• getData(): Get recordset, record array
• each(): Call a specified method for each Ext.data.Model model object in the store; it is to traverse the records in the store. When the store is filtered, only the filtered records are convenient
• loadData(): This method is great if the data is already in the correct format (it doesn't need to be processed by the reader); if you need to parse the data structure use Ext.data.proxy.Memory or loadRawData. loadData is the loading object; loadRawdata is the json returned by the direct loading service;
• loadRawData() can directly load the server and return json as follows; the format is the format of the store you configured yourself

//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'
	}
},		

Summary: This thing may not be suitable for some scenarios. For example, I query the grid conditions. According to the conditions, I load the queried data to loadRawData, but when I click the next page under the grid, it triggers the store request of the grid from the server. Data (what will be triggered when clicking the next page?? It seems that it will trigger the last configuration request of the grid's store - -). So this kind of grid conditional query, or do not use this method.
Therefore, use the ajax request configuration that overrides the store, so that there will be no problem clicking the next page.

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: {} submit parameter configuration when 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. Use the recordset returned by getData() from the store in the grid, and check that the returned recordset type is 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. View the method of learning Ext.util.Collection, that is, the method of recording and records:

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

The number of records in the grid (number of rows)

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.

The value stored in the column can be obtained by recording the get method of the record

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

4. How to configure the ajax of the store to pass post parameters instead of get parameters?

actionMethods configuration item

//
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);			
},

The problem is that the param here is a js object, and there is a problem (extraParams: { 'param': pure js object} does not work).
So use Ext.encode (same as Ext.JSON.encode) to send a json
submission to the server as follows:

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');

Summary: extraParams: { 'param': xxxx } The default get submission (can be modified to POST), one parameter and one value param=xxxx; so if you want to
submit a js object, use json to write the js object, and then pass it.