[Webinar] SpiraTest - Setting New Standards in Quality Assurance
Ext JS (Greek)
1. Ext JS
Πως να μετατρέψετε τις σελίδες σας σε
interactive applications
Σουργκούνης Θεοδόσης
www.kamibu.com
2. Τι είναι το Ext JS;
Το Ext JS είναι ένα framework που βοηθάει στην
ανάπτυξη διαδραστικών σελίδων
Γιατί το χρειαζόμαστε;
Επιταχύνει τη διαδικασία της ανάπτυξης, διευκολύνει την
ομοιομορφία και βοηθάει στη σωστή δομή του κώδικα
Είναι συμβατό;
Το Ext JS είναι συμβατό με όλους τους μεγάλους
browsers που χρησιμοποιούνται σήμερα
Παραδείγματα: http://www.kamibu.com/techtalk/extjs
4. Selectors ( Ext.DomQuery )
Επιλογή με ID:
var el = Ext.get( 'my-div' );
Επιλογή με αναφορά:
var el = Ext.get( myDivElement );
Επιλογή με CSS selector:
var el = Ext.select( selector );
Element: 'div > span'
Class or id: '#my-div .class'
Attribute: 'form[method=post]'
Pseudo Classes: 'div:first-child'
CSS Value: 'div{background*=no-repeat}'
25. Card Layout
var myWin = new Ext.Window({
title: 'A Window with a Card layout',
layout: 'card',
items: [{
title: 'Bio',
value: 'Tell us about yourself'
},{
title: 'Congratulations',
html: 'Thank you for filling out our form!'
}],
bbar: bottomToolbar
});
myWin.show();
26. Column Layout
var myWin = new Ext.Window({
id: 'myWin',
title: 'A Window with a Card layout',
layout: 'column',
defaults: {
frame: true
},
items: [{
title: 'Col 1',
columnWidth: .3
},{
title: 'Col 3',
html: "100px fixed width",
width: 100
}]
});
myWin.show();
30. Form panels
var form = new Ext.Form.FormPanel({
...
initialConfig: {
method: 'GET',
fileUpload: true,
standardSubmit: false,
url: 'http://...'
baseParams: {
foo: 'bar'
}
}
});
31. Form Fields
var textfield = {
xtype: 'textfield',
fieldLabel: 'Full Name',
emptyText: 'Enter your full name here!',
maskRe: /[a-z]/i,
msgTarget: 'side'
}
var browsefile = {
xtype: 'textfield',
fieldLabel: 'Browse for a file',
inputType: 'file'
}
var textarea = {
xtype: 'textarea',
}
33. More form fields
var htmleditor = {
xtype: 'htmleditor',
fieldLabel: 'Enter any text'
}
var datefield = {
xtype: 'datefield',
fieldLabel: 'Select date'
}
var checkbox = {
xtype: 'checkbox',
fieldLabel: 'Click me'
}
34. Load and Submit
Μπορούμε να υποβάλουμε τη φόρμα μας σύγχρονα ή
ασύγχρονα, μέσω του ορίσματος standardSubmit. Για να
υποβάλουμε τη φόρμα, εκτελούμε
myFormPanel.getForm().submit(config)
Το config στην περίπτωση της ασύγχρονης υποβολής μπορεί
να περιέχει handlers, όπως onSuccess ή onFailure, ή
οτιδήποτε άλλο από το initialConfig.
myFormPanel.getForm().load({
url: 'data.php',
});
40. Building a simple Grid Panel
var arrayData = [
['Jay Gracia', 'MD' ],
['Aaron Baker', 'VA' ],
];
var nameRecord = Ext.data.Record.create([
'name', 'state'
]);
var arrayReader = new Ext.data.ArrayReader({}, nameRecord );
var memoryProxy = new Ext.data.MemoryProxy( arrayData );
var store = new Ext.data.Store({
reader: arrayReader,
proxy: memoryProxy
});
var store = new Ext.data.ArrayStore({
data: arrayData,
fields: [ 'name', 'state' ]
});
41. Building a simple Grid Panel
var gridView = new Ext.grid.GridView();
var colModel = new Ext.grid.ColumnModel([
{
header: 'Full Name',
sortable: true,
dataIndex: 'name'
},{
header: 'State',
dataIndex: 'state'
}
]);
var selModel = new Ext.grid.RowSelectionModel({
singleSelect: true
});
42. Building a simple Grid Panel
var grid = new Ext.grid.GridPanel({
title: 'Our first grid',
store: store,
view: gridView,
colModel: colModel,
selModel: selModel
});
