• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Ext JS Introduction

Ext JS Introduction






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.


12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Anand Sir would u plz send me your mail id ...... my mail id is nishant.chandwani@gmail.com ......
    Are you sure you want to
    Your message goes here
  • Nice
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Ext JS Introduction Ext JS Introduction Presentation Transcript

    • - Anand Dayalan
    • What is Ext JS?• A JavaScript Framework for RIA• Developed and Supported Sencha Inc• Started as extension to Yahoos YUI
    • Features and Highlights• Rich, Modern UI Widgets• Layout Controls• MVC Application Architecture• Charts• Data Package• Cross Browser Support
    • 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
    • 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
    • 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
    • Can I use both? Yes
    • 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. } ] }); }});
    • 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’ }) } ]});
    • 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);});
    • DOM PointersEach dom node has 5 pointers which allow you tonavigate through the DOM parentNode previousSibling nextSibling firstChild lastChild
    • 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
    • InheritanceMyClass = Ext.extend(Ext.SomeClass, { someFunction : function(arg1, arg2){ // custom code // call base class MyClass.superclass.someFunction.call(this, arg1, arg2); // custom code });
    • 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
    • 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
    • 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‘ } ] }); }});
    • 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)); }});
    • 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); }});
    • ModelExt.define(AM.model.User, { extend: Ext.data.Model, fields: [name, email]});
    • 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()
    • Referencesrefs: [ {ref: feedList, selector: feedlist}, {ref: feedCombo, selector: feedwindow combobox}, { ref: feedWindow, selector: feedwindow, autoCreate: true, xtype: feedwindow } ],
    • Data Package
    • 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 } }});
    • 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
    • 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