ชาวเน็ตหลายคนกำลังถามวิธีการใช้ extjs4.0 combobox โชคดีที่ฉันใช้ 3.x เพื่อใช้การเชื่อมโยงสามระดับและตอนนี้ฉันใช้ extjs4.0 เพื่อให้ได้เอฟเฟกต์การเชื่อมโยงเดียวกัน สิ่งหนึ่งที่ควรทราบคือโมเดล: 'local' ใน 3.x แสดงโดย queryMode: 'local' ใน extjs4.0 และใช้โหลดซ้ำเมื่อโหลดข้อมูลใน 3.x แต่ใน extjs4.0 ใช้โหลดเพื่อรับข้อมูล ดังที่แสดงในรูปด้านล่าง:
ส่วนรหัส
มาดูรหัส HTML ก่อน:
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8" /> <title>mhzg.net-city อินสแตนซ์สามระดับ </title> type = "text/javascript" src = "../../ bootstrap.js"> </script> <script type = "text/javascript" src = "../../ locale/ext-lang-zh_cn.js"> </script> <script type = "text/javascript" src = "combobox.js"> </script> </head> <body> </body> </html>
มันง่ายมากมันโหลดไฟล์ CSS พื้นฐานและไฟล์ JS และโหลดไฟล์ combobox.js ที่กำหนดเอง
combobox.js:
ext.require ('ext.*'); ext.onready (function () {// define comboBox modelext.define ('state', {ขยาย: 'ext.data.model', ฟิลด์: [{ประเภท: 'int', ชื่อ: ext.create ('ext.data.store', {model: 'state', proxy: {type: 'ajax', url: 'city.asp? act = sheng & n ='+วันที่ใหม่ (). getTime ()+'', autoLoad: จริง โมเดล: 'state', proxy: {type: 'ajax', url: 'city.asp? act = shi & n ='+วันที่ใหม่ (). getTime ()+''}, autoload: false, remotesort: true}); url: 'city.asp? act = qu & n ='+วันที่ใหม่ (). getTime ()+''}, autoload: false, remotesort: true}); "การเติม: 45px 15px 15px 15px;", ค่าเริ่มต้น: {autoscroll: จริง, bodypadding: 10}, รายการ: [{xtype: "คอมโบ", ชื่อ: 'Sheng', id: 'Sheng', Fieldlabel: SelectOnFocus: จริง, forceselection: จริง, allowblank: เท็จ, แก้ไขได้: จริง, emporttext: 'โปรดเลือกจังหวัด', blanktext: 'โปรดเลือกจังหวัด', ผู้ฟัง: {select: function (คอมโบ, บันทึก, ดัชนี) {ลอง {// useradd = record.data.name; parent.clearvalue (); FieldLabel: 'Select City', DisplayField: 'CNAME', ValueField: 'ID', Store: Store1, TriggerAction: 'All', QueryMode: 'Local', SelectOnFocus: จริง, forceselection: true, leventblank: false, redable = record.data.name; xtype: "คอมโบ", ชื่อ: 'qu', id: 'qu', fieldlabel: 's พื้นที่การเลือก', displayfield: 'cname', valuefield: 'id', store: store2, triggerAction: 'all', queryMode: 'local' -ในรหัสข้างต้นหากแหล่งข้อมูลร้านค้าถูกกำหนดโดยตรงใน Combobox สถานการณ์นี้จะเกิดขึ้นนั่นคือเมื่อมีการเลือกจังหวัดแรกและเมืองที่สองถูกคลิกมันจะกะพริบแล้วคลิกและข้อมูลเมืองจะปรากฏขึ้น ในการแก้สถานการณ์นี้ก่อนอื่นเราต้องกำหนดแหล่งข้อมูลของจังหวัดเมืองและเขต จากนั้นเมื่อคุณคลิกอีกครั้งสถานการณ์ข้างต้นจะไม่เกิดขึ้น
ในรหัสให้ใช้ร้านค้าเป็นข้อมูลและตั้งค่าอัตโนมัติเป็น TRUE จากนั้นเมื่อโหลดหน้าเป็นครั้งแรกข้อมูลของผู้บันทึกจะถูกโหลดโดยอัตโนมัติจากนั้นเลือกการฟังการฟังจะถูกเพิ่มเข้าไปในจังหวัดและเมือง ฟังก์ชั่นคือเมื่อคุณคลิกที่จังหวัดคุณต้องล้างข้อมูลของเมืองและอำเภอและโหลดข้อมูลที่เกี่ยวข้องลงในแหล่งข้อมูลของเมืองตามค่าที่เลือกในปัจจุบัน แน่นอนหลักการของ Store1 และ Store2 นั้นเหมือนกัน
ในที่สุดเซิร์ฟเวอร์จำเป็นต้องค้นหาและส่งคืนข้อมูลที่ถูกต้องตามค่าที่ผ่าน ไม่มีข้อมูลการสืบค้นจากฐานข้อมูลที่นี่ แต่เพียงแค่เขียนรหัสทดสอบ ฉันเชื่อว่าไม่มีปัญหากับรหัส extjs ดังนั้นจึงไม่ใช่สิ่งที่สำคัญมากสำหรับเซิร์ฟเวอร์ที่จะส่งคืนข้อมูล
City.asp:
<%@language = "vbscript" codePage = "65001"%> <%response.contentType = "text/html" response.charset = "utf-8"%> <%dim act: act = "act") dim param: param = คำขอ ("param") City "," id "": "" 110000 "},") response.write ("{" "cname" ":" "ภายในเขตปกครองตนเองมองโกเลียภายใน", "" id ":" "150000"} ") Response.write ("{" "cname" "" ":" "เขตเมืองระดับ", "" id "": "" 110100 "},") response.write ("{" "cname """"งคำตอบ - - - param = "150000" จากนั้น response.write ("[") response.write ("{" "cname" ":" "Hohhot City" "," id "": "" 150100 "},") Response.write ("{" "cname" = "qu" จากนั้นถ้า param = "110100" จากนั้น response.write ("[") response.write ("{" "cname" ":" "Chaoyang District", "" id "": "" 110101 "},") การตอบสนอง ("{" "cname": "" = "110200" จากนั้น Response.write ("[") Response.write ("{" "cname" ":" "Miyun County", "id" ":" "110201"}, ") Response.write (" {"" cname "": "Fangshan County" "150100" จากนั้น Response.write ("[") Response.write ("{" "cname" "": "" Ruibin District "," id "": "" 150101 "},") response.write ("{" "cname" ":" Response.write ("[") Response.write ("{" "cname" ":" "Qingshan District", "" id "": "" 150201 "},") Response.write ("{" "cname" ":" Donghe "," id ":" 150202 "ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน