Многие пользователи сети спрашивают, как реализовать ExtJS4.0 ComboBox. К счастью, я использовал 3.x для реализации трехуровневой связи, и теперь я использую ExtJS4.0 для достижения того же эффекта связи. Следует отметить, что модель: «локальная» в 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 трехуровневый экземпляр связи </title> <link rel = "stylesheet" type/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 () {// define combobox modelext.define ('state', {extend: 'ext.data.model', fields: [{type: 'int', name: 'id'}, {type: 'string', name: 'cname'}]}); Ext.create ('ext.data.store', {model: 'State', Proxy: {type: 'ajax', url: 'city.asp? Модель: «Государство», прокси: {тип: 'ajax', url: 'city.asp? URL: 'City.asp? «Надо: 45px 15px 15px 15px;», по умолчанию: {autoscroll: true, bodypadding: 10}, элементы: [{xtype: «combo», имя: «Sheng», id: «Sheng», Fieldlabel: «Select Province», Displayfield: 'cname', Valuefield: 'Id', store, store, storkercerachacturce: «Local», SelectOnfocus: True, Forseletection: True, AllingBlank: False, редактируемый: true, empty Telect: «Пожалуйста, выберите провинцию», «Бланк»: «Пожалуйста, выберите провинцию», слушатели: {SELECT: FUNCTION (COMBO, Record, Index) {Try {// userAdd = record.data.name; Ext.getcmp ("qu"); Имя: «Ши», ID: «Shi», FieldLabel: «Select City», Displayfield: «Cname», Valuefield: «Id», Store: Store1, TriggerAction: «All», QueryMode: «Local», SelectOnfocus: True, Forceletection: True, AllingBlank: False, редактируемый: True, Pelly Telect: «Пожалуйста»: «Пожалуйста»: record, index) }, {xtype: "combo", имя: 'qu', id: 'qu', fieldlabel: 's Область выбора', Displayfield: 'cname', valuefield: 'id', Store: Store2, TriggerAction: 'All', QueryMode: «Local», SelectOnfocus: True, ProseLection: True: True: Falselete: PloundText: «PlosText», Plostelete. область', } ] })});В приведенном выше коде, если источник данных хранилища будет непосредственно определен в ComboBox, эта ситуация произойдет, то есть при выборе первой провинции и второй город нажимается, она будет мигать, а затем нажимать, и появятся данные города. Чтобы решить эту ситуацию, мы должны сначала определить источники данных провинций, городов и районов. Затем, когда вы нажимаете снова, вышеупомянутая ситуация не произойдет.
В коде используйте хранилище в качестве данных и установите его автозагрузку на True. Затем, когда страница загружается в первый раз, данные сохранения будут автоматически загружены, а затем выбор прослушивания добавляется в провинцию и город. Функция заключается в том, что когда вы нажимаете на провинцию, вы должны очистить данные города и района и загрузить соответствующие данные в источник данных города в соответствии с выбранным в настоящее время значением. Конечно, принципы Store1 и Store2 одинаковы.
Наконец, сервер должен искать и вернуть правильные данные на основе пропущенного значения. Здесь нет данных запросов из базы данных, а просто написание некоторого тестового кода. Я считаю, что нет проблем с кодом EXTJS, поэтому сервер не очень важна для возврата данных.
City.asp:
<%@Language = "vbscript" codeapage = "65001"%> <%response.contenttype = "text/html" response.charset = "utf-8"%> <%dim act: act = запрос ("act") dim param: param = require ("param"), если act = "sheng", тогда ответ. Город "," id "": "" 110000 "},") response.write ("{" "cname" ":" "Inner Mongolia Автономная область", "" id "": "" 150000 "}") response.write ("]") in uf a act = "shi" then param = "110000". Response.write ("{" "cname" "" "": "" District "," "ID" ":" "110100"}, ") Whrite.write ("{" "" "" "" """""андиорныйемул потворен "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""Му" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" " "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""Му" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" " "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""Му" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" param = "150000" Then response.write ("[") response.write ("{" "cname" ":" "hohhot City" "," id "": "" 150100 "},") response.write ("{" "" cname "" ":" "Baotou City" "," Id "": "150200"} "). = "qu" Тогда if param = "110100", затем response.write ("[") response.write ("{" "cname" ":" "chaoyang District", "" id "": "" 110101 "},") response.write ("{" "cname": "" changping district "," "" ". = "110200" Тогда ответ. Write ("[") response.write ("{" "cname" ":" "[" [") response.write (" {"" cname "": "" ["[") "," id "": "" 110201 "},") response.write ("{" "" cname "": "" Fangshan County "," ID ":" "110202"} ». «150100», затем ответ. Write («[») response.write ("{" "cname" "": "" [") Response.Write (" {"" cname "" ":" "["), "id" ":" "150101"}, ") response.write (" {"" "cname" "": "" New City District "," ID ":" 150202 "}»). Response.write ("[") response.write ("{" "cname" ":" "Qingshan District", "id" ":" "150201"}, ") response.write (" {"" cname "" ":" "Donghe District", "id" ":" 150202 "}").Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.