Muitos internautas estão perguntando como implementar o ExtJS4.0 ComboBox. Felizmente, usei 3.x para implementar uma ligação de três níveis e agora uso o ExtJS4.0 para obter o mesmo efeito de ligação. Uma coisa a observar é que o modelo: 'local' em 3.x é representado por Querymode: 'Local' no extJS4.0, e a recarga é usada ao carregar dados em 3.x, mas no extjs4.0, a carga é usada para obter dados. Como mostrado na figura abaixo:
Seção de código
Vejamos o código HTML primeiro:
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8" /><title>mhzg.net-city three-link linkage instância </title> <link Rel = "StyleSheet" = "" text/css " /> <script type = "text/javascript" src = "../../ bootstrap.js"> </script> <script type = "text/javascript" src = "../../ loce/extlang-zh_cn.js"> </script> <script type = "text/javroscrint" " src = "ComboBox.js"> </script> </ad Head> <body> </body> </html>
É muito simples, ele carrega o arquivo CSS básico e o arquivo JS e carrega o arquivo ComboBox.js personalizado.
ComboBox.js:
Ext.require ('ext. Ext.Create ('Ext.Data.Store', {Model: 'State', Proxy: {Type: 'Ajax', Url: 'City.asp? Act = Sheng & n ='+new Date (). 'Estado', proxy: {type: 'ajax', url: 'city.asp? Act = shi & n ='+new Date (). Gettime ()+''}, automaticamente: false, remotaTort: true}); url: 'city.asp? ACT = qu & n ='+new Date (). getTime ()+''}, AUTOLOAD: FALSO, Remotesort: True}); BodyStyle: "preenchimento: 45px 15px 15px 15px;", padrões: {AUTOSCROLL: true, bodypadding: 10}, itens: [{xtype: "combo", name: 'sheng', id: 'sheng', field: 'select Provrince', DisplayField: 'CAM Querymode: 'Local', Selectonfocus: True, ForcesElection: True, AllowBlank: Falso, Editável: True, Variva em Vazio: 'Selecione Província', BlankText: 'Selecione Província', ouvintes: {Select: function (combo, registro, index) {try » Ext.getcmp ("Quadro); name:'shi', id : 'shi', 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:{ Selecione: FUNCH (Combo, Record, Index) {Try }}}, {xtype: "combo", nome: 'qu', id: 'qu', fieldlabel: 's Area de seleção', DisplayField: 'cname', Valuefield: 'id', store: store2, triggeraction: 'all', consulher: 'Local', selectable ', verdadeiro, fortaleção, fortgeraction:' all ', consulher:' Local ', select, true, verdadeiro, forcesEction:' BlankText: 'Selecione a área',}]})});No código acima, se a fonte de dados da loja for definida diretamente no ComboBox, essa situação ocorrerá, ou seja, quando a primeira província for selecionada e a segunda cidade for clicada, ela piscará e clicará e os dados da cidade aparecerão. Para resolver essa situação, devemos primeiro definir as fontes de dados de províncias, cidades e distritos. Então, quando você clicar novamente, a situação acima não ocorrerá.
No código, use a loja como dados e defina seu automóvel como true. Então, quando a página for carregada pela primeira vez, os dados dos salvos serão carregados automaticamente e, em seguida, a seleção de audição é adicionada à província e à cidade. A função é que, quando você clica na província, deve limpar os dados da cidade e do distrito e carregar os dados correspondentes na fonte de dados da cidade de acordo com o valor atualmente selecionado. Obviamente, os princípios da Store1 e da Store2 são os mesmos.
Por fim, o servidor precisa pesquisar e retornar os dados corretos com base no valor passado. Não há dados de consulta do banco de dados aqui, mas simplesmente escrevendo algum código de teste. Acredito que não há problema com o código EXTJS, portanto, não é uma coisa muito importante para o servidor retornar os dados.
City.asp:
<%@Idioma = "vBScript" codePage = "65001"%> <%Response.contentType = "text/html" Response.charSet = "utf-8"%> <%Dim Act: Act = request ("ACT") Dim: Param = Param = ("" ") se act =" sheng "thenmester.write" ")"). City "," ID ":" "110000"}, ") Response.Write (" {"" CNAME "": "Região Autônoma da Mongolia Interior", "Id" ":" 150000 "}") Response.Write ("]") end if if ACT = "Shi" [então param = "1100" "então Response.Write ("{" "cname" "" ":" Distrito no nível da cidade "," ID "": "110100"}, ") Response.Write("{""cname"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" param = "150000" Then Response.Write ("[") Response.Write ("{" "CNAME" ":" Hohhot City "", "ID" ":" "150100"}, ") Response.Write (" {"" CNAME "" ":" Baotou City "", "id" "" "15" "" "": "" Baotou City "", "id" ":" "15" "" "": "" Baotou City "", "id": "" "15" "" "" ":" "Baotou" "," id ":" "" "" "" 15 "" "": "" Baotou "", "id": "" "" "" "15" "" ":" "Baotou" "," id ("" "" "" "" "" "" ". = "Qu" então se param = "110100" Then Response.Write ("[") Response.Write ("{" "cname" ":" "Chaoyang District", "Id" ":" 110101 "}}") Responst.write ("{" "cname" "" ""}}, "id)" "" "" "" "") ("cname" "" "" "" "" "" "" "" "" "" 110101 "},") Responst. "" "" "" "" "" "" ""} "),"), ") Responst." = "110200" Then Response.Write ("[") Response.Write ("{" "CNAME" ":" Miyun County "," Id "": "" 110201 "},") Response.Write ("{" "CNAME": "" Fangshan County "," id "." "11020" "" "" 11202 "" "" ". "150100" 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" ":" "Distrito Qingshan", "Id" ":" "150201"}, ") Response.Write (" {"" CNAME "" ":" "District District," Id "" "" 150202 "}" "):" Response ""O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.