25
- Anand Dayalan
| Date post: | 16-Nov-2014 |
| Category: |
Technology |
| Upload: | anand-dayalan |
| View: | 2,419 times |
| Download: | 1 times |
- Anand Dayalan
• A JavaScript Framework for RIA • Developed and Supported Sencha Inc• Started as extension to Yahoo's YUI
What is Ext JS?
Features and Highlights
• Rich, Modern UI Widgets• Layout Controls• MVC Application Architecture• Charts• Data Package• Cross Browser Support
Ext JS vs jQuery
Ext JS• Not free for commercial• Competitively Smaller
Community• Inbuilt powerful UI widgets• RIA - Super Easy• MVC Application
Architecture• Excellent Charts• Excellent Layout Controls
jQuery• Free• Most famous, Huge
Community• Lacks complex UI elements• RIA - Not Easy• No MVC
• No Charts• No Layout Controls
Ext JS vs jQuery
Ext JS• Rich data management• Little bit Longer Learning
Curve• Complete and Robust• Library Size More• Easy Development and
Maintenance• Good Code Readability• Better Documentation and
Samples
jQuery• No• Easy to Start
• Not that much• Lightweight• Complex
• No• Not Bad
Which one to use?
Ext JS• Complex UI• Lots of Windows and
Section• Desktop Like• Admin Web App• Don’t want to use any
server side scripting language or HTML
jQuery• Need to work with HTML
you define• Already have running
application and only need some DOM manipulation
• Need to some AJAX/JS tweaking to an existing UI
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 - Components
var 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 Pointers
Each dom node has 5 pointers which allow you to navigate through the DOM
parentNodepreviousSiblingnextSiblingfirstChildlastChild
Ext.DomQueryExt.get('myEl')Ext.select('div.foo, span.bar');Ext.get('myEl').select('div.foo'); or Ext.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
Inheritance
MyClass = 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 that's 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/ap
p/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); }});
Model
Ext.define('AM.model.User', { extend: 'Ext.data.Model', fields: ['name', 'email']});
Communication Between Controllers
1. Add MyApp.app = this; in application 2. 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()
References
refs: [ {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
