多くのネチズンは、extjs4.0コンボボックスを実装する方法を尋ねています。幸いなことに、3レベルのリンケージを実装するために3.xを使用しました。現在、ExtJS4.0を使用して同じリンケージ効果を実現しました。注意すべきことの1つは、3.xの「ローカル」はqueryMode：extjs4.0の「ローカル」で表され、3.xのデータをロードするときにリロードが使用されますが、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 = "../ /> <script = "text/javascript" src = "../../ bootstrap.js"> </script> <スクリプトタイプ= "text/javascript" src = "../../ src = "combobox.js"> </script> </head> <body> </body> </html>
それは非常にシンプルで、基本的なCSSファイルとJSファイルをロードし、カスタマイズされたcombox.jsファイルをロードします。
combox.js：
ext.Require（ 'ext。*'）; ext.onready（function（）{// define combobox modelext.define（ 'state'、{exting： 'ext.data.model'、fields：[{type： 'int'、name： 'id'}、{type： 'string'、name '}]; ext.create（ 'ext.data.store'、{model： 'state'、proxy：{type： 'ajax'、url： 'city.asp？act = sheng＆n ='+new date（）。モデル： 'state'、proxy：{type： 'ajax'、url： 'city.asp？act = shi＆n ='+new date（）。getTime（）+''}、false、remotesort：true}）; 'ajax'、url： 'city.asp？act = qu＆n ='+new date（）。gettime（）+''}、false、remotesort：true}）、{renderto：document.body、width：290、sight 3-letive： 80 '、ボディスタイル： "パディング：45px 15px 15px 15px;"、defaults：{autoscroll：true、bodypadding：10}、items：[{combo "、name：' sheng '、id：' sheng '、fieldlabel：' 'cname'、 'cname'、 'cname：' cname： 'cname： QueryMode： 'local'、selectonfocus：true、forceblank：false、editable： 'select revince'、blanktext：{select（combo、record、index）{try {// useraddd = record.data.name = extcmp（ ext.getcmp（ "qu"）;名前： 'shi'、id： 'shi'、fieldlabel： 'select city'、displayfield： 'cname'、valuefield： 'id'、store：store1、triggeraction： 'all'、querymode： 'local'、selectonfocus：true、forceselection：true、loadblank：false、editable：selece emptext：選択：{// useradd = recult.data.getcmp（ "qu"）; }}}}、{xtype： "combo"、name： 'qu'、id： 'qu'、fieldlabel： 's selectionエリア'、displayfield： 'cname'、valuefield： 'id'、store：store2、triggeraction： 'all'、querymode： 'local'、selectonfocus：true、fiell ediable：true、fals：frue、edected：true、ectexted：frue、edected：frue、edectedeclection blanktext：「領域を選択してください」、}]}）}）;上記のコードでは、ストアデータソースがコンボボックスで直接定義されている場合、この状況は発生します。つまり、最初の州が選択され、2番目の都市がクリックされると、フラッシュしてからクリックし、都市のデータが表示されます。この状況を解決するには、まず州、都市、地区のデータソースを定義する必要があります。その後、もう一度クリックすると、上記の状況は発生しません。
コードでは、ストアをデータとして使用し、その自動車をtrueに設定します。次に、ページが初めてロードされると、保存されたデータのデータが自動的にロードされ、リスニング選択が州と都市に追加されます。機能は、州をクリックすると、市と地区のデータをクリアし、現在選択されている値に応じて対応するデータを市のデータソースにロードする必要があるということです。もちろん、store1とstore2の原則は同じです。
最後に、サーバーは、合格した値に基づいて正しいデータを検索して返す必要があります。ここにはデータベースからのクエリデータはありませんが、単にテストコードを書くだけです。 ExtJSコードに問題はないと思うので、サーバーがデータを返すことはそれほど重要なことではありません。
City.asp：
<％@言語= "vbscript" codepage = "65001"％> <％respons.contenttype = "text/html" response.charset = "utf-8"％> <％dim act：act = request（ "act"）dim = request（ "param"）if act = "sheng" then respons.write（ "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" City "、" id ""： "" "110000"}、 "）respons.write（" {"" cname ""： "" inner Mongolia自律領域 "、" id ""： "" 150000 "}"）respons.write.write（ "]"）end（ "]）if if act =" shi "then param =" 110000 " Response.write（ "{" "cname" "" ""： ""都市レベル地区 "、" id ""： "" 110100 "}、"） Response.write（ "{" "" "" "" ""毒病毒"いいきろう評」いいきろういいでしょう "" "" ""毒病毒"いい疑問いい疑愛毒病毒疑愛疑字"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" param = "150000" then respons.write（ "["）respons.write（ "{" "cname" "：" "hohhot city" ""、 "id" "：" "150100"}、 "）respons.write（" {"" cname "" ""： "" "baotou city"、 "end" "" 150200 "）" = "qu" then param = "110100" then respons.write（ "["）response.write（ "{" "cname" "：" "" chaoyang地区 "、" id ""： "" 110101 "}、"）respons. = "110200" Then Respons.Write（ "["）Response.Write（ "{" "cname" "：" "Miyun County"、 "id" "：" "110201"}、 "）respons.write（" {"" cname ""： "" "fangshan County"、 "id"： "" 110202 "） "150100" then respons.write（ "["）respons.write（ "{" "cname" ""： "" ruibin地区 "、" id ""： "" 150101 "}、"）respons.write（ "" "cname" "" "：" ""新しい都市地区 "、" ID "：" 150102 "" Respons.Write（ "["）Response.Write（ "{" "cname" "：" "Qingshan District"、 "id" "：" "150201"}、 "）respons.write（" {"" cname "" ""： "" donghe地区 "、" id ""： "" 150202 "）Respons.上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。