プロジェクトの実践の過程で、グリッドのデータが特定のフィールドに従ってグループ化されるという要件に遭遇します。もちろん、この関数はAPIで利用可能であり、誰もが見つけるためにここにリストされています。
注意すべき2つのこと：
1.ストアを作成する場合、グループフィールド属性の値、つまりグループ化する必要がある値を設定する必要があります。
例えば：
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： 'lucy'、sex： 'female'}]}）;次に、グループに表示されるTPLを定義する必要があります
JavaScriptコード
var groupingfeature = ext.create（ 'ext.grid.feature.grouping'、{groupheadertpl： 'sex：{name.length}（{rows.length} item {[values.rows.length> 1？ "s"： ""]}'}）; // {name}）; //Gridpanelでは、コードは次のとおりです。
JavaScriptコード
var grid = ext.create（ 'ext.grid.panel'、{renderto：renderto：ext.getbody（）、store：personstore、width：600、height：400、title： 'personfeature]、columns：[{text：' name '、flex：1、dataindex：' fex： '' dat： '' '、 }）;レンダリングは次のとおりです。
もちろん、グループ化を実装した後、Gridpanelのセックスコラムを表示する必要はありません。
ストア内のデータが変更された場合、グループ化は正常に表示できることに注意してください。
ItemClickイベントをグリッドに追加すると、コードは次のとおりです。
JavaScriptコード
リスナー：{itemclick：function（thisview、record）{personStore。<span style = "color：＃ff0000;"> add </span>（[{name： "li"、sex： "male"}、{name： "zhang"、sex： "fame"}））; }}効果は次のとおりです
インターフェイスが私たちが望むものではないので、それを解決する方法はわかりますか？ （最初の愚かな解決策は、このグリッドパネルを削除して破壊し、リロードしたことでした）私はリスナーの話を聞いてイベントを聞いたコードの変換を行いました。
JavaScriptコード
リスナー：{itemclick：function（thisview、record）{personstore.loaddata（[{name： "li"、sex： "male"}、{name： "zhang"、sex： "female"}]、true）; }}もう一度効果を見てください：
これが私たちが望む効果です。ストア内のデータを動的に変更する場合、Gridpanelの最後にデータを追加するのではなく、グループ化も実装する必要があります。これらの2つのコードの区別に対応して、主なことはストアにデータを追加する方法です。前者は追加（レコード）で、後者はloaddata（record、[append]）です
最初は、ストアがなぜデータを追加したのか理解できませんでしたが、効果は異なっていました。公式ドキュメントの説明を読みますadd（）、既存のコレクションの最後に新しいモデルインスタンスが追加されます。 （コレクションの最後にデータを追加）私は突然、LoadDataがストアルールに従ってデータをロードすることに気付きました。
さらに、グループで最も古い行を削除する方法で、私はそれを自分でチェックしました。ドキュメントが実装されています。ここであなたと共有します：
//以前のリスナーリスニングイベントを次のように変更します。
パラメーターが渡されない場合、最初の（[Boolean Group]）メソッドは、ストアの最初のデータが取得されることに注意してください。パラメーターがtrueの場合、リターンはグループ名キーを持つストアグループであり、グループ内の最初のデータは値です。 personstore.first（true）.femaleは、女性グループの最初のデータを取得します。男性を取得したい場合は、PersonStore.first（true）.maleを使用できます。
JavaScriptコード
リスナー：{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））;}}削除レコードのメモリ占有率を回避するために、さらなる処理が実行されました。機能は実装できますが、この方法は少し愚かです。誰もがコミュニケーションをとる良い方法があります。
コードを見てください：
リスナー：{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);///anythingはこの文で実行できますpersonStore.loadRecords（recs）; //データをリロードし、メモリに記録された削除された削除されたconsole.log（personstore）; alert（personstore.getRemovedRecords.length）; //この文のアラート結果は0 // console.log（personstore.getat（0））; }}