Viele Internetnutzer fragen, wie sie extjs4.0 combobox implementieren können. Glücklicherweise habe ich 3.x verwendet, um eine dreistufige Verknüpfung zu implementieren, und jetzt verwende ich ExtJS4.0, um den gleichen Verknüpfungseffekt zu erzielen. Eine Sache, die zu beachten ist, dass das Modell: 'Lokal' in 3.x durch QueryMode dargestellt wird: 'Lokal' in extjs4.0, und Reload wird beim Laden von Daten in 3.x verwendet, aber in ExtJS4.0 wird Last verwendet, um Daten zu erhalten. Wie in der Abbildung unten gezeigt:
Codeabschnitt
Schauen wir uns zuerst den HTML -Code an:
<html> <head> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8" /><Title>Mhzg.net-City Drei-Level-Verknüpfungsinstanz </title> <link rel = "stylesHeet" type "text/css" href = ". type = "text/javaScript" src = "../../ bootstrap.js"> </script> <script type = "text/javascript" src = "../../ locale/ext-lang-zh_cn.js"> </script> <script Typ = "text/javascript" " src = "combobox.js"> </script> </head> <body> </body> </html>
Es ist sehr einfach, lädt die grundlegende CSS -Datei und die JS -Datei und die benutzerdefinierte Combobox.js -Datei.
combobox.js:
Ext.Require ('ext.*'); Ext.onReady (function () {// combobox modelext.define ('Zustand', {extend: 'ext.data.model', Felder: [{type: 'int', name: 'id'}, {type: 'String:', name: 'cname'}]}; Ext.create ('ext.data.store', {modell: 'state', proxy: {type: 'ajax', url: 'City.asp? Act = sheng & n ='+new Date (). Modell: 'State', Proxy: {type: 'ajax', url: 'City.asp? ACT = SHI & N ='+New Date (). GetTime ()+''}, autoload: false, remoteSort: true}); URL: 'City.asp? Act = Qu & N ='+New Date (). bodyStyle: "padding: 45px 15px 15px 15px;", defaults :{ autoScroll: true, bodyPadding: 10 }, items:[{ xtype:"combo", name:'sheng', id : 'sheng', fieldLabel:'select province', displayField:'cname', valueField:'id', store:store, triggerAction:'all', QueryMode: 'Local', selectonfocus: true, kräftig: true, duldblank: false, editable: true, leereText: 'bitte provinz', blankText: 'bitte provinz', hörer: {select: function (combo, index) {try {// userAdd = var staatsname; Ext.getCMP ("qu"); Name: 'Shi', ID: 'Shi', FieldLabel: 'Select City', DisplayField: 'Cname', ValueField: 'ID', Store: Store1, TriggerAction: 'All', QueryMode: 'Local', SelectonFocus: True, True, ForcySelektion: TRUE: Wählen Sie: Funktion (Combo, Index) {try {// userAdd = record.data.name; }}}}}. Bereich ', BlankText:' Bitte auswählen Bereich ',}]})});Wenn in dem obigen Code die Store -Datenquelle direkt in Combobox definiert ist, tritt diese Situation auf, dh wenn die erste Provinz ausgewählt ist und die zweite Stadt geklickt wird, blinkt sie und klickt dann und die Stadtdaten werden angezeigt. Um diese Situation zu lösen, müssen wir zunächst die Datenquellen von Provinzen, Städten und Distrikten definieren. Wenn Sie dann erneut klicken, tritt die obige Situation nicht auf.
Verwenden Sie im Code den Speicher als Daten und setzen Sie seine Autoload auf true. Wenn dann die Seite zum ersten Mal geladen wird, werden die Daten des gespeicherten automatisch geladen, und dann wird die Hörauswahl der Provinz und der Stadt hinzugefügt. Die Funktion ist, dass Sie, wenn Sie auf die Provinz klicken, die Daten der Stadt und des Distrikts löschen und die entsprechenden Daten in die Datenquelle der Stadt gemäß dem aktuell ausgewählten Wert laden müssen. Natürlich sind die Prinzipien von Store1 und Store2 gleich.
Schließlich muss der Server die korrekten Daten basierend auf dem bestandenen Wert durchsuchen und zurückgeben. Hier gibt es keine Abfragedaten aus der Datenbank, sondern schriftlich einfach einen Testcode. Ich glaube, dass es kein Problem mit dem EXTJS -Code gibt, daher ist es für den Server keine sehr wichtige Sache, Daten zurückzugeben.
City.asp:
<%@Sprache = "vbScript" Codepage = "65001"%> <%Antwort Stadt "," id "": "" 110000 "},") Antwort.Write ("{" "cname": "" Innere Mongolien autonome Region "," id "": "" 150000 "}") Antwort.write ("]"), wenn Act = "Shi" dann, wenn param = "110000" dann "dann.Write.Write.Write.Write.Write (Write" (Write.Write (". Response.write ("{" "cname" "" ":" "Distrikt auf Stadtebene", "ID": "" 110100 "},") Reaktion.Write ("{" "cname """"""" Sog """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" param = "150000" dann response.write ("[") response.write ("{" "cname": "" hohhot city "", "id": "" 150100 "},") reaktion. "qu" dann if param = "110100", dann response.write ("[") response.write ("{" "cname": "" Chaoyang Distrikt "," id "": "" 110101 "},") reaktion.write ("{" cname ":": ":" Reaktion ". "110200" dann Antwort.Write ("[") response.write ("{" "cname": "" Miyun County "," ID ":" "110201"}, ") Antwort. Dann response.write ("[") response.write ("{" "cname" ":" ruibin district "," id ":" Response.write ("[") response.write ("{" "cname": "qingshan District", "id": "" 150201 "},") reaktion.write ("{" "cname" "": "" Donghe District "," Id ":": "150202"} ") Antwort.Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.