يتطلب ExtJS4 آلية جديدة، وذلك بشكل أساسي لتنفيذ آلية التحميل غير المتزامنة. بهذه الطريقة، لن يتم تحميل ملف js المقابل ما لم يتم النقر على الزر أو الخيار المقابل، مما يؤدي إلى تحسين سرعة التحميل ووقت انتظار المستخدم.
يتم تنفيذ آلية المتطلبات من خلال وظيفة Ext.Loader.setConfig لتعيين دليل التعيين للبحث عن الملفات، ثم استخدام Ext.require لتحميل ملف js المقابل عند الحاجة إليه.
هيكل تخزين الملف كما يلي:
يوجد مجلد ux في نفس الدليل مثل Lesson2.htm و Lesson22.js، ويتم تخزين MyWin.js المستخدم في مجلد ux.
الكود الموجود في الدرس 2.html هو كما يلي:
انسخ رمز الكود كما يلي:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<أتش تي أم أل>
<الرأس>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>سطح المكتب extjs4</title>
<!--css -->
<link rel="stylesheet" type="text/css" href="../../extjs4/resources/css/ext-all.css" />
<script type="text/javascript" src="../../extjs4/bootstrap.js"></script>
<script type="text/javascript" src="lesson22.js"></script>
</الرأس>
<الجسم>
<button id="myButton" align="center">إظهار</button>
</الجسم>
</html>
في جزء التعليمات البرمجية هذا، لم يتم تحميل ملف MyWin.js في دليل ux، لذلك عند تحميل الصفحة، لن يتم تحميل ملف MyWin.js في نفس الوقت، ولكن سيتم تحميله مرة أخرى عند الحاجة. يتم تحقيق الحاجة هنا بالضغط على الزر.
محتوى ملف Lesson22.js هو كما يلي:
انسخ رمز الكود كما يلي:
(وظيفة(){
تحويلة.Loader.setConfig({
ممكّن: صحيح، // تمكين وضع التحميل غير المتزامن
المسارات:{
myApp:'lesson2/ux' // موقع ملف الإعلان
}
});
تحويلة على استعداد (وظيفة () {
Ext.require('ux.MyWin',function(){
var mw = Ext.create('ux.MyWin',{
العنوان: "اختباري"
});
Ext.get('myButton').on('click',function(){
mw.show();
});
});
});
})();
محتويات ملف MyWin.js في دليل ux هي كما يلي:
انسخ رمز الكود كما يلي:
Ext.define('ux.MyWin',{
توسيع: 'Ext.window.Window'،
العنوان: "التسجيل"،
العرض: 400،
الارتفاع: 300
});
ملاحظة: اسم الملف MyWin واسم الوظيفة هنا يجب أن يكونا متطابقين. إذا كانا مختلفين، فلن يتم عرضهما.
في البداية استخدمت طريقة الكتابة في المحاضرة الثانية من فيديو تعليم ExtJS4 على uspcat، لكن النتيجة التي أردتها لم تظهر ربما تكون مشكلة في الإصدار، أو قد تكون مشكلتي الخاصة بالتعديل عليها هذا، يمكنني استخدام يتطلب الأسلوب. هذه ملاحظة لأي شخص لديه نفس الارتباك.