1 แผงกริดที่ง่ายที่สุด
Grid Panel เป็นหนึ่งในส่วนหลักของ extjs และข้อมูลสามารถแสดงเรียงลำดับจัดกลุ่มและแก้ไขผ่านแผงกริด โมเดลและร้านค้าเป็นแกนหลักของข้อมูลการประมวลผลแผงกริดและแผงกริดแต่ละแผงจะต้องตั้งค่าโมเดลและการจัดเก็บ ในการสร้างแผงกริดคุณต้องกำหนดโมเดลก่อน แบบจำลองรวมถึงฟิลด์ทั้งหมดที่แผงกริดจำเป็นต้องแสดงซึ่งเทียบเท่ากับการรวบรวมฟิลด์ตารางในฐานข้อมูล ร้านค้าสามารถถือได้ว่าเป็นชุดข้อมูลแถวหรือชุดของอินสแตนซ์ของโมเดล แต่ละร้านมีอินสแตนซ์แบบจำลองหนึ่งอินสแตนซ์และข้อมูลที่แสดงโดยแผงกริดจะถูกเก็บไว้ในร้านค้า แผงกริดจะได้รับข้อมูลผ่านร้านค้าและแสดงในขณะที่ร้านค้าอ่านและบันทึกข้อมูลผ่านพร็อกซี
ด้านล่างนี้เป็นแผงกริดเพื่อแสดงข้อมูลพื้นฐานของผู้ใช้รวมถึงชื่อผู้ใช้อีเมลหมายเลขโทรศัพท์มือถือ (ชื่ออีเมลโทรศัพท์) และสร้างรุ่นผู้ใช้ก่อน (รุ่นผู้ใช้)
ext.define ('ผู้ใช้', {ขยาย: 'ext.data.model', ฟิลด์: ['ชื่อ', 'อีเมล', 'โทรศัพท์']});ถัดไปสร้างร้านค้าซึ่งเป็นคอลเลกชันของผู้ใช้รวมถึงอินสแตนซ์ผู้ใช้หลายราย
var userstore = ext.create ('ext.data.store', {รุ่น: 'ผู้ใช้', // ข้อมูลรุ่นผู้ใช้เพิ่งสร้างขึ้น: [{ชื่อ: 'lisa', อีเมล: '[email protected]', โทรศัพท์: '555-111-1224' {ชื่อ: 'โฮเมอร์', อีเมล: '[email protected]', โทรศัพท์: '555-222-1244'}, {ชื่อ: 'Marge', อีเมล: '[email protected]', โทรศัพท์: '555-222-1254'}]});หลังจากสร้างทั้งแบบจำลองและร้านค้าคุณสามารถสร้างแผงกริดได้
ext.create ('ext.grid.panel', {renderto: ext.getbody (), ร้านค้า: userstore, // ผูกความกว้างของร้านค้า: 400, ความสูง: 200, ชื่อเรื่อง: 'ผู้ใช้แอปพลิเคชัน', คอลัมน์: [text: 'ชื่อ', ความกว้าง: 100, การจัดเรียง: เท็จ รุ่น}, {text: 'ที่อยู่อีเมล', ความกว้าง: 150, dataIndex: 'อีเมล', ซ่อน: true}, {text: 'หมายเลขโทรศัพท์', Flex: 1, dataIndex: 'โทรศัพท์'}]});แผงกริดผู้ใช้สุดท้ายจะแสดงในรูป
2 การจัดกลุ่มข้อมูลแผงกริด (การจัดกลุ่ม)
ตราบใดที่คุณสมบัติ Groupfield ถูกตั้งค่าในร้านค้าข้อมูลที่แสดงโดยแผงกริดสามารถจัดกลุ่มได้ สมมติว่า บริษัท มีพนักงานจำนวนมากและจำเป็นต้องจัดกลุ่มพนักงานของ บริษัท โดยแผนกในแผงกริด ก่อนอื่นตั้งค่าทรัพย์สิน Groupfield ไปยังแผนกในร้านค้า
ext.create ('ext.data.store', {รุ่น: 'พนักงาน', ข้อมูล: ... , Groupfield: 'แผนก' // ตั้งค่าข้อมูลที่จัดกลุ่มโดยแผนก});จากนั้นเพิ่มคุณสมบัติการจัดกลุ่มลงในแผงกริดเพื่อให้ได้เอฟเฟกต์การแสดงผลกลุ่ม
ext.create ('ext.grid.panel', {... คุณสมบัติ: [{ftype: 'การจัดกลุ่ม'}]});เอฟเฟกต์การแสดงผลกลุ่มจะแสดงในรูปด้านล่าง คลิกที่นี่เพื่อดูรหัสการแสดงผลกลุ่มอย่างเป็นทางการ
จอแสดงผลการแบ่งหน้าของแผงกริด 3
เมื่อมีข้อมูลเพิ่มเติมและหน้าเว็บเพิ่มเติมที่จะแสดงข้อมูลจะต้องแสดงเพจ แผงกริดสามารถรับรู้การแสดงการปนเปื้อนผ่านสองวิธี: แถบเครื่องมือเพจและเครื่องเลื่อนเพจ แถบเครื่องมือเพจมีปุ่มหน้าก่อนหน้า/หน้าถัดไป Paging Scroller โหลดข้อมูลแบบไดนามิกเมื่อแผงกริดเลื่อนไปที่ด้านล่าง
ในการใช้การแสดงการปนเปื้อนคุณต้องตั้งค่าร้านค้าเพื่อรองรับการปนเปื้อนก่อน ตั้งค่าหน้าในร้าน หน้าเริ่มต้นคือ 25 กำหนดจำนวนข้อมูลทั้งหมดในเครื่องอ่านทั้งหมดรวมและปลั๊กอินเพจพาย Pagins ตามหน้าเว็บและ TotalProperty รหัสต่อไปนี้ถูกตั้งค่าเป็น 4 และได้รับ TotalProperty จากข้อมูล JSON ที่ส่งคืน
ext.create ('ext.data.store', {รุ่น: 'ผู้ใช้', autoload: จริง, หน้า: 4, // ตั้งค่าข้อมูลที่แสดงต่อหน้าพร็อกซี: {ประเภท: 'ajax', url: 'data.json' แอตทริบิวต์ที่เกี่ยวข้องของ JSON: 'Total' // ปริมาณข้อมูลทั้งหมด}}});สมมติว่ารูปแบบข้อมูล JSON มีดังนี้
{"ความสำเร็จ": จริง, "ทั้งหมด": 12, "ผู้ใช้": [{"ชื่อ": "lisa", "อีเมล": "[email protected]", "โทรศัพท์": "555-111-1224"}, {"ชื่อ": "Bart", "อีเมล": "home", "อีเมล": "[email protected]", "โทรศัพท์": "555-222-1244"}, {"ชื่อ": "Marge", "อีเมล": "[email protected]", "โทรศัพท์": "555-222-1254"เพจของร้านค้าได้รับการตั้งค่าแล้ว ฟังก์ชั่นการเพจเพจเพจเพจเพิงถูกนำมาใช้ในแผงกริด
ext.create ('ext.grid.panel', {store: userstore, คอลัมน์: ... , dockedItems: [{xtype: 'pagingtoolbar', // เพิ่มร้านขายเครื่องมือเพจ: userstore, // ตั้งค่าบาร์เอฟเฟกต์การเพจของแถบเครื่องมือเพจแสดงขึ้นในรูปด้านล่าง คลิกที่นี่เพื่อดูรหัสฟังก์ชั่นแถบเครื่องมือเพจเพงอย่างเป็นทางการ
การใช้งานเพจของเครื่องเลื่อนเพจนั้นค่อนข้างง่าย เพียงตั้งค่ารหัสต่อไปนี้ในแผงกริด คลิกที่นี่เพื่อดูรหัสฟังก์ชั่น Paging Paging Paging อย่างเป็นทางการ
ext.create ('ext.grid.panel', {// ใช้เครื่องเลื่อนเพจปลั๊กอินเพจปลั๊กอิน VerticalScroller: '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 เพียงแค่มี cm autowidth: true columnlines เอฟเฟกต์ภาพเคลื่อนไหว (ค่าเริ่มต้นเป็นจริงเมื่อมี class ext.fx) displayInfo: จริง, // เอกสารแหล่งที่มา displayInfo: จริง, // documentmsg: 'แสดงระเบียนจาก {0} ถึง {1}, ทั้งหมด {2}', emgthymsg: 'ไม่มีบันทึก'}), tbar: [{text: 'query', icon: '/การค้า/ภาพ Handler: function () {win.show ();}}}) // ********************************************* // pagingtoolbar paging // ส่งไปยังเซิร์ฟเวอร์ข้อมูลเริ่มสอบถามสถานที่สอบถาม จำกัด จำนวนรายการในการสอบถาม // การเรียงลำดับ // การเรียงลำดับเซิร์ฟเวอร์, dir // ******************************************************************* ext.grid.Rownumberer (), {ส่วนหัว: "รหัสลูกค้า", ความกว้าง: 50, เรียงลำดับได้: จริง, dataineDex: 'memid'}, {ส่วนหัว: "ชื่อลูกค้า", ความกว้าง: 75, เรียงลำดับ: true, dataIndex: 'memname'}, {header: Renderer: ฟังก์ชั่น (v) {return (v == '1')? '<img src = "images/user_suit.png">': '<img src = "images/user_female.png">';}} DataIndex: 'kd_time'}]); /******************************************************************************************************************************************************************** // var modified = storeedit.modified.slice (0); // ext.each (แก้ไข, ฟังก์ชั่น (m) {Alert (m.data.id); // ข้อมูลอยู่ใน M.Data และ id คือชื่อฟิลด์}) // รับ grid data var selmodel = grid.getSelectionModel (); รับโหมดการเลือก VAR Record; if (! selmodel.hasselection ()) {ext.msg.alert ('คำเตือน', 'โปรดเลือกแถวที่จะแก้ไข!'); กลับ; } selmodel.getSelections (). ความยาว; // จำนวนของ ROWS ที่เลือก = 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 expand = new ext.ux.grid.rowexpander ({tpl: ใหม่ ext.template ('<p> {ที่อยู่} </p>')});เพิ่มขยายไปยังคอลัมน์กริด
และเพิ่มปลั๊กอิน: ขยายไปยังแอตทริบิวต์กริด