Ext JS (Greek)

2,492 views
2,351 views

Published on

Published in: Technology, Business
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
2,492
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
23
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Ext JS (Greek)

  1. 1. Ext JSΠως να μετατρέψετε τις σελίδες σας σε interactive applications Σουργκούνης Θεοδόσης www.kamibu.com
  2. 2. Τι είναι το Ext JS;Το Ext JS είναι ένα framework που βοηθάει στηνανάπτυξη διαδραστικών σελίδων Γιατί το χρειαζόμαστε;Επιταχύνει τη διαδικασία της ανάπτυξης, διευκολύνει τηνομοιομορφία και βοηθάει στη σωστή δομή του κώδικα Είναι συμβατό;Το Ext JS είναι συμβατό με όλους τους μεγάλουςbrowsers που χρησιμοποιούνται σήμεραΠαραδείγματα: http://www.kamibu.com/techtalk/extjs
  3. 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. 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. 5. Ext.Elementel.setSize( 100, 200, { duration: 1, easing: backBoth});el.createChild({ tag:h1, id:header, html:Header 1});
  6. 6. Events Φυσικά events (click, mouseover, keypress ... ) Software driven events ( datachanged, beforedestroy ... )el.on( click, doSomething );Ορίσματα στην συνάρτηση doSomething1. eventObject2. DOM element
  7. 7. The Component Model
  8. 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. 9. The Component Life Cycle
  10. 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. 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. 12. Panel
  13. 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. 14. Buttons and Menusnew Ext.Button({ text: Plain Button, handler: handler menu: { defaults: { checked: false, }, items: [ { text: Red }, { text: Green }, { text: Blue } ] }});
  15. 15. Toolbarsvar toolbar = { items: [ { text: Add, }, ->, Select one of theese: , { xtype: combo, store: [ Toolbars, Are, Awesome ] } ]}
  16. 16. Windowvar win = new Ext.Window({ html : My first Window, id : myWin, height : 200, width : 300, constrain : true});win.show();
  17. 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. 18. Laying it all out
  19. 19. Container Layoutvar myWin = new Ext.Window({ height : 300, width : 300, title : A window with a container layout, autoScroll : true, items : [ panel1, panel2 ]}
  20. 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. 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. 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. 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. 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. 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. 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. 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. 28. Border Layout
  29. 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. 30. Form panelsvar form = new Ext.Form.FormPanel({ ... initialConfig: { method: GET, fileUpload: true, standardSubmit: false, url: http://... baseParams: { foo: bar } }});
  31. 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. 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. 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. 34. Load and SubmitΜπορούμε να υποβάλουμε τη φόρμα μας σύγχρονα ήασύγχρονα, μέσω του ορίσματος standardSubmit. Για ναυποβάλουμε τη φόρμα, εκτελούμεmyFormPanel.getForm().submit(config)Το config στην περίπτωση της ασύγχρονης υποβολής μπορείνα περιέχει handlers, όπως onSuccess ή onFailure, ήοτιδήποτε άλλο από το initialConfig.myFormPanel.getForm().load({ url: data.php,});
  35. 35. Trees
  36. 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. 37. Data Store
  38. 38. How Stores workProxy Reader HttpProxy Array Reader ScriptTagProxy XML Reader MemoryProxy JSON Reader
  39. 39. Grid Panel
  40. 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. 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. 42. Building a simple Grid Panelvar grid = new Ext.grid.GridPanel({ title: Our first grid, store: store, view: gridView, colModel: colModel, selModel: selModel});
  43. 43. Ευχαριστούμε! Ερωτήσεις;

×