Muchos internautas preguntan cómo implementar EXTJS4.0 Combobox. Afortunadamente, utilicé 3.x para implementar un enlace de tres niveles, y ahora uso ExtJS4.0 para lograr el mismo efecto de enlace. Una cosa a tener en cuenta es que el modelo: 'local' en 3.x está representado por QueryMode: 'local' en extjs4.0, y la recarga se usa al cargar datos en 3.x, pero en extjs4.0, la carga se usa para obtener datos. Como se muestra en la figura a continuación:
Sección del código
Veamos primero el código HTML:
<html> <fead> <meta http-equiv = "content-type" content = "text/html; charset = utf-8" /><title>mhzg.net-city instancia de enlace de tres niveles </title> <link rel = "stylesheet" type = "text/css" href = "../../ recursos/css/ext-todos type = "text/javaScript" src = "../../ bootstrap.js"> </script> <script type = "text/javaScript" src = "../../ loce/ext-lang-zh_cn.js"> </script> <script type = "text/javaScript" src = "comboBox.js"> </script> </head> <body> </body> </html>
Es muy simple, carga el archivo CSS básico y el archivo JS, y carga el archivo ComboBox.js personalizado.
Combobox.js:
Ext.Require ('ext.*'); Ext.onready (function () {// define comboBox modelext.define ('state', {extend: 'ext.data.model, fields: [{type:' int ', name:' id '}, {type:' string ', name:' cName '}]}); / /cargue el origen de datos. Ext.create ('ext.data.store', {modelo: 'state', proxy: {type: 'ajax', url: 'city.asp? Act = sheng & n ='+new Date (). Gettime ()+''}, autoload: true, remotesort: true}); 'State', proxy: {type: 'ajax', url: 'city.asp? Act = shi & n ='+new Date (). GetTime ()+''}, Autoload: false, remota: true}) URL: 'City.asp? Act = qu & n ='+new Date (). GetTime ()+'' '}, Autoload: False, Remotesort: True}); "Padding: 45px 15px 15px 15px;", defaults: {AutoScroll: true, bodyPadding: 10}, elementos: [{xtype: "combo", name: 'sheng', id: 'sheng', fieldLabel: 'select Province', displayfield: 'cname', ovalfield: 'id', store: store, thiggerction: 'todo', queryMeMe ', queryM SelectOnfocus: true, forceElection: true, tamplank: false, editable: true, vacíaText: 'Seleccione Provincia', BlankText: 'Seleccione Provincia', oyentes: {Seleccionar: function (combo, registro, index) {try {// userAdd = registro.data.name Var parent = ext.getcmp ('shi'); parent.clearValue (); FieldLabel: 'Select City', displayfield: 'cname', valuefield: 'id', store: store1, TriggerAction: 'All', QueryMode: 'local', selectEnfocus: true, forceEelection: true, tampeblank: false, editable: true, vacíaText: 'por favor seleccione Ciudad', en blanco: 'Seleccione City, », {Seleccionar: COMBO (COMBO, Registro, índice,» {Seleccione Ciudad', BlankText: 'SELECT SELEC // userAdd = registro.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', } ]})});En el código anterior, si la fuente de datos del almacén se define directamente en Combobox, esta situación ocurrirá, es decir, cuando se seleccione la primera provincia y se haga clic en la segunda ciudad, parpadeará y luego haga clic, y aparecerán los datos de la ciudad. Para resolver esta situación, primero debemos definir las fuentes de datos de provincias, ciudades y distritos. Luego, cuando haga clic nuevamente, la situación anterior no ocurrirá.
En el código, use el almacén como datos y establezca su AutOload en verdadero. Luego, cuando la página se carga por primera vez, los datos de los guardados se cargarán automáticamente, y luego la selección de escucha se agrega a la provincia y la ciudad. La función es que cuando hace clic en la provincia, debe borrar los datos de la ciudad y el distrito, y cargar los datos correspondientes en la fuente de datos de la ciudad de acuerdo con el valor seleccionado actualmente. Por supuesto, los principios de Store1 y Store2 son los mismos.
Finalmente, el servidor necesita buscar y devolver los datos correctos en función del valor aprobado. No hay datos de consulta de la base de datos aquí, sino simplemente escribir algún código de prueba. Creo que no hay problema con el código EXTJS, por lo que no es algo muy importante que el servidor devuelva los datos.
City.asp:
<%@Lengua = "vBscript" codePage = "65001"%> <%respuesta.contentTypee = "text/html" respuesta.charset = "utf-8"%> <%dim act: act = request ("act") dim param: param = request ("param") if act = "sheng" luego respuesta.write (") Response.write (" {{{"" cnjing ":" "" " Ciudad "," id "": "" 110000 "},") Respuesta.Write ("{" "cname" ":" "región autónoma de mongolia interna", "id": "150000" 150000 "}") Response.write ("]") End if Act = "shi" luego si param = "110000" luego respuesta.write ("") Response.Write ("{" "Cname" "" ":" "Distrito de nivel de la ciudad", "" id ":" "110100"}, ") Respuesta a la respuesta ("{" "cname" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "", "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "", "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "", "" "" "" "" ". "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "", "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "", "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "", "" "" "" "" ". "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "," "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "", param = "150000" entonces respuesta.Write ("[") Respuesta.Write ("{" "cname" ":" "Hohhot City", "id": "150100"}, ") respuesta.write (" {"" cname "" ":" "Baotou City", "Id": "150200"} "). = "qu" entonces if param = "110100" entonces respuesta.write ("[") Respuesta.Write ("{" "cname": "" Distrito de Chaoyang "," Id "": "110101" "},") Response.write ("{" "cname": "" Distrito de cambio "," ID ":" "110102"}) Respuesta "). = "110200" entonces respuesta.write ("[") Respuesta.Write ("{" "cname" ":" "miyun condado", "id": "110201" ",") respuesta.write ("{" "cname" ":" "Fangshan County", "id" ":" 110202 "}") "150100" luego respuesta.write ("[") Response.Write ("{" "cname" ":" "Ruibin District", "id": "150101" ",") Response.Write ("{" "cname" ":" "Nuevo distrito de la ciudad", "id" ":" 150102 ")) Response.Write ("[") Response.Write ("{" "Cname" ":" "Qingshan District", "Id": "150201"}, ") Response.Write (" {"" CName "": "Distrito" Donghe "," Id ":" 150202 "") Response.Write.write ("" ") Fin si fine%) Fin si final si finalLo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.