1 أسهل لوحة الشبكة
لوحة الشبكة هي واحدة من الأجزاء الأساسية من ExtJs ، ويمكن عرض البيانات وفرزها وتجميعها وتحريرها من خلال لوحة الشبكة. النموذج والمتجر هما جوهر بيانات معالجة لوحة الشبكة ، ويجب على كل لوحة شبكة إعداد النموذج والتخزين. لإنشاء لوحة شبكة ، يجب أولاً تحديد النموذج. يتضمن النموذج جميع الحقول التي تحتاج لوحة الشبكة إلى عرضها ، وهو ما يعادل مجموعة من حقول الجدول في قاعدة البيانات. يمكن اعتبار المتجر مجموعة من صف من البيانات أو مجموعة من مثيلات النموذج. يحتوي كل متجر على مثيلات نموذجية أو أكثر ، ويتم تخزين البيانات التي يتم عرضها بواسطة لوحة الشبكة في المتجر. تحصل لوحة الشبكة على بيانات من خلال المتجر وتعرضها ، بينما يقرأ المتجر وحفظ البيانات من خلال الوكيل.
فيما يلي لوحة شبكة لعرض المعلومات الأساسية للمستخدم ، بما في ذلك اسم المستخدم والبريد الإلكتروني ورقم الهاتف المحمول (الاسم والبريد الإلكتروني والهاتف) وإنشاء نموذج مستخدم أولاً (نموذج المستخدم).
ext.define ('user' ، {extend: 'ext.data.model' ، الحقول: ['name' ، 'email' ، 'phone']}) ؛بعد ذلك ، قم بإنشاء متجر ، وهو عبارة عن مجموعة من المستخدمين ، بما في ذلك مثيلات المستخدم المتعددة.
var userstore = ext.create ('ext.data.store' ، {model: 'user' ، // بيانات نموذج المستخدم التي تم إنشاؤها للتو: [{name: 'lisa' ، email: '[email protected]' ، phone: '555-111-124'} ، {name: 'bart' ، email: "[email protected] ' {name: 'homer' ، البريد الإلكتروني: '[email protected]' ، الهاتف: '555-222-1244'} ، {name: 'marge' ، email: '[email protected]' ، phone: '555-222-1254}]}) ؛بعد إنشاء كل من النموذج والمتجر ، يمكنك إنشاء لوحة شبكة.
ext.create ('ext.grid.panel' ، {renderto: ext.getbody () ، المتجر: UserStore ، Model} ، {text: "عنوان البريد الإلكتروني" ، العرض: 150 ، DatainDex: 'البريد الإلكتروني' ، Hidden: true} ، {text: 'phone number' ، flex: 1 ، dataindex: 'phone'}]}) ؛يتم عرض لوحة شبكة المستخدم الأخيرة في الشكل.
2 تجميع بيانات لوحة الشبكة (التجميع)
طالما تم تعيين خاصية Groupfield في المتجر ، يمكن تجميع البيانات التي يتم عرضها بواسطة لوحة الشبكة. لنفترض أن الشركة لديها العديد من الموظفين وتحتاج إلى تجميع موظفي الشركة حسب قسم الشبكة. أولاً ، قم بتعيين عقار Groupfield إلى القسم في المتجر.
ext.create ('ext.data.store' ، {model: 'exearmee' ، data: ... ، groupfield: 'department' // set data by department}) ؛ثم أضف ميزة التجميع إلى لوحة الشبكة لتحقيق تأثير عرض التجميع.
ext.create ('ext.grid.panel' ، {... الميزات: [{ftype: 'colling'}]}) ؛يظهر تأثير عرض المجموعة في الشكل أدناه. انقر هنا لعرض رمز عرض المجموعة الرسمي.
3 شاشة ترقيم صفحات لوحة الشبكة
عندما يكون هناك المزيد من البيانات والمزيد من الصفحات التي يجب عرضها ، يجب عرض البيانات على الترحيل. يمكن أن تدرك لوحة الشبكة عرض ترقيم الصفحات من خلال طريقتين: شريط أدوات الترحيل والتمرير الترحيل. شريط أدوات الترحيل يحتوي على أزرار الصفحة التالية/الصفحة التالية. يقوم الترحيل Scroller بتحميل البيانات ديناميكيًا عندما تقوم لوحة الشبكة بالتمرير إلى الأسفل.
لتنفيذ عرض ترقيم الصفحات ، يجب عليك أولاً تعيين المتجر لدعم ترقيم الصفحات. تعيين صفحات في المتجر. Pagesize الافتراضي هو 25. قم بتعيين إجمالي عدد البيانات في TotalProperty للقارئ ، و Pagin Pargin Pagins وفقًا لـ Pagesize و TotalProperty. تم تعيين الرمز التالي على 4 ، ويتم الحصول على TotalProperty من بيانات JSON التي تم إرجاعها.
ext.create ('ext.data.store' ، {model: 'user' ، autoload: true ، pagesize: 4 ، // قم بتعيين عدد البيانات المعروضة لكل وكيل صفحة: {type: 'ajsa' ، url: 'data/users.json' ، reader: {type: 'json' ، root: // property from json from json. سمة JSON ذات الصلة: 'total' // total data Quantity}}}) ؛افترض أن تنسيق بيانات JSON كما يلي
{"Success": True ، "Total": 12 ، "user": [{"name": "Lisa" ، "Email": "[email protected]" ، "phone": "555-111-1224"} ، { "الصفحة الرئيسية" ، "البريد الإلكتروني": "[email protected]" ، "الهاتف": "555-222-1244"} ، {"name":تم إنشاء ترحيل المتجر. يتم تنفيذ وظيفة ترحيل شريط الأدوات في لوحة الشبكة.
ext.create ('ext.grid.panel' ، {store: userstore ، الأعمدة: ... ، dockeditems: [{xtype: 'pagingtoolbar' ، // أضف متجر أدوات الترحيل: userstore ، // قم بتعيين متجر أدوات Paging Paging نفسه مثل Dock Scok: "DisplineFo: true}) ؛يظهر تأثير الترحيل لشريط أدوات الترحيل في الشكل أدناه. انقر هنا لعرض رمز وظيفة ترحيل شريط الترحيل الرسمي.
تطبيق الترحيل للترحيل بسيط نسبيًا. فقط قم بتعيين الكود التالي في لوحة الشبكة. انقر هنا لعرض رمز وظيفة ترحيل الترحيل الرسمي.
ext.create ('ext.grid.panel' ، {// استخدم Paging Scroller Parge Plagin verticscroller: 'PagingGridsCroller' ، // لا تعيد تعيين شريط التمرير عند التحديث ، // ...} ؛4 لوحة الشبكة إضافة مربع الاختيار
ما عليك سوى تعيين خاصية Selmodel للوحة الشبكة إلى Ext.Selection.CheckBoxModel ، انقر هنا لعرض مثال الرمز الرسمي.
ext.create ('ext.grid.panel' ، {selmodel: ext.create ('ext.selection.checkboxmodel') ، // قم بتعيين وضع التحديد للوحة الشبكة إلى مخزن مربع الاختيار: Userstore ، الأعمدة: ...}) ؛5 أمثلة شاملة
var grid = new ext.grid.gridpanel ({store // مصدر البيانات cm //ext.grid.columnmodel أعمدة // وظائف هي نفسها ext.grid.columnmodel. تأثير الرسوم المتحركة (الافتراضي هو صحيح ، عندما يتوفر فئة ext.fx). DisplayInfo: True ، // displayInfo displayInfo: // documentationmsg: "أظهر السجلات من {0} إلى {1} ، مجموع {2} '، فارغة:' no record '}) ، tbar: معالج: function () {win.show () ؛}}}) // ***************************************************** ext.grid.rownumberer () ، {header: "معرف العميل" ، العرض: 50 ، فرز: صواب ، dataindex: 'memid'} ، {header: "اسم العميل" ، العرض 75 ، قابلة للفرز: true ، dataindex: 'memname'} ، {header: 'secrect: width: dataindex:' sex ' العارض: الدالة (v) {return (v == '1')؟ 'kd_time'}]) ؛ /******************************************************************************** المستخدم // var modified = storeedit.modified.slice (0) ؛ // ext.each (modified ، function (m) {Alert (m.data.id) ؛ // البيانات في m.data والمعرف هو اسم الحقل}) // الحصول على بيانات الشبكة var selmodel = grid.getSelectionModel () ؛ الحصول على سجل اختيار VAR ؛ if (! selmodel.hassElection ()) {ext.msg.alert ('تحذير' ، 'يرجى تحديد الصف المراد تعديله!') ؛ يعود؛ } selmodel.getSelections (). الطول ؛ // عدد سجلات الصفوف المحددة = selmodel.getSelected () ؛ // احصل على بيانات الصفوف المحددة(1) الحصول على البيانات:
خط واحد
id = record.get ('id') ؛أو
id = record.data.id ؛
خطوط متعددة
سجل [i] .get ('ddd')(2) حذف البيانات:
var obj = grid.getSelectionModel (). getSelected () ؛ store.remove (OBJ) ؛ Grid.getView (). Refresh () ؛
(3) الاستعلام
store.baseparams ['memid'] = fb.form.findfield ('memid'). getValue () ؛ store.baseparams ['start'] = 0 ؛ store.load () ؛(4) إضافة صف:
EXT يجلب البرنامج المساعد
يتطلب ملف rowexpander.js
var expant = new ext.ux.grid.rowexpander ({tpl: new ext.template ('<p> {address} </p>')}) ؛إضافة توسيع إلى أعمدة الشبكة ،
وأضف مكونات الإضافات: توسيع إلى سمة الشبكة