많은 네티즌들이 Extjs4.0 combobox를 구현하는 방법을 묻고 있습니다. 다행스럽게도 3.x를 사용하여 3 레벨의 링키지를 구현했으며 이제 Extjs4.0을 사용하여 동일한 연결 효과를 달성했습니다. 주목할만한 점은 3.x의 'local'은 QueryMode : extjs4.0의 'local'으로 표시되며 3.x에서 데이터를로드 할 때 Reload가 사용되지만 Extjs4.0에서는 데이터를 얻는 데 사용됩니다. 아래 그림과 같이 :
코드 섹션
먼저 HTML 코드를 살펴 보겠습니다.
<html> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/>< <<title> mhzg.net-city 3 레벨 링키지 인스턴스 </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 type = "text/javascript" src = "combobox.js"> </script> </head> <body> </body> </html>
매우 간단하고 기본 CSS 파일 및 JS 파일을로드하고 사용자 정의 된 combobox.js 파일을로드합니다.
combobox.js :
ext.Require ( 'ext.*'); ext.onready (function () {// combobox modelext.define ( 'state', {extend : 'ext.data.model', fields : [{type : 'int', name : 'id'}, {type : 'string', 'cname'}]; ext.create ( 'ext.data.store', {model : 'state', proxy : {type : 'ajax', url : 'city.asp? act = sheng & n ='+new date (). autoload : true, remotesort : true}); 'state', proxy : {type : 'ajax', url : 'city.asp? act = shi & n ='+new date (). gettime ()}, autoad : false, recomotesort : true}); 'city.asp? act = qu & n ='+new date (). gettime ()+''}, autoload : false, remotesort : true}); 45px 15px 15px 15px; ", 기본값 : {autoscroll : true, bodypadding : 10}, 항목 : [xtype :"combo ", name : 'sheng', id : 'sheng', fieldlabel : 'select province :'cname ','valuefield : 'store, trigger,', query -mode : ', query -mode :', queryfode : ', quallode :', store : ', store :', valuefield ', selectOnfocus : true, forcesselection : false, 편집 가능 : true, emptytext : '주를 선택하십시오. parent.clearvalue (); FieldLabel : 'Select City', DisplayField : 'CNAME', 'CNAME', 'ID', Store : Store1, Triggreation : 'All', QueryMode : 'local', seloctonfocus : true, forceselection : true, false, editable : true, 'select city', blanktext : 'select : select : rection : function (opction, record, record,) // var ext.getcmp (parent.store.load); Xtype : "combo", name : 'qu', id : 'qu', fieldlabel : 's selection area', 's selection area', 's selection area', displayfield : 'cname', 'cname', 'id', store : store2, triggection : 'querymode :'local ', selectonfocus : true, forceseelection : true, fally : fally : true, please select :'select area ' }]})});위의 코드에서, 상점 데이터 소스가 Combobox에서 직접 정의되면,이 상황이 발생합니다. 즉, 첫 번째 주가 선택되고 두 번째 도시가 클릭되면 플래시가 클릭 한 다음 도시 데이터가 나타납니다. 이러한 상황을 해결하려면 먼저 지방, 도시 및 지구의 데이터 소스를 정의해야합니다. 그런 다음 다시 클릭하면 위의 상황이 발생하지 않습니다.
코드에서 스토어를 데이터로 사용하고 자동로드를 true로 설정하십시오. 그런 다음 페이지가 처음으로로드되면 저장된 데이터가 자동으로로드 된 다음 청취 선택이 지방과 도시에 추가됩니다. 기능은 지방을 클릭하면 도시와 지구의 데이터를 지우고 해당 데이터를 현재 선택된 값에 따라 도시의 데이터 소스에로드해야한다는 것입니다. 물론 Store1과 Store2의 원리는 동일합니다.
마지막으로 서버는 전달 된 값에 따라 올바른 데이터를 검색하고 반환해야합니다. 여기에는 데이터베이스의 데이터 쿼리 데이터가 없지만 일부 테스트 코드를 작성합니다. EXTJS 코드에 문제가 없다고 생각하므로 서버가 데이터를 반환하는 것은 그다지 중요하지 않습니다.
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"reponse.write.wr ( "" "" "" "" "" "": City ","ID "": ""110000 "},") response.write ( "{" "cname" ":" "내부 몽골 자율 영역", "id" ":" "150000"} ") response.write ("] ") act ="shi ""110000 "이면 종료 된 경우, response.write.write.write.write.write.write.write.write.write.write.write.write. response.write ( "{" "Cname" "" ":" "도시 수준의 지구", "ID" ":" "110100"}, ") responsk.write ( "{" "”""""""""징""""""징새새새 "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" """광 "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" " "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" """광 "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" " "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""광" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""요일" "" "" "" "" "" "" "" "" "" "" "" "" "" "" """광 "" "" "" "" "" """준 "" "" "" "" "" "" "" "" "" "" ""색" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" """광 "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""른" param = "150000"그런 다음 response.write ( "[") response.write ( "{" "cname" ":" "hohhot city" ","id "": ""150100 "},") rite.write ( "{" "" "" ":" "Baotou City" ","id "" "" ")))))))))))). = "qu"그런 다음 param = "110100"그런 다음 response.write ( "[") response.write ( "{" ""cname "": ""Chaoyang District "," "ID" ":" "110101"}, ") 응답 ("{ "" "cname" ":" "changping", "id" ")). = "110200"그런 다음 response.write ( "[") response.write ( "{" "Cname" ":" "Miyun County", "ID" ":" "110201"}, ") 응답 ("{ ""CName "": ""Fangshan County ","id "": "110202"} "))). "150100"그런 다음 response.write ( "[") response.write ( "{" "Cname" "": ""Ruibin District ","ID "": ""150101 "},") response.write ( "{" "Cname" "" ":" "New City", "id" ":" "150102"} ")))) response.write ( "[") response.write ( "{" ""CName "": ""Qingshan District "," "ID" ":"150201 "},") response.write ( "{" ""cname "" ":" "Donghe District", "" "" "" "150202"} ") 응답.위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.