Ext JS Introduction

2,696 views

Published on

Published in: Technology
2 Comments
2 Likes
Statistics
Notes
  • Anand Sir would u plz send me your mail id ...... my mail id is nishant.chandwani@gmail.com ......
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,696
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
141
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

Ext JS Introduction

  1. 1. - Anand Dayalan
  2. 2. What is Ext JS?• A JavaScript Framework for RIA• Developed and Supported Sencha Inc• Started as extension to Yahoos YUI
  3. 3. Features and Highlights• Rich, Modern UI Widgets• Layout Controls• MVC Application Architecture• Charts• Data Package• Cross Browser Support
  4. 4. Ext JS vs jQuery Ext JS jQuery• Not free for commercial • Free• Competitively Smaller • Most famous, Huge Community Community• Inbuilt powerful UI widgets • Lacks complex UI elements• RIA - Super Easy • RIA - Not Easy• MVC Application • No MVC Architecture• Excellent Charts • No Charts• Excellent Layout Controls • No Layout Controls
  5. 5. Ext JS vs jQuery Ext JS jQuery• Rich data management • No• Little bit Longer Learning • Easy to Start Curve• Complete and Robust • Not that much• Library Size More • Lightweight• Easy Development and • Complex Maintenance• Good Code Readability • No• Better Documentation and • Not Bad Samples
  6. 6. Which one to use? Ext JS jQuery• Complex UI • Need to work with HTML• Lots of Windows and you define Section • Already have running• Desktop Like application and only need• Admin Web App some DOM manipulation• Don’t want to use any • Need to some AJAX/JS server side scripting tweaking to an existing UI language or HTML
  7. 7. Can I use both? Yes
  8. 8. Hello world<html> <body><link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /><script type="text/javascript" src="../../ext-all.js"></script><script language="javascript" src="helloworld.js"></script></body> </html>Ext.application({ launch: function() { Ext.create(Ext.container.Viewport, { layout: fit, items: [ { title: Hello Ext, html : Hello! Welcome to Ext JS. } ] }); }});
  9. 9. Some Basics - Componentsvar button = new Ext.Button({ text: ‘Click me!‘, width: 100, height: 20});var panel= new Ext.Panel({ title: A Panel, border: true, items: [ new Ext.Panel({ { xtype: ‘panel’, title: ‘Child panel!‘ title: ‘Child Panel’ }) } ]});
  10. 10. Some Basics - Eventsvar button = new Ext.Button({ text: Click me!, width: 100, height: 20, listeners: { click: function() { alert(Clicked!); } }});btn.on(mouseover, function() { alert(‘Mouse Over);});
  11. 11. DOM PointersEach dom node has 5 pointers which allow you tonavigate through the DOM parentNode previousSibling nextSibling firstChild lastChild
  12. 12. Ext.DomQueryExt.get(myEl)Ext.select(div.foo, span.bar);Ext.get(myEl).select(div.foo); orExt.select(div.foo, true, myEl);Ext.select(div.foo[title=bar]:first);Ext.select(div span);Ext.select(div > span);Ext.select(a[href=http://extjs.com]);Ext.select(div:next(span.header));Ext.select(div:{display=none});http://docs.sencha.com/core/manual/content/domquery.html
  13. 13. InheritanceMyClass = Ext.extend(Ext.SomeClass, { someFunction : function(arg1, arg2){ // custom code // call base class MyClass.superclass.someFunction.call(this, arg1, arg2); // custom code });
  14. 14. Layouts• Absolute• Accordion• Anchor• Border• Card (TabPanel)• Card (Wizard)• Column• Fit• Table• vbox• hBox – http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/layout- browser/layout-browser.html
  15. 15. MVC• Model is a collection of fields and their data. Models know how to persist themselves through the data package.• View is any type of component - grids, trees and panels are all views.• Controllers are special places to put all of the code that makes your app work - whether thats rendering views, instantiating Models, or any other app logic. – http://docs.sencha.com/ext-js/4- 1/#!/guide/application_architecture – http://dev.sencha.com/deploy/ext-4.1.0- gpl/examples/app/feed-viewer/feed-viewer.html
  16. 16. Application and ViewportExt.application({ requires: [Ext.container.Viewport], name: AM‘, appFolder: app‘, controllers: [ Users ], launch: function() { Ext.create(Ext.container.Viewport, { layout: fit, items: [ { xtype: userlist‘ } ] }); }});
  17. 17. ControllerExt.define(AM.controller.Users, { extend: Ext.app.Controller, views: [ user.List’ +, stores: *Users’ +, models: *User+, init: function() { this.control({ userlist: { itemdblclick: this.editUser } }); }, editUser: function(grid, record) { console.log(Double clicked on + record.get(name)); }});
  18. 18. ViewExt.define(AM.view.user.List ,{ extend: Ext.grid.Panel, alias: widget.userlist‘, title: All Users, store: Users, initComponent: function() { this.columns = [ {header: Name, dataIndex: name, flex: 1}, {header: Email, dataIndex: email, flex: 1} ]; this.callParent(arguments); }});
  19. 19. ModelExt.define(AM.model.User, { extend: Ext.data.Model, fields: [name, email]});
  20. 20. Communication Between Controllers1. Add MyApp.app = this; in application2. Declare a variable for controller in application3. Set the controller variable declared in application in init() function in conroller4. Now you can call any controller easily using MyApp.app.ContollerName.function()
  21. 21. Referencesrefs: [ {ref: feedList, selector: feedlist}, {ref: feedCombo, selector: feedwindow combobox}, { ref: feedWindow, selector: feedwindow, autoCreate: true, xtype: feedwindow } ],
  22. 22. Data Package
  23. 23. Data StoreExt.define(AM.store.Users, { extend: Ext.data.Store, model: AM.model.User, autoLoad: true, proxy: { type: ajax, url: data/users.json, reader: { type: json, root: users, successProperty: success } }});
  24. 24. Some Samplehttp://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/desktop/desktop.htmlhttp://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/feed-viewer/feed- viewer.htmlhttp://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/calendar/index.htmlhttp://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/live-search-grid.htmlhttp://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/cell-editing.htmlhttp://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/row-editing.htmlhttp://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/charts/BarRenderer.htmlhttp://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/tree/two-trees.htmlhttp://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/tree/treegrid.htmlhttp://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/draw/Tiger.html
  25. 25. URLs• Product – http://www.sencha.com/products/extjs/• Samples – http://www.sencha.com/products/extjs/examples/ – http://docs.sencha.com/ext-js/4-1/#!/example• Documentation – http://docs.sencha.com/ext-js/4-1/• Videos – http://docs.sencha.com/ext-js/4-1/#!/video

×