هذا مثال بسيط لتظهر لك كيفية إنشاء منفذ العرض في ExtJs4.
منفذ العرض تطويعها للجسم وثيقة، والأحجام نفسها تلقائيا إلى حجم المعاينة المتصفح وتدير تغيير حجم نافذة. قد يكون هناك واحد فقط منفذ العرض التي تم إنشاؤها في الصفحة.
منفذ العرض لا يوفر التمرير، وذلك لوحات طفل ضمن إطار العرض ينبغي أن ينص على التمرير إذا لزم الأمر باستخدام التكوين autoScroll.
وخلافا للمكون فريق شبيبة تحويلة، منفذ العرض ليس لديها خيار tbar. لذلك، لا يمكنك إرفاق عنصر شريط الأدوات إلى منفذ العرض. الحل الأفضل هو لتحويل المنطقة الى الشمال من التطبيق الخاص بك إلى شريط أدوات.
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN" "http://www.w3.org/TR/html4/strict.dtd"> <HEAD> <HTML> <TITLE> ExtJS4 منفذ العرض المثال </ عنوان> <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.0.2a/resources/css/ext-all.css" /> <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.0.2a/ext-all.js"> </ SCRIPT> <script> تحويلة . تطبيق ({اسم: "عرض ميناء '، الاطلاق: وظيفة () {Ext.create (' Ext.container.Viewport '، {تصميم:' الحدود '، البنود: [{المنطقة:' شمال '، الحدود: كاذبة، الطول: 24، tbar: [{النص: 'جديد'، القائمة: [{النص: "إضافة جديد X '، معالج: وظيفة () {/ / إضافة إلى معالج" إضافة جديد X "القائمة Ext.Msg.alert البند ('تنبيه'، 'إضافة بند جديد X')؛}}، {النص: "إضافة جديد Y '}]}، {النص:" تجديد "}، {النص:' أدوات '}،' -> '، {النص: "الخيارات"، iconCls: "options_icon '، القائمة: [{النص:" معلومات المستخدم "}، {النص:" الإعدادات "}، {النص: شعار" تحويل "}]}، {النص:" مساعدة " }، '-'، {النص: 'خروج'}]}، {المنطقة: "الغرب"، / / للطي: صحيح، والانقسام: صحيح، عنوان: "التنقل"، العرض: يمكن 150 / / استخدام TreePanel أو AccordionLayout لالملاحية البنود}، {المنطقة: "جنوب"، الطول: 26، / * bbar: [بار / / القاع {xtype: "زر"، والنص: "زر 1"}] * / dockedItems: [{xtype: "شريط الأدوات '، قفص الاتهام:' القاعدة '، البنود: [{xtype: "زر"، النص:' تحذير واضح وعرض '، معالج: وظيفة () {فار SB = Ext.getCmp (' الأساسية، شريط الحالة ')؛ sb.setStatus ({النص: "عفوا!"، iconCls: 'X-الوضع الخطأ "، واضحة: صحيح / / لصناعة السيارات في واضحة بعد فترة مجموعة})؛}}، {xtype:" زر "، النص:' عرض مشغول" ، معالج: وظيفة () {فار SB = Ext.getCmp ('الأساسية، شريط الحالة')؛ / / تعيين شريط لاظهار ان هناك شيئا التحميل: sb.showBusy ()؛}}، {xtype: "زر"، النص: "الوضع واضح"، معالج: وظيفة () {فار SB = Ext.getCmp ('الأساسية، شريط الحالة')؛ / / الانتهاء sb.clearStatus ()؛}}، '-'، 'نص عادي']} ]}، {المنطقة: "الشرق"، عنوان: "الشرق لوحة"، قابلة للطي: المنطقة 150}، {: صحيح، والانقسام: صحيح، عرض 'وسط'، xtype: "tabpanel '، / / TabPanel نفسه ليس لديه لقب {ويمكن إضافة "علامة التبويب الأولى \ 'ق محتوى آخرون بشكل حيوي' العنوان:::" الجدولة الافتراضية "، أتش تي أم أل.}}]})؛}} activeTab: 0، / / أول علامة التبويب النشطة من قبل autoScroll رد: صحيح، والبنود )؛ </ SCRIPT> </ HEAD> <BODY> </ BODY> </ HTML> 
