أثناء عملية ممارسة المشروع ، نواجه شرط تم تجميع البيانات الموجودة في الشبكة وفقًا لمجال معين. بالطبع ، هذه الوظيفة متوفرة في واجهة برمجة التطبيقات ، وهي مدرجة هنا للجميع للعثور عليها:
شيئين يجب ملاحظة:
1. عند إنشاء متجر ، تحتاج إلى تعيين قيمة سمة Groupfield ، أي القيمة التي يجب تجميعها.
على سبيل المثال:
رمز JavaScript
ext.define ('person' ، {exted: 'ext.data.model' ، الحقول: ['name' ، 'sex']}) ؛في نموذج البيانات هذا ، نحتاج إلى التجميع حسب الجنس (الجنس) ، لذا يرجى الاطلاع على المتجر أدناه
رمز JavaScript
var norph.create ('ext.data.store' ، {storeid: 'personstore' ، model: 'person' ، groupfield: 'sex' ، data: [{{name: 'hongmei li' ، sex: 'female'} ، {name: 'san Zhang' 'Female'} ، {name: 'lucy' ، sex: 'female'}]}) ؛بعد ذلك ، نحتاج إلى تحديد TPL المعروض في المجموعة
رمز JavaScript
var groupingfeature = ext.create ('ext.grid.feature.grouping' ، {groupheadertpl: 'sex: {name} ({{kows.length} item {[value.rows.length> 1؟ "s": "]}) ؛في Gridpanel ، الرمز كما يلي: تكوين الميزات إلى GroupingFeature المحددة أعلاه
رمز JavaScript
var grid = ext.create ('ext.grid.panel' ، {renderto: ext.getbody () ، المتجر: شخصياً ، العرض: 600 ، الارتفاع: 400 ، العنوان: "الشخص" ، الميزات: [groupingfeature] ، الأعمدة: }) ؛العروض كما يلي:
بالطبع ، بعد تنفيذ التجميع ، لا يلزم عرض عمود الجنس في Gridpanel.
تجدر الإشارة إلى أنه إذا تغيرت البيانات الموجودة في المتجر ، فهل يمكن عرض التجميع بشكل طبيعي؟
أضف الآن حدث itemclick إلى الشبكة ، والرمز كما يلي:
رمز JavaScript
المستمعون: {itemClick: function (thisview ، record) {personstore. <span style = "color:#ff0000 ؛"> add </span> ([{{name: "li" ، sex: "male"} ، {name: "Zhang" ، sex: "female"}]) ؛ }}التأثير على النحو التالي
يمكن ملاحظة أن الواجهة ليست ما نريد ، فكيف نحلها؟ (كان الحل الغبي في البداية هو أنني أزلت وتدمير هذه الشبكات ، التي تم إعادة تحميلها) لقد قمت ببعض التحولات من الكود الذي استمع إلى الحدث من خلال الاستماع إلى المستمعين
رمز JavaScript
المستمعون: {itemClick: function (thisview ، record) {personstore.loadData ([{name: "li" ، sex: "male"} ، {name: "Zhang" ، sex: "female"}] ، true) ؛ }}انظر إلى التأثير مرة أخرى:
هذا هو التأثير الذي نريده. عند تغيير البيانات ديناميكيًا في المتجر ، يجب أيضًا تنفيذ التجميع ، بدلاً من إلحاق البيانات بنهاية Gridpanel. المقابلة للتمييز بين هاتين القطعتين من الكود ، والشيء الرئيسي هو طريقة إضافة البيانات في المتجر. السابق هو إضافة (سجل) والأخير هو loadData (السجلات ، [إلحاق])
في البداية لم أستطع فهم سبب إضافة المتجر إلى البيانات ، لكن التأثير كان مختلفًا. قرأت شرح المستند الرسمي ، إضافة () ، وسيتم إضافة مثيلات النموذج الجديدة في نهاية المجموعة الحالية. (أضف البيانات في نهاية المجموعة) أدركت فجأة أن LoadData يقوم بتحميل البيانات وفقًا لقواعد المتجر.
بالإضافة إلى ذلك ، كيفية إزالة أقدم سطر في المجموعة ، راجعت ذلك بنفسي ، وتم تنفيذ المستند. سوف أشاركها معك هنا:
// تعديل حدث الاستماع للمستمعين السابقون على النحو التالي:
لاحظ أن الطريقة الأولى ([المجموعة المنطقية]) ، إذا لم يتم تمرير المعلمة ، يتم الحصول على البيانات الأولى في المتجر. عندما تكون المعلمة صحيحة ، فإن الإرجاع عبارة عن مجموعة مخزن بها مفتاح اسم المجموعة والبيانات الأولى في المجموعة هي القيمة. inflystore.first (true) .female يحصل على البيانات الأولى في المجموعة النسائية. إذا كنت ترغب في الحصول على الذكر ، يمكنك استخدام Personstore.first (صواب) .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 يمكن أن يتم مع هذه الجملة الشخصية. ALERT (personstore.getRemovedRecords.Length) ؛ // هذه النتيجة التنبيه الجملة هي 0 // console.log (personstore.getat (0)) ؛ }}