Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ext JS (Greek)

2,776 views

Published on

Published in: Technology, Business
  • Be the first to like this

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. Ευχαριστούμε! Ερωτήσεις;

×