Ext JS (Greek)

Ext JS

Πως να μετατρέψετε τις σελίδες σας σε interactive applications

Σουργκούνης Θεοδόσηςwww.kamibu.com

Τι είναι το Ext JS;Το Ext JS είναι ένα framework που βοηθάει στην ανάπτυξη διαδραστικών σελίδων

Γιατί το χρειαζόμαστε;Επιταχύνει τη διαδικασία της ανάπτυξης, διευκολύνει την ομοιομορφία και βοηθάει στη σωστή δομή του κώδικα

Είναι συμβατό;Το Ext JS είναι συμβατό με όλους τους μεγάλους browsers που χρησιμοποιούνται σήμερα

Παραδείγματα: http://www.kamibu.com/techtalk/extjs

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%' );

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

Ext.Element

el.setSize( 100, 200, { duration: 1, easing: 'backBoth'});

el.createChild({ tag:'h1', id:'header', html:'Header 1'});

Events

Φυσικά events (click, mouseover, keypress ... )

Software driven events ( datachanged, beforedestroy ... )

el.on( 'click', doSomething );

Ορίσματα στην συνάρτηση doSomething1. eventObject2. DOM element

The Component Model

The Component Model

var panel1 = new Ext.Panel({ height: 200, width: 300, title: "I am a happy panel!!", html: "Hello there!"});

var panel2 = { xtype: 'panel', width: 300, height: 200, title: "Plain Panel", html: 'Panel with xtype specified' listeners: { click: fn }};

new Ext.Window({ id: 'myWin', height: 200, width: 300, title: "A window", items: [ panel1, panel2 ]});

The Component Life Cycle

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

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

Panel

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

Buttons and Menus

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

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

Window

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

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

Laying it all out

Container Layout

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

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

Form Layout

var myWin = new Ext.Window({ height: 240, width: 200, bodyStyle: 'padding: 5px', layout: 'form', labelWidth: 50, defaultType: 'field', items: [{ fieldLabel: 'Name', width: 110 },{ xtype: 'combo', fieldLabel: 'Location', width: 120, store: storeObject },

{ xtype: 'panel', fieldLabel: ' ', labelSeparator: ' ', frame: true, title: 'Instructions', html: 'Please fill in the form', height: 55 }]});myWin.show();

Absolute Layout

var myWin = new Ext.Window({ height: 300, width: 300, layout: 'absolute', autoScroll: true, border: false, items: [{ title: 'Panel1', x: 50, y: 50, height: 100, width: 100, html: 'x: 50, y:50', frame: true },

{ title: 'Panel2', x: 90, y: 120, height: 75, width: 77, html: 'x: 90, y: 120', frame: true }]}).show();

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

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

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

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

Table Layoutvar myWin = new Ext.Window({ title: 'A Window with a Table layout', layout: 'table', layoutConfig: { columns: 3 }, defaults: { height: 50, width: 50 }, items: [{ html: '1', colspan: 3, width: 150 }, { html: '2', rowspan: 2, height: 100 },

{ html: '3' }, { html: '4', rowspan: 2, height: 100 }, { html: '5' }, { html: '6', colspan: 3, width: 150 }]});myWin.show();

Border Layout

Border Layoutnew Ext.Viewport({ layout: 'border', defaults: { frame: true, split: true }, items: [{ title: 'North Panel', region: 'north', height: 100, collapsible: true },{ title: 'South Panel', region: 'south', height: 75, split: false, margins: { top: 5 } },

{ title: 'East Panel', region: 'east', width: 100, minWidth: 75, maxWidth: 150, collapsible: true },{ title: 'West Panel', region: 'west', collapsible: true, collapseMode: 'mini' },{ title: 'Center Panel', region: 'center' }]});

Form panels

var form = new Ext.Form.FormPanel({ ... initialConfig: { method: 'GET', fileUpload: true, standardSubmit: false, url: 'http://...' baseParams: { foo: 'bar' } }});

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

Combo box

var combo = { xtype: 'combo', fieldLabel: 'Select a name', store: new Ext.data.ArrayStore({ data: [ ['Jack Slocum'], ... ], fields: ['name'] }), displayField: 'name', mode: 'local'}

Ειδική περίπτωση: timefield

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

Load and SubmitΜπορούμε να υποβάλουμε τη φόρμα μας σύγχρονα ή ασύγχρονα, μέσω του ορίσματος standardSubmit. Για να υποβάλουμε τη φόρμα, εκτελούμε

myFormPanel.getForm().submit(config)

Το config στην περίπτωση της ασύγχρονης υποβολής μπορεί να περιέχει handlers, όπως onSuccess ή onFailure, ή οτιδήποτε άλλο από το initialConfig.

myFormPanel.getForm().load({ url: 'data.php',});

Trees

Trees

var rootNode = { text: 'Root Node', expanded: true, children: [ { text: 'Child 1', leaf: true },{ text: 'Child 2', children: [ ... ] } ]}

var tree = { xtype: 'treepanel', root: rootNode}

new Ext.Window({ layout: 'fit', items: tree}).show();

Data Store

How Stores work

ProxyHttpProxyScriptTagProxyMemoryProxy

ReaderArray ReaderXML ReaderJSON Reader

Grid Panel

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

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

Building a simple Grid Panel

var grid = new Ext.grid.GridPanel({ title: 'Our first grid', store: store, view: gridView, colModel: colModel, selModel: selModel});

Ευχαριστούμε!

Ερωτήσεις;