Ext JS (Greek)

Click here to load reader

  • date post

    29-Nov-2014
  • Category

    Technology

  • view

    2.534
  • download

    3

Embed Size (px)

description

 

Transcript of 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
  • 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: I am a bold panel, 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: [{ titl