يسأل العديد من مستخدمي الإنترنت عن كيفية تنفيذ 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 مثيل رابط ثلاثي المستوى </titles/css/cs. ] 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: 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 () url: 'city.asp؟ Act = qu & n ='+new date (). BodyStyle: "Padding: 45px 15px 15px 15px ؛" ، الافتراضيات: {autoscroll: true ، bodypadding: 10} ، العناصر: [{xtype: "combo" ، name: eid: id: id: eid: id: eid: eiD: eiD: "all" ، al al ‘، al al‘ ، al al al ‘، al e al e al e al e id. QueryMode: "Local" ، SelectOnfocus: True ، Sorte -Explection: True ، false ، requited: "الرجاء تحديد المقاطعة" ، blanktex extcmp ("qu") ؛ الاسم: 'shi' ، id: 'shi' ، fieldlabel: 'select city' ، displayfield: 'cname' ، valuefield: 'id' ، store: store1 ، triggeraction: 'all' ، querymode: 'local' ، selectonfocus: true ، truelection: true ، allowblank: false ، exember: true ، "freeft city: SELECT: COMBO ، index) {trial {userAdd = record.data.name ؛ } ستر المنطقة "، blanktext:" الرجاء تحديد المنطقة "،}]})}) ؛في الكود أعلاه ، إذا تم تعريف مصدر بيانات المتجر مباشرة في Combobox ، فسيحدث هذا الموقف ، أي عند تحديد المقاطعة الأولى والنقر على المدينة الثانية ، فستومض ثم تنقر ، وستظهر بيانات المدينة. لحل هذا الموقف ، يجب أولاً تحديد مصادر بيانات المقاطعات والمدن والمناطق. ثم عند النقر مرة أخرى ، لن يحدث الموقف أعلاه.
في الكود ، استخدم المتجر كبيانات ، وقم بتعيين التحميل التلقائي على True. ثم عندما يتم تحميل الصفحة لأول مرة ، سيتم تحميل بيانات المحفوظة تلقائيًا ، ثم يتم إضافة محدد الاستماع إلى المقاطعة والمدينة. الوظيفة هي أنه عند النقر فوق المقاطعة ، يجب عليك مسح بيانات المدينة والمنطقة ، وتحميل البيانات المقابلة في مصدر بيانات المدينة وفقًا للقيمة المحددة حاليًا. بالطبع ، مبادئ Store1 و Store2 هي نفسها.
أخيرًا ، يحتاج الخادم إلى البحث وإرجاع البيانات الصحيحة بناءً على القيمة التي تم تمريرها. لا توجد بيانات استعلام من قاعدة البيانات هنا ، ولكن ببساطة كتابة بعض رمز الاختبار. أعتقد أنه لا توجد مشكلة في رمز ExtJS ، لذلك ليس من المهم جدًا أن يقوم الخادم بإرجاع البيانات.
city.asp:
<٪@language = "vbscript" codepage = "65001" ٪> <٪ response.contentType = "text/html" desponse.charset = "utf-8" ٪> <٪ dim Act: Act = request ("Act" City "،" id "": "" 110000 "} ،") reponse.write ("{" "" cname "": "Inner mongolia region tostular" ، "" id ":" "150000"} ") response. Response.write ("{" "cname" "" ":" "منطقة مستوى المدينة" ، "ID": "" 110100 "،")) response.write ("{" "" "cname """""">">"""">">"""""""""">"افقة تكن "" "" "" "" "" "" "" "" "" "" "" " "" "" "" "" "" "" "" "" "" "" "" " "" "" "" "" "" "" "" "" "" "" "" param = "150000" ثم استجابة. write ("[[" response.write ("{" "" "cname" ":" "hohhot city" ، "id": "" 150100 "} ،") reske. = "qu" ثم إذا param = "110100" ثم response.write ( = "110200" ثم استجابة. write ("[[" reponse.write ("{" "" cname "": "" Miyun County "،" ID ":" "110201"} ، ") reponse.Write (" {"" "150100" ثم استجابة. write ("[[" response.write ("{" "" "cname" ":" "raibin district" ، "id": "" 150101 "} ،") respons. Response.write ("[[[" reponse.write ("{" "" cname ":" "qingshan district" ، "" id ":" "150201" ، ") reponse.write (" {"" "" "cname": "" "donge" ، "id": "" 150202 ""ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.