Ext JS (Greek)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Ext JS (Greek)

on

  • 2,481 views

 

Statistics

Views

Total Views
2,481
Views on SlideShare
2,473
Embed Views
8

Actions

Likes
0
Downloads
21
Comments
1

2 Embeds 8

http://www.linkedin.com 5
https://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Η παρουσίαση έχει βιντεοσκοπηθεί και είναι διαθέσιμη εδώ:

    http://www.youtube.com/watch?v=2FeVvQR-uYY&feature=results_video&playnext=1&list=PL849AD013CA50F20E
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ext JS (Greek) Presentation Transcript

  • 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.MessageBoxExt.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.Elementel.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 );Ορίσματα στην συνάρτηση doSomething1. eventObject2. DOM element
  • 7. The Component Model
  • 8. The Component Modelvar 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. Containersvar 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. ContainersExt.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. Panelvar 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 Menusnew Ext.Button({ text: Plain Button, handler: handler menu: { defaults: { checked: false, }, items: [ { text: Red }, { text: Green }, { text: Blue } ] }});
  • 15. Toolbarsvar toolbar = { items: [ { text: Add, }, ->, Select one of theese: , { xtype: combo, store: [ Toolbars, Are, Awesome ] } ]}
  • 16. Windowvar win = new Ext.Window({ html : My first Window, id : myWin, height : 200, width : 300, constrain : true});win.show();
  • 17. Windowvar 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 Layoutvar myWin = new Ext.Window({ height : 300, width : 300, title : A window with a container layout, autoScroll : true, items : [ panel1, panel2 ]}
  • 20. Anchor Layoutvar 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 Layoutvar 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 Layoutvar 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 Layoutvar 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 Layoutvar 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 Layoutvar 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 Layoutvar 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 Layoutvar 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 Layoutnew 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 panelsvar form = new Ext.Form.FormPanel({ ... initialConfig: { method: GET, fileUpload: true, standardSubmit: false, url: http://... baseParams: { foo: bar } }});
  • 31. Form Fieldsvar 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 boxvar 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 fieldsvar 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. Treesvar 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 workProxy Reader HttpProxy Array Reader ScriptTagProxy XML Reader MemoryProxy JSON Reader
  • 39. Grid Panel
  • 40. Building a simple Grid Panelvar 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 Panelvar 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 Panelvar grid = new Ext.grid.GridPanel({ title: Our first grid, store: store, view: gridView, colModel: colModel, selModel: selModel});
  • 43. Ευχαριστούμε! Ερωτήσεις;