De nombreux internautes demandent comment implémenter EXTJS4.0 COMBOBOX. Heureusement, j'ai utilisé 3.x pour implémenter une liaison à trois niveaux, et maintenant j'utilise EXTJS4.0 pour réaliser le même effet de liaison. Une chose à noter est que le modèle: «local» dans 3.x est représenté par QueryMode: «local» dans extjs4.0, et le rechargement est utilisé lors du chargement des données dans 3.x, mais dans EXTJS4.0, la charge est utilisée pour obtenir des données. Comme indiqué dans la figure ci-dessous:
Section de code
Regardons d'abord le code HTML:
<html> <éad- head> <meta http-equiv = "content-type" contenu = "text / html; charset = utf-8" /><title> mhzg.net-city à trois niveaux instance </ title> <link rel = "Stylesheet" type = "text / css" href = "../../ Resources / css / ext-al.cs" href = "../ 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"> </cript> </ head> <body> </ body> </html>
C'est très simple, il charge le fichier CSS de base et le fichier JS et charge le fichier combobox.js personnalisé.
combobox.js:
Ext.Require ('ext. *'); Ext.onready (function () {// define combobox modelex.define ('state', {extend: 'ext.data.model', champs: [{type: 'int', name: 'id'}, {type: 'string', name: 'cname'}]}); // charge la source de données VarsOre = Name: 'Cname'}]}); // Fonctionnera la source de données VaROSE = CNAME '}]}); // Fonctionne la Sourage de données VaROSE = CNAME'}]}); // Fonctionnera la Sourage de données VaROSA Ext.create ('ext.data.store', {modèle: 'état', proxy: {type: 'ajax', url: 'city.asp? Act = Sheng & n =' + new Date (). GetTime () + ''}, Autoload: TRUE, Remotesort: TRUE}); Modèle: 'State', Proxy: {Type: 'Ajax', URL: 'City.asp? Act = Shi & n =' + New Date (). GetTime () + ''}, Autoload: False, Remotesort: true}); 'Ajax', URL: 'City.asp? Act = Qu & n =' + new Date (). GetTime () + ''}, Autoload: False, Remotesort: True}); 80 ', bodystyle: "Padding: 45px 15px 15px 15px;", par défaut: {AutoScroll: true, bodypadding: 10}, articles: [{xtype: "combo", nom:' Sheng ', id:' sheng ', fieldLabel:' select province ',', 'cname', valuefiel QueryMode: 'local', selectOnfocus: true, Forceselection: true, allowblank: false, modifiable: true, vidext: 's'il vous plaît sélectionner la province', vierge: 's'il vous plaît sélectionnez la province', les auditeurs: {select: function (combo, var parent = ext .get. Ext.getcmp ("qu"); Nom: 'shi', id: 'shi', fieldLabel: 'Select City', DisplayField: 'Cname', ValueField: 'Id', Store: Store1, TriggerAction: 'All', QueryMode: 'Local', SelectOnfocus: True, Forceselection Record, index) {try {// userAdd = Record.data.name; }, {xtype: "combo", nom: 'qu', id: 'qu', fieldLabel: 's de sélection aire', displayfield: 'cname', valuefield: 'id', store: store2, triggerAction: 'all', queryMode: 'local', selectonfocus: trgernaction: ', true, allowblank: false, modifiable: true, tindex zone', } ] })});Dans le code ci-dessus, si la source de données du magasin est directement définie dans ComboBox, cette situation se produira, c'est-à-dire lorsque la première province est sélectionnée et que la deuxième ville est cliquée, elle clignote puis cliquez, et que les données de la ville apparaîtront. Pour résoudre cette situation, nous devons d'abord définir les sources de données des provinces, des villes et des districts. Ensuite, lorsque vous cliquez à nouveau, la situation ci-dessus ne se produira pas.
Dans le code, utilisez le magasin comme données et définissez son Autoload sur true. Ensuite, lorsque la page est chargée pour la première fois, les données des enregistrées seront automatiquement chargées, puis la sélection d'écoute est ajoutée à la province et à la ville. La fonction est que lorsque vous cliquez sur la province, vous devez effacer les données de la ville et du district et charger les données correspondantes à la source de données de la ville en fonction de la valeur actuellement sélectionnée. Bien sûr, les principes de Store1 et Store2 sont les mêmes.
Enfin, le serveur doit rechercher et renvoyer les données correctes en fonction de la valeur passée. Il n'y a pas de données de requête de la base de données ici, mais simplement en écrivant du code de test. Je crois qu'il n'y a aucun problème avec le code EXTJS, il n'est donc pas très important pour le serveur de renvoyer des données.
City.asp:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%><% Response.ContentType = "text/html" Response.Charset = "UTF-8"%><% Dim act:act = Request("act") Dim param : param = Request("param") If act = "sheng" Then Response.Write("[") Response.Write("{""cname"":""Beijing City "," id "": "" 110000 "},") Response.write ("{" "Cname" ":" "Inner Mongolia Autonomous Region", "" id "": "" 150000 "}") Response.write ("]") end if if Act = "shi" alors si param = "110000" alors réponse.write ("[") Response.Write ("{" "Cname" "" ":" "District au niveau de la ville", "" id "": "" 110100 "},") Réponse.Write ("{" "" CNAME """"mée"" le plancheuse aller "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""." "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""." "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ". "" "" "" "" "" "" "" "" "" "" param = "150000" puis réponse.write ("[") réponse.write ("{" "cname" ":" "hohhot ville" "," id "": "" 150100 "},") Response.write ("{" "cname" "": "" Baotou City "", "" ":" 150200 "}") Réponse.write. "] = "Qu" puis si param = "110100" alors réponse.write ("[") réponse.write ("{" "cname" ":" "Chaoyang District", "" id "": "" 110101 "},") Response.write ("{" "Cname" ":" "Changping District", "id" ":" "110102"} ") Réponse." = "110200" puis réponse.write ("[") réponse.write ("{" "cname" ":" "Miyun County", "id" ":" "110201"}, ") Response.write (" {"" Cname "": "" Fangshan County "," id "": "" 110202 "}") Réponse.Write. "150100" puis réponse.write ("[") réponse.write ("{" "cname" "": "" Ruibin District "," id "": "" 150101 "},") Response.write ("{" "cname" "" ":" "New City District", "id" ":" "150102"} ") Réponse.Write ("] ") are Réponse.write ("[") réponse.write ("{" "cname" ":" "Qingshan District", "" id "": "" 150201 "},") Response.write ("{" "cname" "": "" Donghe District "," id "": "" 150202 "}") Réponse.Write ("]") terminer si le%> ENDRICe qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.