Οι εικόνες αποτελούν αναπόσπαστο κομμάτι των ιστοσελίδων μας, και συνέχεια ψάχνουμε τον ιδανικότερο τρόπο για να παρουσιάσουμε στους χρήστες μας, πολλές πληροφορίες με εικόνες. Μέσα απ' αυτόν τον οδηγό θα δούμε, πώς μπορούμε να φτιάξουμε έναν πίνακα (grid) που θα περιέχει εικόνες σε μικρό μέγεθος, και κάνοντας κλικ ο χρήστης στην πληροφορία να γίνεται προεπισκόπηση της εικόνας.
Τον κώδικα του άρθρου μπορείτε να τον βρείτε εδώ, και να δείτε demo της εφαρμογής εδώ.
form.html
Το πρώτο μέρος, και το ευκολότερο, είναι html κομμάτι, όπου φορτώνουμε τις βιβλιοθήκες του ExtJS, ενώ παράλληλα μπορούμε να προσθέσουμε και τις υπόλοιπες πληροφορίες της ιστοσελίδας μας. Ξεκινάμε λοιπόν:
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grid with Image Preview</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="igrid.js"></script>
</head>
<body>
</body>
</html>
igrid.js
Tελειώνοντας το δεύτερο κομμάτι μας, περνάμε στο javascript αρχείο, όπου αρχίζουμε με μια βασική μέθοδο του Ext, την onReady, η οποία εκτελείτει όταν το document μας έχει φορτωθεί σωστά. Έπειτα, δίνουμε την δυνατότητα εμφάνισης των διαφόρων tooltips, χρησιμοποιώντας την Ext.QuickTips.init(). Ενώ ενεργοποιούμε τα μηνύματα, χρησιμοποιώντας την Ext.form.Field.prototype.msgTarget = 'side'. Τέλος σε μια μεταβλητή, αποθηκεύουμε το σώμα της html σελίδας, χρησιμοποιώντας την Ext.getBody(), η οποία επιστρέφει το σώμα ως ένα Ext.element.
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
// Get the html document body
var bd = Ext.getBody();
Έστω, ότι έχουμε μια εταιρεία που πουλάει μπλουζάκια και θέλουμε να εμφανίζουμε κάποια στοιχεία, όπως Όνομα Προϊόντος, Τιμή, Μέγεθος, Χρώμα και Εικόνα. Άρα έχοντας στο μυαλό μας το παραπάνω, παραμετροποιούμε τον πίνακα, να δέχετε records (εγγραφές) με τα πέντε αυτά χαρακτηριστικά:
var ds = new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'title'},
{name: 'price', type: 'float'},
{name: 'size' },
{name: 'color'},
{name: 'image'}
])
});
H τιμή είναι τύπου float, επειδή θέλουμε να υπάρχει η δυνατότητα να έχουμε τιμές με δεκαδικά ψηφία, για παράδειγμα 10,35ευρώ. Ο παραπάνω κώδικας περιμένει records(εγγραφές) με την μορφή: ['T-shirt 1',10,'L','red','image1']. Οπότε φτιάχνουμε 5 ενδεικτικές εγγραφές, για το παράδειγμά μας:
// [ Name, Price, Size, Color, Image ]
var myData = [
['T-shirt 1',10,'L','red','image1'],
['T-shirt 2',12.5,'M','red','image2'],
['T-shirt 3',9.70,'XL','red','image3'],
['T-shirt 4',20,'S','red','image4'],
['T-shirt 5',23,'M','red','image5']
];
Εδώ να αναφέρουμε, πώς εκτός από τον στατικό τρόπο που διαβάζουμε τα δεδομένα μας, μπορούμε να αντλούμε τα δεδομένα από οποιαδήποτε βάση δεδομένων, με την προϋπόθεση ότι τα "γυρνάμε" από την βάση, στην παραπάνω μορφή . Με τον παρακάτω κώδικα φορτώνουμε τα δεδομένα στον πίνακά μας:
ds.loadData(myData);
Προχωράμε, με την δημιουργία του πίνακα, και πιο συγκεκριμένα, θα ορίσουμε τον τίτλο της στήλης μας, τον τύπο των δεδομένων, το μήκος (width) της στήλης, εάν θα έχει ή όχι την δυνατότητα να ταξινομεί τα αποτελέσματα και τέλος, το όνομα που περιέχει η εγγραφή μας για τον αντίστοιχο τύπο δεδομένων.
Εδώ μπορούμε να ορίσουμε και άλλες παραμέτρους, για παράδειγμα εάν θα μπορεί να αυξομειώνει το μήκος της, να περιέχει συγκεκριμένη τάξη css για όλα τα κελιά της στήλης της. Περισσότερα θα βρείτε στο documentation του API του ExtJS.
Εμείς για το παράδειγμά μας, έχουμε:
var colModel = new Ext.grid.ColumnModel([
{
id:'title',
header: "name",
width: 160,
sortable: true,
dataIndex: 'title'
},
{
header: "price",
width: 75,
renderer: Ext.util.Format.usMoney,
dataIndex: 'price'
},
{
header: "size",
width: 75,
sortable: true,
align: 'center',
dataIndex: 'size'
},
{
header: "color",
width: 75,
sortable: true,
align: 'center',
dataIndex: 'color'
},
{
header: "Image",
width: 60,
dataIndex: 'image',
sortable: false,
align: 'center',
renderer: function(data){
return "<img src='" + data + "' width=50 height=51 />"
}
}
]);
Στην τελευταία στήλη, που εμφανίζονται οι εικόνες μας, χρησιμοποιήσαμε την renderer, η οποία επιστρέφει ένα HTML περιεχόμενο και στην περίπτωσή μας, το HMTL κομμάτι κώδικα για την εμφάνιση εικόνων, όπως ακριβώς θα το γράφαμε σε HTML γλώσσσα.
Πλέον, το μόνο που λείπει, είναι να εμφανίσουμε τον πίνακα στην σελίδα μας. Επιλέγουμε να εμφανίσουμε τον πίνακα, σ' ένα παράθυρο (Ext.Window), το οποίο εξ' ορισμού έχει την δυνατότητα να είναι draggable, να ελαχιστοποιείται, να κλείνει και γενικότερα να όλες τις ιδιότητες που έχει ένα application window.
var win = new Ext.Window({
id: 'iwindow',
frame: true,
border: false,
labelAlign: 'left',
title: 'www.Experts-Zone.gr',
bodyStyle:'padding: 5px',
width: 700,
// Specifies that the items will now be arranged in columns
layout: 'column',
items: [{
columnWidth: 0.6,
layout: 'fit',
items: {
Χωρίσαμε το παράθυρο σε δύο στήλες μέσω της ρύθμισης layout: 'column'. Η αριστερή στήλη, όπου θα περιέχει τον grid μας θα καταλαμβάνει 60% (columnWidth: 0.6) του παραθύρου, ενώ η προεπισκόπηση της εικόνα που θα βρίσκεται στην δεξιά στήλη, θα καταλαμβάνει το υπόλοιπο 40% (columnWidth: 0.4). Έπειτα προσθέτουμε τον πίνακα, στα items της αριστερής στήλης:
xtype: 'grid',
ds: ds,
cm: colModel,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
Ext.getCmp("image").body.update(
"<img width=100% src='"+rec.get('image')+"'>");
}
}
}),
autoExpandColumn: 'title',
height: 360,
border: false,
listeners: {
render: function(g) {
g.getSelectionModel().selectRow(0);
},
delay: 10 // Allow rows to be rendered.
}
}
}
Τέλος φτιάχνουμε το κομμάτι που βρίσκεται στο δεξί κομμάτι του window μας και θα περιέχει την εικόνα μας:
columnWidth: 0.4,
xtype: 'fieldset',
labelWidth: 90,
defaults: {width: 200}, // Default config options for child items
autoHeight: true,
bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
border: false,
style: {
// when you add custom margin in IE 6...
"margin-left": "10px",
// you have to adjust for it somewhere else
"margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0"
},
items: {
xtype: 'panel',
id: 'image',
border: false,
fieldLabel: 'Image',
name: 'company',
html: Ext.BLANK_IMAGE_URL
}
}],
renderTo: bd
})
win.show();
});
Εδώ τελείωσαμε τον οδηγό μας. Ο οδηγός μπορεί να βρει εφαρμογή σε ιστοσελίδες που θέλουμε ο διαχειριστής να έχει έλεγχο των χρηστών του, να εμφανίζονται οι εικόνες των χρηστών ή στην παρουσίαση κάποιων πωλήσεων, να εμφανίζει και το αντίστοχο γράφημα.
Comments
respond
Some people really are not going to care just about the quality of their analytical essay custom research paper, but that seems to be really important issue and the papers writing service would help to perform the argumentative essay of superb quality to make your dreams come real about your university career.
Post new comment