Αυτό είναι ένα απλό παράδειγμα για να σας δείξει πώς να δημιουργήσετε ένα viewport στο ExtJs4.
Η ίδια Viewport καθιστά το σώμα του εγγράφου, και αυτόματα η ίδια μεγέθη με το μέγεθος του προγράμματος περιήγησης στο viewport και να διαχειρίζεται την αλλαγή μεγέθους παραθύρων. Μπορεί να υπάρχει μόνο ένας Viewport δημιουργήθηκε σε μια σελίδα.
Το Viewport δεν παρέχει κύλιση, έτσι ώστε το παιδί πάνελ στο Viewport θα πρέπει να προβλέπει εάν χρειάζεται κύλιση χρησιμοποιώντας το config AutoScroll.
Σε αντίθεση με το στοιχείο του πίνακα Ext JS, Viewport δεν έχει tbar επιλογή. Έτσι, δεν μπορείτε να συνδέσετε ένα στοιχείο της γραμμής εργαλείων στο παράθυρο προβολής. Η καλύτερη λύση είναι να μετατρέψει βόρεια περιοχή της αίτησής σας σε μια γραμμή εργαλείων.
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EL" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> ExtJS4 Viewport Παράδειγμα </ title> <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"> </ span> <script> Ext . αίτηση ({όνομα: «Προβολή Λιμάνι», έναρξη: λειτουργία () {Ext.create («Ext.container.Viewport», {διάταξη: «συνόρων», αντικείμενα: [{περιοχή: «βόρεια», στα σύνορα: ψευδείς, Ύψος: 24, tbar: [{κείμενο: «Νέα», το μενού: [{κείμενο: «Προσθήκη νέου Χ», χειριστή: λειτουργία () {/ / προσθήκη ενός χειριστή για να "Προσθήκη νέου Χ" μενού Ext.Msg.alert στοιχείο («Alert», «Προσθήκη νέου στοιχείου Χ!")?}}, {κείμενο: «Προσθήκη νέου Y"}]}, {text: "Ανανέωση"}, {text: "Εργαλεία"}, "->", {κείμενο: «Επιλογές», iconCls: «options_icon», το μενού: [{κείμενο: «Πληροφορίες για το χρήστη»}, {text: "Ρυθμίσεις"}, {κείμενο: «Θέμα Switch"}]}, {κείμενο: «Βοήθεια» }, '-', {text: "Αποσύνδεση"}]}, {περιοχή: «δυτικά», / / πτυσσόμενο: αλήθεια, split: αλήθεια, τίτλος: «πλοήγησης», πλάτος: 150 / / θα μπορούσε να χρησιμοποιήσει ένα ή TreePanel AccordionLayout για στοιχεία πλοήγησης}, {περιοχή: «νότια», ύψος: 26, / * bbar: [/ / Κάτω Μπαρ {xtype: «κουμπί», το κείμενο: "Κουμπί 1 '}] * / dockedItems: [{xtype:' γραμμή εργαλείων », αποβάθρα:« Προσοχή Εμφάνιση & Εκκαθάριση », χειριστή: λειτουργία () {var sb = Ext.getCmp κάτω», αντικείμενα: [{xtype:: «κουμπί», το κείμενο »(« βασική-γραμμή κατάστασης ")? sb.setStatus ({κείμενο: «Ωχ!», iconCls: «x-κατάσταση-λάθος», σαφές: αλήθεια / / auto-σαφές μετά από ένα διάστημα σετ})?}}, {xtype: «κουμπί», το κείμενο: «Εμφάνιση Απασχολημένος" , χειριστή: λειτουργία () {var sb = Ext.getCmp («ο βασικός-statusbar ')? / / Ορίστε τη γραμμή κατάστασης για να δείξει ότι κάτι είναι η επεξεργασία: sb.showBusy ()?}}, {xtype:« κουμπί », κείμενο: «Διαγραφή κατάσταση», χειριστή: λειτουργία () {var sb = Ext.getCmp («ο βασικός-statusbar ')? / / Μόλις ολοκληρωθεί sb.clearStatus ()?}},« - »,« Απλό Κείμενο "]} ]}, {περιοχή: «ανατολικά», τίτλος: «Πίνακας Ανατολή», πτυσσόμενες: αλήθεια, split: αλήθεια, πλάτος: 150}, {περιοχή: «κέντρο», xtype: «tabpanel ', / / TabPanel η ίδια δεν έχει τίτλο activeTab: 0, / / Πρώτη καρτέλα ενεργή από προεπιλογή AutoScroll: αλήθεια, στοιχεία: {. τίτλο: «προεπιλεγμένη καρτέλα», html: «Η πρώτη καρτέλα \ 's περιεχόμενο κ.λπ., μπορούν να προστεθούν δυναμικά»}}]})?}} )? </ span> </ head> <body> </ body> </ html> 
