1. Ext JS
Πως να μετατρέψετε τις σελίδες σας σε
interactive applications
Σουργκούνης Θεοδόσης
www.kamibu.com

2. Τι είναι το Ext JS;
Το Ext JS είναι ένα framework που βοηθάει στην
ανάπτυξη διαδραστικών σελίδων
Γιατί το χρειαζόμαστε;
Επιταχύνει τη διαδικασία της ανάπτυξης, διευκολύνει την
ομοιομορφία και βοηθάει στη σωστή δομή του κώδικα
Είναι συμβατό;
Το Ext JS είναι συμβατό με όλους τους μεγάλους
browsers που χρησιμοποιούνται σήμερα
Παραδείγματα: http://www.kamibu.com/techtalk/extjs

3. Ext.MessageBox
Ext.MessageBox.alert( 'Title here', 'Hello world!' );
Ext.MessageBox.prompt( 'Title here', 'Insert value' );
Ext.MessageBox.wait( 'Please wait...' );
Ext.MessageBox.progress( 'title', 'almost ready', '2%' );

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}'

5. Ext.Element
el.setSize( 100, 200, {
duration: 1,
easing: 'backBoth'
});
el.createChild({
tag:'h1',
id:'header',
html:'Header 1'
});

6. Events
Φυσικά events (click, mouseover, keypress ... )
Software driven events ( datachanged, beforedestroy ... )
el.on( 'click', doSomething );
Ορίσματα στην συνάρτηση doSomething
1. eventObject
2. DOM element

7. The Component Model

8. The Component Model
var panel1 = new Ext.Panel({ new Ext.Window({
height: 200, id: 'myWin',
width: 300, height: 200,
title: "I am a happy panel!!", width: 300,
html: "Hello there!" title: "A window",
}); items: [
panel1,
var panel2 = { panel2
xtype: 'panel', ]
width: 300, });
height: 200,
title: "Plain Panel",
html: 'Panel with xtype specified'
listeners: {
click: fn
}
};

9. The Component Life Cycle

10. Containers
var myWin = new Ext.Window({
height: 400,
width: 400,
items: [{
xtype: 'panel',
html: 'I am a panel',
frame: true,
height: 100
},{
html: '<b> I am a bold panel</b>',
frame: true
}]
});
myWin.show();

11. Containers
Ext.getCmp( 'myWin' ).add({
title: 'Appended Panel',
id: 'addedPanel',
html: "hello there!"
});
Ext.getCmp( 'myWin' ).doLayout();
var panel = Ext.getCmp( 'addedPanel' );
Ext.getCmp( 'myWin' ).remove( panel );
Ext.getCmp( 'myWin' ).findByType( 'panel' );

12. Panel

13. Panel
var myPanel = new Ext.Panel({
width: 200,
height: 150,
collapsible: true,
renderTo: Ext.getBody(),
tbar: TopToolbar,
bbar: BottomToolbar,
html: 'My first Toolbar Panel!'
tools: [
{
id: 'gear'
},{
id: 'help'
}]
});

14. Buttons and Menus
new Ext.Button({
text: 'Plain Button',
handler: handler
menu: {
defaults: {
checked: false,
},
items: [
{ text: 'Red' },
{ text: 'Green' },
{ text: 'Blue' }
]
}
});

15. Toolbars
var toolbar = {
items: [
{
text: 'Add',
},
'->',
'Select one of theese: ',
{
xtype: 'combo',
store: [ 'Toolbars', 'Are', 'Awesome' ]
}
]
}

16. Window
var win = new Ext.Window({
html : 'My first Window',
id : 'myWin',
height : 200,
width : 300,
constrain : true
});
win.show();

17. Window
var win = new Ext.Window({
height: 75,
width: 200,
modal: true,
title: 'This is a window',
html: 'Try to move or resize me. I dare you.',
plain: true,
border: false,
resizable: false,
draggable: false,
closable: false,
buttonAlign: 'center',
buttons: [ ... ]
});
win.show();

18. Laying it all out

19. Container Layout
var myWin = new Ext.Window({
height : 300,
width : 300,
title : 'A window with a container layout',
autoScroll : true,
items : [ panel1, panel2 ]
}

20. Anchor Layout
var myWin = new Ext.Window({
height: 300,
width: 300,
layout: 'anchor',
anchorSize: '400',
items: [{
title: 'Panel1',
anchor: '100%, 25%',
frame: true
},{
title: 'Panel2',
anchor: '0, 50%',
frame: true
}
});
myWin.show();

21. Form Layout
var myWin = new Ext.Window({
height: 240, {
width: 200, xtype: 'panel',
bodyStyle: 'padding: 5px', fieldLabel: ' ',
layout: 'form', labelSeparator: ' ',
labelWidth: 50, frame: true,
defaultType: 'field', title: 'Instructions',
items: [{ html: 'Please fill in the form',
fieldLabel: 'Name', height: 55
width: 110 }]
},{ });
xtype: 'combo', myWin.show();
fieldLabel: 'Location',
width: 120,
store: storeObject
},

22. Absolute Layout
var myWin = new Ext.Window({ {
height: 300, title: 'Panel2',
width: 300, x: 90,
layout: 'absolute', y: 120,
autoScroll: true, height: 75,
border: false, width: 77,
items: [{ html: 'x: 90, y: 120',
title: 'Panel1', frame: true
x: 50, }]
y: 50, }).show();
height: 100,
width: 100,
html: 'x: 50, y:50',
frame: true
},

23. Fit Layout
var myWin = new Ext.Window({
height : 200,
width : 200,
layout : 'fit',
border : false,
items : [
{
title : 'Panel1',
html : 'I fit in my parent!',
frame : true
}
]
});
myWin.show();

24. Accordion Layout
var myWin = new Ext.Window({
layout: 'accordion',
layoutConfig: {
animate: true
},
items: [{
xtype: 'form',
title: 'General info',
items: {
fieldLabel: 'Name',
anchor: '-10',
}
},{
title: 'Instructions',
html: 'Please enter information.',
}]
});
myWin.show();

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();

27. Table Layout
var myWin = new Ext.Window({
title: 'A Window with a Table layout', {
layout: 'table', html: '3'
layoutConfig: { },
columns: 3 {
}, html: '4',
defaults: { rowspan: 2,
height: 50, height: 100
width: 50 },
}, {
items: [{ html: '5'
html: '1', },
colspan: 3, {
width: 150 html: '6',
}, colspan: 3,
{ width: 150
html: '2', }]
rowspan: 2, });
height: 100 myWin.show();
},

28. Border Layout

29. Border Layout
new Ext.Viewport({ {
layout: 'border', title: 'East Panel',
defaults: { region: 'east',
frame: true, width: 100,
split: true minWidth: 75,
}, maxWidth: 150,
items: [{ collapsible: true
title: 'North Panel', },{
region: 'north', title: 'West Panel',
height: 100, region: 'west',
collapsible: true collapsible: true,
},{ collapseMode: 'mini'
title: 'South Panel', },{
region: 'south', title: 'Center Panel',
height: 75, region: 'center'
split: false, }]
margins: { });
top: 5
}
},

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',
}

32. Combo box
var combo = { Ειδική περίπτωση: timefield
xtype: 'combo',
fieldLabel: 'Select a name',
store: new Ext.data.ArrayStore({
data: [ ['Jack Slocum'], ... ],
fields: ['name']
}),
displayField: 'name',
mode: 'local'
}

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',
});

35. Trees

36. Trees
var rootNode = { var tree = {
text: 'Root Node', xtype: 'treepanel',
expanded: true, root: rootNode
children: [ }
{
text: 'Child 1', new Ext.Window({
leaf: true layout: 'fit',
},{ items: tree
text: 'Child 2', }).show();
children: [ ... ]
}
]
}

37. Data Store

38. How Stores work
Proxy Reader
HttpProxy Array Reader
ScriptTagProxy XML Reader
MemoryProxy JSON Reader

39. Grid Panel

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
});

43. Ευχαριστούμε!
Ερωτήσεις;