Extjs_javascript スキルのストア グループ化機能の使用方法の詳細な分析

プロジェクトの実践中に、特定のフィールドに従ってグリッド内のデータをグループ化するという要件に遭遇しました。もちろん、この関数は API で使用でき、誰でも見つけられるようにここにリストされています。

2 つの注意点:

1. ストアを作成するときは、グループ化する必要がある値である groupField 属性の値を設定する必要があります

例:

JavaScript コード

Ext.define('Person', { 
extend: 'Ext.data.Model', 
fields: ['name', 'sex'] 
}); 

このデータ モデルでは、性別ごとにグループ化する必要があります。その後、以下のストアを参照してください

JavaScript コード

var PersonStore = Ext.create('Ext.data.Store', { 
storeId: 'PersonStore', 
model: 'Person', 
groupField: 'sex', 
data: [{ 
name: 'hongmei li', 
sex: 'female' 
},{ 
name: 'san zhang', 
sex: 'male' 
},{ 
name: 'Jim Green', 
sex: 'male' 
},{ 
name: 'Lily', 
sex: 'female' 
},{ 
name: 'Lucy', 
sex: 'female' 
}] 
}); 

次に、グループ表示用の tpl を定義する必要があります

JavaScript コード

var groupingFeature= Ext.create('Ext.grid.feature.Grouping',{ 
groupHeaderTpl: 'sex: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})' 
});//注意其中{name}即为store中sex列所对应的值 

gridPanel のコードは次のとおりです: 機能を上で定義した groupingFeature として構成します

JavaScript コード

var grid = Ext.create('Ext.grid.Panel', { 
renderTo: Ext.getBody(), 
store: PersonStore, 
width: 600, 
height: 400, 
title: 'Person', 
features: [groupingFeature], 
columns: [{ 
text: 'Name', 
flex: 1, 
dataIndex: 'name' 
},{ 
text: 'sex', 
flex: 1, 
dataIndex: 'sex' 
}] 
}); 

レンダリングは次のとおりです:

もちろん、グループ化が実装された後は、gridPanel の性別列を表示する必要はありません。

なお、ストア内のデータが変更された場合、グループ化は正常に表示されますか?

ここで itemclick イベントをグリッドに追加します。コードは次のとおりです:

JavaScript コード

listeners:{ 
itemclick:function(thisview,record){ 
PersonStore.<span style="color:#ff0000;">add</span>([{name:"li",sex:"male"},{name:"zhang",sex:"female"}]); 
} 
} 

効果は以下の通りです

インターフェースが私たちが望むものではないことがわかりますが、どうすれば解決できますか? (最初の愚かな解決策は、gridPanel を削除し、破棄し、再ロードするというものでした) リスナーがイベントをリッスンできるようにコードにいくつかの変更を加えました

JavaScript コード

listeners:{ 
itemclick: function (thisview,record){ 
PersonStore.loadData([{name: "li" ,sex: "male" },{name: "zhang" ,sex: "female" }], true ); 
} 
} 

効果をもう一度見てください:

これは、ストア内のデータを動的に変更する場合、データを GridPanel の最後に追加する代わりに、グループ化も実装する必要があります。これら 2 つのコードの違いは主に、ストアにデータを追加する方法にあります。前者は add(record)、後者はloadData(records,[append])

です。

最初は、なぜ同じストアがデータを追加するのか理解できませんでしたが、効果は異なりました。公式ドキュメントの説明を参照してください。add()、新しい Model インスタンスは既存のコレクションの最後に追加されます。 (コレクションにデータを追加します。最後に) ふと、loadData がストアのルールに従ってデータをロードしていることに気づきました。

さらに、グループ内の最も古い行を削除する方法については、私自身で確認し、ドキュメントが実装されているので、ここで共有します。

//以前のリスナーのリスニング イベントを次のように変更します:

first([boolean group]) メソッドに注意してください。パラメータが渡されない場合、パラメータが true の場合、ストア グループがグループ名キーとともに返されます。グループ内の最初のデータ。1 つのデータは複数の値のオブジェクトです。男性のデータを取得したい場合は、personStore.first(true). Female を使用します。 .first(true).male

JavaScript コード

listeners:{ 
itemclick: function (thisview,record){ 
PersonStore.loadData([{name: "li" ,sex: "male" },{name: "zhang" ,sex: "female" }], true ); 
alert(PersonStore.first( true ).female.get( 'name' )); 

console.log(PersonStore.first( true ).female); 
PersonStore.remove(PersonStore.first( true ).female); 
// console.log(PersonStore.getAt(0));
} 
}

removedRecords がメモリを占有するのを防ぐために、この関数を実装することはできますが、方法は少し不格好です。誰かが良い方法を知っていれば、

コードを見てください:

listeners:{ 
itemclick:function(thisview,record){ 
PersonStore.loadData([{name:"li",sex:"male"},{name:"zhang",sex:"female"}],true); 
alert(PersonStore.first(true).female.get('name')); 
console.log(PersonStore.first(true)); 
PersonStore.remove(PersonStore.first(true).female); 
var recs = PersonStore.getRange(); 
console.log(recs); 
//PersonStore.removeAll(true);//这句有没有都可以 
PersonStore.loadRecords(recs);//重新load数据，内存中记录的removed掉的就没有了 
console.log(PersonStore); 
alert(PersonStore.getRemovedRecords.length);//这句alert结果为0 
// console.log(PersonStore.getAt(0)); 
} 
}