مقدمة لميزات الجداول في extjs
يتم تعريف الجدول بواسطة الفئة ext.grid.gridpanel ، الموروثة من ext.panel ، و Xtype هي الشبكة
يتم تعريف معلومات العمود للجدول بواسطة ext.grid.columnmodel
يتم تعريف تخزين بيانات الجدول بواسطة ext.data.store. وفقًا للبيانات التحليلية المختلفة ، يمكن تقسيم تخزين البيانات إلى الأنواع التالية:
Jsonstore ، Simplestore ، Groupingstore ...
عملية الكتابة الأساسية للجدول:
1. إنشاء نموذج عمود جدول
var cm = new ext.grid.columnmodel ({{header: "الدور '، dataindex:' rod '} ، {header:' level '، dataindex:' date '} ، {header:' create date '، dataindex:' createdate '، type:' renterer: ext. بيانات})؛2. إنشاء مجموعة بيانات
var data = [['Soldier' ، '7' ، '2011-07-2412: 34: 56'] ، ['General' ، '10' ، '2011-07-2412: 34: 56'] ،] ؛
3. قم بإنشاء متجر كائن تخزين البيانات ، والذي يحتوي على جزأين: الوكيل ، طريقة للحصول على البيانات ؛ القارئ ، الطريق لتحليل البيانات
يتم استخدام رسم خرائط ArrayReader لتعيين ترتيب الأعمدة
var store = new ext.data.store ({proxy: new ext.data.memoryproxy (data) ، reader: new ext.data.arrayReader ({} ، [{{name: 'dones' ، mapping: 1} ، {name: '{}} DateFormat: 'YM-DH: i: s'} // إنشاء عمود تاريخ وتنسيق العرض])}) ؛ store.load () ؛4. إنشاء Gridpanel ، وتجميع ColumnModel وتخزين
var grid = new ext.grid.gridpanel ({renderto: 'Grid' ، store: store ، cm: cm}) ؛بالإضافة إلى ذلك ، يمكنك استخدام ScriptTagproxy للحصول على بيانات عن بُعد ، كما هو موضح أدناه
var store = new ext.data.store ({proxy: new ext.data.scripttagproxy ({url: 'http: // ...'}) ، reader: new ext.data.arrayReader ({} ، [{name: "الدور '، mapping: 1} ، "الدور" ، الاتجاه: "ASC"} // قم بتعيين تسلسل الفرز الافتراضي ، ASC/DESC}) ؛الخصائص الشائعة للجداول
var grid = new ext.grid.gridpanel ({enableColumnMove: false ، // يُحظر على أعمدة السحب والإفلات تمكينها enablecolumnressize: false ، // تعطيل لتغيير عرض مخططات الأعمدة: store cm: cm: cm: cm: cm var cm = new ext.grid.columnmodel ({{header: 'st just' ، dataindex: 'role' ، width: 90 ، fortable: true} ، // width يحدد عرض العمود ، الافتراضي هو 100px ، tortable function {id: 'grade' ، header: 'level' ، dataind: ext.grid.gridpanel ({renderto: 'Grid' ، store: store ، cm: cm viewConfig: {// اسمحوا لكل عمود بملء FormFitfit: true} AutoExpandColumn: 'Grade' // تمديد العمود تلقائيًا ، يتم تعريف معرف العمود في العمود}) ؛عرض الجداول وضبط أنماط خاصة للجداول
ما عليك سوى إضافة سمة العارض إلى CM وإضافة وظيفة مخصصة لتقديم نمط المعلمات التي تم تمريرها (تم تمريرها تلقائيًا بواسطة Ext) ، أي تجميع أحداث استجابة HTML أو CSS أو JS المقابلة قبل إرجاع القيمة.
الدالة rendersex (value) {if (value == 'male') {return "<span style = 'color: blue ؛'> male </span> <img src = 'images/icon_male.png'/>" ؛ } آخر {return "<span style = 'color: red ؛'> female </span> <img src = 'images/icon_female.png'/>" ؛ }} var cm = new ext.grid.columnmodel ([{{header: 'id' ، dataindex: 'id'} ، {header: 'name' ، dataindex: 'name'} ، {header: 'sex' ، dataindex: 'sex' ، render: renders} ،]) ؛ ['2' ، 'kate' ، 'female']]] ؛ var store = new ext.data.store ({proxy: new ext.data.memoryproxy (data) ، reader: new ext.data.arrayReader ({} ، [{name: id '} ، {name: name'} ، {}) Grid = new ext.grid.gridpanel ({autoheight: true ، renderto: 'Grid' ، store: store ، cm: cm}) ؛عرض أرقام الأسطر تلقائيًا ، فقط قم بإنشاء Rownumberer عند إنشاء CM
var cm = new ext.grid.columnmodel ([new ext.grid.rownumberer () ، // show line number {header: 'id' ، dataindex: 'id'} ، {header: 'name' ، dataindex: 'name'} ، {header: 'sex' ، dataindex: 'sex'حذف الأعمدة
store.remove (store.getat (i)) ؛
تحديث الجدول
Grid.View.Refresh () ؛
إضافة خانة اختيار لجدول
بحاجة إلى استخدام checkboxseSeSeSteRymodel
يجب وضع SelectionModel SM في CM والجدول عند استخدامه
var sm = new ext.grid.checkboxsexionmodel () ؛ var cm = new ext.grid.columnmodel ([new ext.grid.rownumberer () ، sm ، {header: 'number' ، dataindex: 'id'} ، {header: 'name' ، dataindex: ['2' ، 'name2']]] ؛ var store = new ext.data.store ({proxy: new ext.data.memoryproxy (data) ، reader: new ext.data.arrayreader ({} ، [{name: 'id'} ، ext.grid.gridpanel ({autoheight: true ، renderto: 'Grid' ، store: store ، cm: cm ، sm: sm}) ؛يتم تحديد صف واحد فقط من خلال إعداد CrowselectionModel:
var grid = new ext.grid.gridpanel ({autoheight: true ، renderto: 'Grid' ، store: store ، cm: cm ، sm: new ext.grid.rowselectionModel ({singleselect: true})}) ؛استخدم نموذج تحديد للحصول على البيانات
Grid.on ('click' ، function () {var selections = grid.getSelectionModel (). getSeSelections () ؛ for (var i = 0 ؛ i <selects.length ؛ i ++) {var record = selections [i] ؛ ext.msg.alert (recor.get ("id") ؛}}) ؛عرض الجدول
من فكرة MVC ، ضوابط الجدول:
* ext.data.store يمكن اعتبارها نموذجًا
* ext.grid.gridpanel يمكن اعتبارها وحدة تحكم
* ext.grid.gridview يمكن النظر إليها على أنها عرض
* بشكل عام ، يتم إنشاء GridView تلقائيًا بواسطة Gridpanel. إذا كنت ترغب في تعيين خصائص GridView ، فيمكنك الحصول على مثيل العرض من خلال GetView () من ext.grid.gridpanel.
ext.get ('button1'). on ('click' ، function () {grid.getView (). scrolltotop () ؛ grid.getView ().استخدم Gridpanel's ViewConfig لتعيين معلمات التهيئة لشبكة GridView عند إنشاء جدول
var grid = new ext.grid.gridpanel ({الارتفاع: 100 ، العرض: 400 ، Renderto: 'Grid' ، المتجر: new ext.data.store ({autoload: true ، proxy: new ext.data.memoryproxy (data) ، ext.data ViewConfig: {ColumnStext: 'show column' ، // قم بتعيين نص موجه القائمة المنسدلة scrolloffset: 30 ، // قم بتعيين العرض المحجوز لكبار شريط التمرير على sortasctext اليمنى: 'AscText' ، // قم بتعيين نص موجه القائمة المنسدلة SortDesctext: "Ulder Order" ، // قم بتعيين القائمة المقدمة من القائمة المنسد.أضف شريط أدوات الترحيل إلى طاولة
* يمكنك استخدام خاصية BBAR لـ Gridpanel وإنشاء كائن شريط أدوات الترحيل Ext.PagingToolbar
* لاحظ أنه إذا تم تكوين شريط أدوات الترحيل ، فيجب تنفيذ STORE.LOAD () بعد إنشاء الجدول.
var grid = new ext.grid.gridpanel ({renderto: 'Grid' ، autoheight: true ، store: store ، cm: cm ، bbar: new ext.pagingtoolbar {2} '، فارغة msg: "لا سجل" // المعلومات المعروضة عند عدم وجود بيانات})}) ؛ store.load () ؛احصل على بيانات ترقيم الصفحات من البرنامج النصي الخلفي
استخدم httpproxy لتمرير الطلب ، واحصل على بيانات JSON الخاصة بالخادم ، وقم بتسليمه إلى JSonreader للتحليل
var cm = new ext.grid.columnmodel ([{{header: 'number' ، dataindex: 'id'} ، {header: 'name' ، dataindex: 'name'}]) ؛ var store = new ext.data.store ({proxy: new ext.data.htproxy ({url: 'page: ext.data.jsonreader ({totalProperty: 'TotalProperty' ، root: 'root'} ، [{name: 'id'} ، {name: 'name'}])}) ؛ var grid = new ext.grid.gridpanel ({renderto: 'grid' ، autoigh المتجر: المتجر ، CM: CM ، BBAR: New Ext.pagingToolbar ({pagesize: 10 ، store: store ، displayInfo: true ، displaymsg: 'عرض {0} إلى {1} السجلات/المجموع {2}' ، فارغة: "لا سجل"})}) ؛ store.load ({params: {start: 0 ، limit: 10}}) ؛إذا كنت تريد أن يظهر شريط أدوات ترقيم الصفحات في الجزء العلوي من الجدول ، فيمكنك إضافة شريط الأدوات باستخدام إعدادات خاصية Gridpanel TBAR.
اتركي توصيل البيانات التي تم إرجاعها
* تحتاج إلى تقديم ملف pingmemoryproxy.js ضمن الأمثلة/دليل المحطة في الصفحة
* استخدم pagingmemoryproxy لإعداد الوكيل
var store = new ext.data.store ({proxy: new ext.data.pagingmemoryproxy (data) ، reader: new ext.data.arrayreader ({{} ، [{name: 'id'} ، {name '} ، {name:' descn '}) store.load ({params: {start: 0 ، limit: 3}}) ؛استخدام المحرر مع التحكم في الجدول القابل للتحرير
خطوات لإنشاء محرر بسيط:
1. تحديد ColumnModel وأضف سمة المحرر إليه
var cm = new ext.grid.columnmodel ([{keader: 'number' ، dataindex: 'id' ، editor: new ext.grid.grideditor (new ext.form.textfield ({allowblank: false // non-inpate in textfield غير مسموح به})} ، ext.form.textfield ({allowblank: false}))}]) ؛2. قم بإعداد صفيف
var data = [['1' ، 'Jason'] ، ['2' ، 'Jay']] ؛
3. إنشاء ext.data.store ، تعيين وكيل الذاكرة ، وقم بتعيين ArrayReader لتحرير المصفوفات
var store = new ext.data.store ({proxy: new ext.data.memoryproxy (data) ، reader: new ext.data.arrayReader ({} ، [{name: 'id'} ، {name '}])}) ؛4. تحميل البيانات وإنشاء EditorGridpanel
store.load () ؛ var grid = new ext.grid.editorgridpanel ({autoheight: true ، renderto: 'Grid' ، store: store ، cm: cm}) ؛إضافة وحذف البيانات للجداول القابلة للتحرير
1. إنشاء مجموعة سجلات باستخدام السجل إنشاء طريقة MyRecord. MyRecord يعادل الفصل
var myrecord = ext.data.record.create ([{name: 'id' ، type: 'string'} ، {name: name '، type:' string '}]) ؛ store.load () ؛2. قم بإنشاء لوحة EditorGridpanel وإنشاء ext.toolbar في الممتلكات tbar
var grid = new ext.grid.editorgridpanel ({autoHeight: true ، renderto: 'Grid' ، store: store ، cm: cm ، tbar: new ext.toolbar (['-' ، {{id: means menudator text: 'add a row' Grid.stopediting (). إلى حذف؟ '-'])}) ؛حفظ النتائج المعدلة للجداول القابلة للتحرير
بناءً على المثال أعلاه ، أضف زر حفظ
النص: 'حفظ' ، المعالج: function () {var m = store.modified.slice (0) ؛ // احصل على البيانات المعدلة في المتجر لـ (var i = 0 ؛ i <m.length ؛ i ++) {// تحقق مما إذا كانت معلومات الجدول صحيحة وما إذا كانت تحتوي على سجلات var = m [i] ؛ var fields = record.fields.keys ؛ لـ (var j = 0 ؛ j <fields.length ؛ j ++) {var name = fields [j] ؛ var value = record.data [name] ؛ var colindex = cm.FindColumnIndex (name) ؛ var rowindex = store.indexofid (record.id) ؛ var editor = cm.getCellEditor (Colindex) .Field ؛ if (! editor.validatevalue (value)) {ext.msg.alert ('tip' ، 'يرجى التحقق مما إذا كانت البيانات التي تم إدخالها صحيحة!' ، function () {grid.startediting (rowindex ، colindex) ؛}) ؛ يعود؛ }}} var jsonarray = [] ؛ Ext.each (m ، function (item) {jsonarray.push (item.data) ؛ // ضع البيانات المعدلة في jsonarray}) ؛ ext.lib.ajax.request (// استخدم طلب ajax للإرسال إلى الخلفية 'post' ، 'save_data.jsp' ، {success: function (response) {// return ext.msg.alert "خادم خادم خطأ البيانات!") ؛بالإضافة إلى ذلك ، يمكن للمتجر تعيين العقار PrunemodifiedRecords: True. وبهذه الطريقة ، سيقوم المتجر تلقائيًا بمسح العلامة المعدلة في كل مرة يقوم فيها بإزالة العمليات أو التحميل ، والتي يمكنها تجنب ظاهرة تقديم جميع المعلومات المعدلة في المرة التالية التي يتم تقديمها.
الحد من نوع بيانات إدخال الجدول
NumberField
{header: 'id' ، dataindex: 'id' ، editor: new ext.grid.grideitor (new ext.form.numberfield ({// numberfield limits التي يمكن إدخالها فقط أرقام almotblank: false ، allownegative: false ، // لا يمكن إدخال minus sign maxvalue: 10})})}comboBox
var combodata = [[['0' ، 'java'] ، ['1' ، 'Android']] ؛ {header: 'combobox' ، dataindex: 'combo' ، editor: new ext.grid.griDiveitor (new Ext.form.combobox ({store: new ext.data.simplestor فارغة: "الرجاء تحديد" ، الوضع: "Local" ، TriggerAction: "All" ، ValueField: "Value" ، DisplayField: "Text" ، readonly: true})) ، العارض: الدالة (القيمة) {return combodata [value] [1] ؛ }}DateField
{header: 'date' ، dataindex: 'date' ، editor: new ext.grid.grideditor (new ext.dateffield ({format: 'ym-d' ، minvalue: '2011-07-24' ، upplaydays: [0 ، 6] ، disableddayStextext: "تحديد التاريخ بين الاثنين والسبت"}) ، }}استخدام PropertyGrid
إنه مكون نموذج متقدم أكثر ذكاءً تم تطويره على أساس المحرر
var grid = new ext.grid.propertygrid ({title: 'propertyGrid' ، autoheight: true ، width: 400 ، renderto: 'grid' ، viewConfig: {forcefit: true} ، source: {"string": }}) ؛كيفية تعطيل وظيفة تحرير PropertyGrid
Grid.On ('QuarnedIt' ، function (e) {e.Cancel = true ؛ return false ؛}) ؛احصل على قيمة وفقًا لاسم الجدول
Grid.Store.getById ('Jason'). get (value) ؛تنفيذ الجداول المتداخلة في extjs
لنرى التأثير أولاً:
الرمز كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3 content = "text/html ؛ charset = utf-8"/> <title> اختبار </title> <script type = "text/javaScript"> </script> <link rel = "stylesheet" type = "text/css" href = "lib/extjs/2_ 2_ css/css/ext-all. src = "lib/extjs/2_2/adapter/ext/ext-base.js"> </script> <script type = "text/javaScript" src = "lib/extjs/2_2/ext-all-debug.js src = "lib/extjs/2_2/source/locale/ext-lang-zh_cn.js"> </script> <script type = "text/javaScript" src = "lib/extjs/plus/rowexpander.js ["Lugreen" ، "Male" ، 26 ، [["Math" ، 100] ، ["Chinese" ، 150]]] ، ["Lisi" ، "Male" ، 25 ، [ ext.data.simplestore ({الحقول: ["الاسم" ، "الجنس" ، "العمر" ، "الصف"] ، البيانات: testData}) ؛ var expander = new ext.grid.rowexpander ({tpl: new Ext.xtemplate ('<viv> ،' '،' </div>)}}) ؛ // find Grid. var cm = new ext.grid.columnmodel ([{keader: "article" ، dataindex: 'class' ، width: 130 ، false: false ، false ، false ، resizable: true} ، {header: "score" ، dataindex: 'draded' ، width: 130 ، false: false ، ext.domquery.select ("div.detaildata") [0] ؛ ext.grid.checkboxsextionmodel ({singleselect: true}) ؛ 130 ، قابلة للإخفاء: false ، قابلة للفرز: false ، قابلة للإصلاح: صواب}]) ؛ ) ؛}) ؛ </script> <style type = "text/css">#div2 h2 {font-weight: 200 ؛ Font-Size: 12px ؛}.تم تصميم "rowexpander.js" المستخدمة في مثال extjs الرسمي.
هناك نصائحان يجب ملاحظتهما عند تنفيذ هذا الجدول المتداخل:
1. يمثل مصدر البيانات المقدم إلى مخزن البيانات في الجدول الخارجي البيانات في منطقة التفاصيل في شكل صفيف متداخل ، كما هو موضح في BOLD أدناه.
var testData = [["Lugreen" ، "Male" ، 26 ، [["Math" ، 100] ، ["Chinese" ، 150]] ، ["Lisi" ، "Male" ، 25 ، ["Math" ، 100] ، ["Chinese" ، 150]]] ، ["Zhangsan" ، "Male" ، ["MAMT" ، 120] ، 120]]
استخدم سمة JSON لكائن السجل في الصفيف للحصول على البيانات بالتفصيل
var data = r.json [3] ؛
2. أضف الجداول المتداخلة في حدث توسيع Rowexpander.