Ext JS Presentation


Published on

Published in: Technology

Ext JS Presentation

  1. 1. EXT JS FRAMEWORK Sergiu-George Boboc
  2. 2. EXT JS FRAMEWORK OVERVIEW1. What is EXT JS?2. UI Widgets 2.1 Panels, Forms 2.2 Menus, toolbars, buttons 2.3 Displaying Data with Grids 2.4 Editable Grids 2.5 Trees 2.6 Windows and Dialogs 2.7 Charts3. Layouts4. Working with Data5. Other features6. Resources
  3. 3. 1. What is Ext JS E • Ext JS,is a cross-browser JavaScript library for buildingX rich internet applications, using techniques such as T AJAX, DHTML and DOM scriptingJS • Originally built as an extension of YUI, Ext JS can now also extend jQuery and Prototype.FR • In early 2006, Jack Slocum began working on a set ofA extension utilities for the Yahoo! User Interface (YUI)M library. These extensions were quickly organized intoE an independent library of code and distributed underW the name "yui-ext”O • By the end of the year, the library had gained so muchR in popularity that the name was changed simply to ExtK
  4. 4. Ext JS supports all major web browsers including: • Internet Explorer 6+ • Firefox 3.6+ (PC, Mac) E • Safari 3+X • Chrome 6+ TJS • Opera 10.5+ (PC, Mac)FR Ext JS releasesAMEWORK
  5. 5. Why Ext JS? • as a client-side framework, Ext JS can run against any server platform that can process POST requests and E return structured data. Common choices include PHP,X Java, .NET and many more. TJS • Mature libraryFR • Extensible, object-oriented architectureA • Good documentation and community supportM • Already adopted by important clientsEWORK
  6. 6. Why Ext JS? • Dual licensing model – GPL and commercial with support E • Feature-rich UI widgets (windows, panels, grids, forms,X buttons, trees, toolbars, menus, etc.) TJSFRAMEWORK
  7. 7. EXT JS FRAMEWORK 2. UI Widgets2.1 Forms2.2 Menus, toolbars, buttons2.3 Displaying Data with Grids2.4 Editable Grids2.5 Trees2.6 Windows and Dialogs2.7 Charts
  8. 8. 2.1 Panels, Forms EX TJSFRAMEWORK Load and submit form values asynchronously
  9. 9. 2.2 Menus, toolbars, buttons EX TJSFRAMEWORK
  10. 10. 2.3 Displaying Data with Grids EX TJS XML FILE <Items> <Request>F <IsValid>True</IsValid> <ItemSearchRequest>R <Author>Sidney Sheldon</Author> <SearchIndex>Books</SearchIndex> </ItemSearchRequest>A </Request> <TotalResults>203</TotalResults>M <TotalPages>21</TotalPages> <Item> <ASIN>0446355453</ASIN>E <DetailPageURL> …W </DetailPageURL> <ItemAttributes>O <Author>Sidney Sheldon</Author> <Manufacturer>Warner Books</Manufacturer> <ProductGroup>Book</ProductGroup>R <Title>Master of the Game</Title> </ItemAttributes>K </Item> …… </Items> http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid/xml-grid.html
  11. 11. 2.3 Displaying Data with Grids Ext.onReady(function(){ E Ext.define(Book,{ extend: Ext.data.Model, fields: [X // set up the fields mapping into the xml doc // The first needs mapping, the others are very basic {name: Author, mapping: ItemAttributes > Author}, T }); Title, Manufacturer, ProductGroup]JS // create the Data Store var store = Ext.create(Ext.data.Store, { model: Book, autoLoad: true, proxy: { // load using HTTPF type: ajax, url: sheldon.xml,R // the return will be XML, so lets set up a reader reader: { type: xml,A // records will have an "Item" tag record: Item, idProperty: ASIN,M } totalRecords: @totalE } }); // create the gridW var grid = Ext.create(Ext.grid.Panel, { store: store, columns: [O {text: "Author", flex: 1, dataIndex: Author, sortable: true}, {text: "Title", width: 180, dataIndex: Title, sortable: true},R {text: "Manufacturer", width: 115, dataIndex: Manufacturer, sortable: true}, {text: "Product Group", width: 100, dataIndex: ProductGroup, sortable: true} ],K renderTo:example-grid, width: 540, height: 200 }); });
  12. 12. 2.3 Displaying Data with Grids EX TJSFRAMEWO • Configurable features:R paging, filtering, progress bar, sorting, cell and row editing, locking,K searching, buffered scrolling, etc. • Customizable data views • Plugins
  13. 13. 2.4 Editable Grids EX TJSFRAMEWORK
  14. 14. 2.4 Trees EX TJSFRAMEWORK
  15. 15. 2.4 Windows and Dialogs EX TJSFRAMEWORK
  16. 16. 2.4 Windows and Dialogs EX TJSFRAMEWORK
  17. 17. 2.5 Charts EX TJSFRAMEWORK
  18. 18. EXT JS FRAMEWORK 3. LayoutsAccordion layout Anchor layout (form)Anchor layout (panel) Column layoutTable layout HBox layoutVBox layout Border LayoutCard layout - TAB Card Layout – WHIZARD http://dev.sencha.com/deploy/ext-4.0.2a/examples/layout-browser/layout-browser.html
  19. 19. EXT JS FRAMEWORK 4. Working with Data  Clean separation of presentation and data.  Thin client which connects to web services.  Data encapsulated in JSON/XML{ <data> person: { <person> name: Ali, <name>Ali</name> age: 15, <age>15</age> isCitizen: true <isCitizen>true</isCitizen> } </person>} </data>
  20. 20. 4. Working with Data EX TJS JSON/ XMLF Web Backend WSR BrowserAMEWORK
  21. 21. 4. Working with Data  Store manage data E  Fetch from a web service, orX  using loadData() T  Kept as RecordJSF JSON/XMLR WS Store RecordAMEW  UI Components displays theO dataRK
  22. 22. 4. Working with Data E var btn = new Ext.Button({X text: Click me!, T width: 200, height: 100,JS listeners listeners: { click: function() {F on() alert(Clicked!);R handler }A } });ME btn.on(mouseover, function() {W alert(Hovered!);O });RK
  23. 23. EXT JS FRAMEWORK 5. Other features Themes Accessibility SVG drawing Drag-and-drop support Data-views Google-maps Resizable components Quick tips Keyboard navigation Templates
  24. 24. EXT JS FRAMEWORK 6. ResourcesWebsite: http://www.sencha.com/products/extjs/Samples: http://www.sencha.com/products/extjs/examples/Documentation: http://docs.sencha.com/ext-js/4-0/Forum: http://www.sencha.com/forum/Learn: http://www.sencha.com/learn/extjs/?4xScreencast: http://www.extjs.tv http://docs.sencha.com/ext-js/4-0/#!/video