ExtJS Overview
8 likes1,816 views
This document contains a technical presentation on Ext JS given by Loiane Groner at IBM Brazil in November 2010. The presentation includes an introduction to Ext JS and its key features such as widgets, components, containers, stores, layout managers, and integration with other technologies. Code examples are provided to demonstrate how to get started with Ext JS. Resources for learning more about Ext JS are listed at the end.
![Selenium IDE
Firefox Extension
List of Commands
Selenium Locators – Xpath Expressions
IBM Market Insights
Example expressions look like this:
//input[@name='name']
//input[@name='name' and contains(@class, 'x-form-invalid')]
//input[@name='company']/following-sibling::img
//div[@id='Apple']
//div[@class='x-combo-list-item'][3]
Examples using CSS selectors:
css=html:root
css=div#structuralPseudo :nth-last-child(2)
css=a[class~="class2"]
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
40](https://image.slidesharecdn.com/extjsoverview-101118182434-phpapp01/85/ExtJS-Overview-40-320.jpg)
ExtJS Overview
- 1. IBM Brasil Loiane Groner – loianeg@br.ibm.com Nov/2010 © 2010 IBM Corporation
- 2. About me 5+ years of web development experience Java/ExtJS –Insights Leader - IT Specialist at IBM Brazil IBM Market Team – International project – US client Java/JEE/XML/ExtJS Technical Leader at IBM IBM Academic Initiative Ambassador JUG Leader at CampinasJUG/Java Campinas (Brazilian JUG – Java User Group) JUG Coordinator at ESJUG (Brazilian JUG) Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 2
- 3. IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 3
- 4. IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 4
- 5. YUI Lacked: • Easy to use API IBM Market Insights • Real World Widgets Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 5
- 6. IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 6
- 7. Windows looks like OS windows – support dragging/resizing/closing IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 7
- 8. IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 8
- 9. Good Documentation IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 9
- 10. Community Support IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 10
- 11. Commercial and Open Source License IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 11
- 12. Cross Browser IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 12
- 13. Adapters IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 13
- 14. IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 14
- 15. support paging/filtration/sorting/grouping/editor/RESTful Data Grid Easy to load/save data to server in different formats – xml/json IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 15
- 16. Window Prompt Confirm Icon Alert Yes, No, IBM Market Insights Cancel Progress Dialog Wait Dialog Window with components Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 16
- 17. Tree Panel support drag and drop/multiple trees/reordering/checkbox Easy to load/save data to server in different formats – xml/json IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 17
- 18. support autocomplete/typing/ajax/search/adavanced template Combo Boxes Easy to load/save data to server in different formats – xml/json IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 18
- 19. support ajax/file upload, calendar, etc Forms Easy to load/save data to server in different formats – xml/json IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 19
- 20. Dynamic – supports reloading on run time Charts Requires Flash IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 20
- 21. Google Calendar – same functions Calendar Ext JS 3.3+ IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 21
- 22. Google Maps, Gears and Adobe Air Integration IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 22
- 23. Themes Easy to customize IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 23
- 24. What Else Ext JS Can Do? Ajax support Dom traversing IBM Market Insights Dom manipulation Event Handling Selectors OOP emulation Animation Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 24
- 25. IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 25
- 26. Hello World using Eclipse IDE – Java project Donwload: http://sencha.com/products/extjs/ download.php IBM Market Insights Create a Dynamic Web Project. Under WebContent folder, create a folder where all ExtJS files will be located (I named it ext-3.0.3). Paste adapter and resources folders under your extjs folder. Also, paste this file: ext- all.js under ext-3.0.3: Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 26
- 27. IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 27
- 28. Hello World IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 28
- 29. IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 29
- 30. Ext JS and Base Library Relations IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 30
- 31. Main Ext JS Classes Component Panel IBM Market Insights Container Store Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 31
- 32. Component All widgets extends component class Components are managed by Ext.ComponentMgr Provide base widget functions like − get(componentId) − enable()/disable() − registerType(xtype, object) (shorthand Ext.reg()) − show()/hide() − addClass()/removeClass() − IBM Market Insights update(data/html) – update content area − getEl() return element − getId() − getXType() − render(target) − focus() XType – alternate way to define component − Lazy component creation var panel1 = { xtype : 'panel', title : 'Plain Panel', html : 'Panel with an xtype specified' } var myPanel = new Ext.Panel({ renderTo : document.body, height : 50, width : 150, title : 'Panel', frame : true Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 32
- 33. Containers handle the basic behavior of index or id) containing items, namely Main prop adding, inserting and removing items IBM Market Insights − Items - MixedCollection of children components Main functions − add() − remove()/removeAll() − insert() − find()/findBy()/findById()/findByTy pe − doLayout() − get(index or id)/getComponent(component or Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 33
- 34. Panels Main panel functions/prop/conf prop Panel subclasses − load() − TabPanel ▪ panel.load({ − Window ▪ url: 'your-url.php', ▪ params: {param1: 'foo', param2: 'bar'}, // − FormPanel orIBM Market Insights a URL encoded string ▪ callback: yourFunction, − GridPanel ▪ scope: yourObject, // optional scope for − TreePanel the callback ▪ discardUrl: false, ▪ nocache: false, ▪ text: 'Loading...', ▪ timeout: 30, ▪ scripts: false ▪ }); − body – prop − html – conf prop − autoLoad – conf prop Toolbar and Bottombar Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 34
- 35. Stores Data storage/Loading Store contains records object which contain a server data directly − Store is able to insert/update/add records SubClasses IBM Market Insights − ArrayStore: Store + ArrayReader – plain js array can be loaded into the array store − DirectStore: Store + DirectProxy + JsonReader - CRUD operation is going thought custom js method − GroupingStore: store for grid rows grouping − JsonStore: Store + JsonReader − XmlStore: Store + XmlReader Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 35
- 36. Stores Main exchange format: XML and JSON Easy to integrate – any language/framework with XML or JSON support: Market Insights IBM Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 36
- 37. Layout Manager Layouts manages by containers – there is no need to create Layouts directly IBM Market Insights The most useful are Fit, VBox, HBox, Border − Only VBox, HBox, Border layouts supports margins Flex prop of VBox, HBox BorderLayout must have center item Table layout does not support resizing of items Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 37
- 38. IBM Market Insights http://github.com/loiane/extjs-crud-grid-spring-hibernate Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 38
- 39. IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 39
- 40. Selenium IDE Firefox Extension List of Commands Selenium Locators – Xpath Expressions IBM Market Insights Example expressions look like this: //input[@name='name'] //input[@name='name' and contains(@class, 'x-form-invalid')] //input[@name='company']/following-sibling::img //div[@id='Apple'] //div[@class='x-combo-list-item'][3] Examples using CSS selectors: css=html:root css=div#structuralPseudo :nth-last-child(2) css=a[class~="class2"] Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 40
- 41. Executing Tests with Selenium Remote Control (RC) Programming Language HTTP Proxy IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 41
- 42. Java Test IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 42
- 43. Important! Selenium tests for ExtJS should rely on CSS selectors. For every button, grid, label, tab or any significant UI element, simply chose to use the cls attribute and specify a CSS class. IBM Market Insights This is how a basic button that is used in automation testing looks like: Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 43
- 44. Use Ext JS DO NOT Use Ext JS Complex UI Simple UI Features Insights IBM Market Single Component Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 44
- 45. Resources http://www.sencha.com http://www.extjs.com.br – Brazilian forum IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 45
- 46. Books IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 46
- 47. IBM Market Insights Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 47
- 48. Contact English blog: http://loianegroner.com Portuguese-Brazil blog: http://loiane.com IBM Market Insights Twitter: @loiane Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 48
- 49. Hebrew Hindi Traditional Chinese Gracias Spanish Obrigado Russian IBM Market Insights Merci French Brazilian Danku Dutch Ar4abic Portuguese Thank You English Grazie Italian Simplified Chinese Danke German Japanese Tamil Thai Korean Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation 49