Banyak netizen bertanya bagaimana mengimplementasikan EXTJS4.0 ComboBox. Untungnya, saya menggunakan 3.x untuk mengimplementasikan keterkaitan tiga tingkat, dan sekarang saya menggunakan EXTJS4.0 untuk mencapai efek hubungan yang sama. Satu hal yang perlu diperhatikan adalah bahwa model: 'lokal' dalam 3.x diwakili oleh QueryMode: 'Lokal' di extjs4.0, dan muat ulang digunakan saat memuat data dalam 3.x, tetapi di extjs4.0, beban digunakan untuk mendapatkan data. Seperti yang ditunjukkan pada gambar di bawah ini:
Bagian Kode
Mari kita lihat kode HTML terlebih dahulu:
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8" /><title> mhzg.net-city instance tautan tiga tingkat </iteme> <tautan rel = "cangkir" type = "css" href = ".." type = "text/javascript" src = "../../ bootstrap.js"> </script> <script type = "text/javascript" src = "../../ locale/ext-lang-zh_cn.js"> </script> <script = "text/Javascript" src = "comboBox.js"> </script> </head> <body> </body> </html>
Ini sangat sederhana, memuat file CSS dasar dan file JS, dan memuat file comboBoBox.js yang disesuaikan.
Combobox.js:
Ext.require ('ext.*'); Ext.onready (function () {// define comboBox modelext.define ('state', {extand: 'ext.data.model', bidang: [{type: 'int', name: 'id'}, {type: 'string', name: 'cname'} {} {{type ', name:' cname ', cname', cname: 'cname', cname: Ext.create ('ext.data.store', {model: 'state', proxy: {type: 'ajax', url: 'city.asp? Act = sheng & n ='+new Date (). GetTime ()+'}, autoload: true, remotesort: true}); Load varor. 'State', proxy: {type: 'ajax', url: 'city.asp? Act = shi & n ='+new date (). GetTime ()+''}, autoload: false, remoteSort: true}); 'City.asp? Act = qu & n ='+Tanggal baru (). GetTime ()+''}, Autoload: False, Remotesort: True}); 45px 15px 15px 15px; ", default: {autoscroll: true, bodypadding: 10}, item: [{xtype:" combo ", name: 'sheng', id: 'sheng', fieldlabel: 'pilih provinsi', displayfield: 'CNAME', valuefield: 'id', quiger: quigger: quigger: quigger: quiger: quiger: quiger: query: quaryy: quaryy: quyery: allame ', valuefield:' id ', quiger: quigger: quigger: quigger: quigger: quigger: quigger: quiger: quyery: all - SelectOnfocus: True, Forceselection: True, AllowBlank: False, Edited: True, EmptyText: 'Harap Pilih Provinsi', BlankText: 'Harap Pilih Provinsi', Pendengar: {Select: Function (Combo, Record, Index) {Coba {// UserAdd = Record.data.name; Parent.clearValue (); fieldLabel:'select city', displayField:'cname', valueField:'id', store:store1, triggerAction:'all', queryMode: 'local', selectOnFocus:true, forceSelection: true, allowBlank:false, editable: true, emptyText:'Please select city', blankText : 'Please select city', listeners:{ select:function(combo, record,index){ try{ // UserAdd = Record.data.name; xtype:"combo", name:'qu', id : 'qu', fieldLabel:'s selection area', displayField:'cname', valueField:'id', store:store2, triggerAction:'all', queryMode: 'local', selectOnFocus:true, forceSelection: true, allowBlank:false, editable: true, emptyText:'Please select area', blankText : 'Please select area', }]})});Dalam kode di atas, jika sumber data toko didefinisikan secara langsung dalam ComboBox, situasi ini akan terjadi, yaitu, ketika provinsi pertama dipilih dan kota kedua diklik, akan berkedip dan kemudian mengklik, dan data kota akan muncul. Untuk menyelesaikan situasi ini, pertama -tama kita harus mendefinisikan sumber data provinsi, kota, dan kabupaten. Kemudian ketika Anda mengklik lagi, situasi di atas tidak akan terjadi.
Dalam kode, gunakan toko sebagai data, dan atur autoloadnya ke True. Kemudian ketika halaman dimuat untuk pertama kalinya, data dari yang disimpan akan dimuat secara otomatis, dan kemudian select listening ditambahkan ke provinsi dan kota. Fungsinya adalah bahwa ketika Anda mengklik provinsi, Anda harus menghapus data kota dan kabupaten, dan memuat data yang sesuai ke sumber data kota sesuai dengan nilai yang saat ini dipilih. Tentu saja, prinsip -prinsip Store1 dan Store2 adalah sama.
Akhirnya, server perlu mencari dan mengembalikan data yang benar berdasarkan nilai yang dilewati. Tidak ada data kueri dari database di sini, tetapi cukup menulis beberapa kode tes. Saya percaya bahwa tidak ada masalah dengan kode EXTJS, jadi bukan hal yang sangat penting bagi server untuk mengembalikan data.
City.asp:
<%@Language = "vbscript" codepage = "65001"%> <%response.contenttype = "text/html" response.charset = "utf-8"%> <%redup bertindak: act = request ("act") redup: param = request ("param") if act = "sheng" lalu response. "": ":": ") [" wrame. " City "," Id "": "" 110000 "},") Response.write ("{" "cname" ":" "Wilayah otonom Mongolia dalam", "" id "": "" 150000 "}") respons.write ("]") berakhir jika ACT = "SHI" Lalu jika Param = "110000" itu respons.) Response.write ("{" "cname" "" "": "" City-Level District "," "Id" ":" "110100"}, ")) Response.write ("{" "cname" """"""""333333333333 membuatk "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "BANY" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "BANY "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "BANY" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "BANY "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "BANY" "" "" "" "" "" "" "" "" "" "" "" "" "" CHINTS "" "" "" "" "" "" "" "" "" "" "" "" "" AwAnf param = "150000" Lalu response.write ("[") response.write ("{" "cname" ":" "Hohhot City" "," id "": "" 150100 "},") response.write ("{" "cname" ")" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" = "qu" lalu jika param = "110100" Lalu response.write ("[") response.write ("{" "cname" ":" "Chaoyang District", "" id "": "" 110101 "},") "] (" {"" CNAME "": "" Distrik Changping "," "" ":" ":" "110200" lalu respons.write ("[") response.write ("{" "cname" ":" "Miyun County", "id" ":" "110201"}, ") response.write (" {"" cname ""}}}}} {{"{" {"{" {"{" ") (" Then Response.Write("[") Response.Write("{""cname""":""Ruibin District","id"":""150101"},") Response.Write("{""cname""":""New City District","id"":""150102"}") Response.Write("]") ElseIf param = "150200" Then Response.write ("[") response.write ("{" "cname" ":" "Qingshan District", "" id "": "" 150201 "},") response.write ("{" "CNAME" "": "" DONGHE DISTRIK "," ID "": "" "150202") Response.)Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.